首页 文章

使用Google Map API在Google Map 上标记多个位置

提问于
浏览 次
0

我想在谷歌 Map 上添加多个位置 . 我已经保存了数据库中的经度和纬度 . 然后我从PHP检索它并将数据附加到Javascript函数 . 当我在Javascript中硬编码位置时，它工作正常 . 但是当我用PHP加载数据时，它无法正常工作 . 但是当我用Firebug检查时，它显示PHP值已经到达相关位置 . 问题是什么都没有加载 . 以下是我的代码 .

<script type="text/javascript">
function initialize() {
<?php
    $con=mysqli_connect("HOST","DBUSERNAME","DBPASSWORD","TABLE");
    // Check connection
    if (mysqli_connect_errno())
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $result = mysqli_query($con,"SELECT * FROM locations");
?>
var count=0;
var my = new google.maps.LatLng(7.860661,80.674896);
var mapOptions = {
    zoom: 8,
    center: my
}
<?php while($row = mysqli_fetch_array($result))
    {
?>
    var myLatlng;
    var finallatlang=myLatlng.concat(count.toString());
    finallatlang = new google.maps.LatLng(<?php echo $row['latitude'];?>,<?php echo $row['longtitude'];?>);
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: finallatlang,
        map: map,
        title: '<?php echo $row['location_name'];?>'
    });
    count++;
<?php } ?>
mysqli_close($con);
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

更新了我的代码函数initialize（）{

$result = mysqli_query($con,"SELECT * FROM locations");
    ?>
    //var count=0;
    <?php $count=0;?>
    var my = new google.maps.LatLng(7.860661,80.674896);
    var mapOptions = {
    zoom: 8,
    center: my
    }
    <?php while($row = mysqli_fetch_array($result))
    {
    ?><?php echo $count++;?>
    //var myLatlng;
    <?php $mylatlang="mylatlang";?>
    //var finallatlang=myLatlng.concat(count.toString());
    //var count=parseInt(<?php //echo $count;?>);
    //var finallatlang=myLatlng+count.toString();
    finallatlang = new google.maps.LatLng(parseFloat(<?php echo    $row['latitude'];?>),parseFloat(<?php echo $row['longtitude'];?>));
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var latlang='<?php echo $mylatlang+$count?>';
//var latlang=Math.random();

var marker = new google.maps.Marker({
    position: latlang,
    map: map,
    title: '<?php echo $row['location_name'];?>'
});
//count++;

google.maps.event.addDomListener（window，'load'，initialize）;

google-maps google-maps-api-3

3 回答

  • 0

    你的问题在这里（你的'答案'中的信息，还没有在你的问题中）：

    new google.maps.LatLng('6.936992','79.860935')

    LatLng构造函数需要两个浮点数，而不是两个字符串 . 如果是的话

    new google.maps.LatLng(6.936992,79.860935)

    你没事 . 使用parseFloat将这些值转换为浮点数：

    finallatlang = new google.maps.LatLng(
    parseFloat(<?php echo $row['latitude'];?>),
    parseFloat(<?php echo $row['longtitude'];?>)
);
    回复于
  • 0

    您的数据库连接（PHP代码）：

    <?php  $con=mysql_connect("host","dbuser","dbpassword");
       mysql_select_db("dbname",$con);
       $result = mysql_query("SELECT * FROM locations");  
 ?>

    谷歌 Map 多个标记（Javascript代码）：

    <div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
        var locations = [
                     <?php while($row = mysql_fetch_array($result))  {  ?>
                         ['marker 1',<?php echo $row["lat"] ?>,<?php echo $row["longs"] ?>, 4],
                     <?php } ?>
            ];

        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            myOptions);

        var infowindow = new google.maps.InfoWindow();

        var marker, i;
        for (i = 0; i < locations.length; i++) {  
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
             }
            })
            (marker, i));
        }

</script>
    回复于
  • 0

    这是我想出的最终答案 . 特别感谢Rorschach .

    <div id="map" style="width: 1000px; height: 900px;"></div>


<script type="text/javascript">
<?php
$con=mysqli_connect("HOST","HOSTUSERNAME","HOSTPASSWORD","DATABASE");
// Check connection
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM locations");
?>
var locations = [<?php while($row = mysqli_fetch_array($result))
{?>

['<?php echo $row['location_name'];?>', <?php echo $row['latitude'];?>, <?php echo   $row['longtitude'];?>],

<?php }?>
];

    var latlng = new google.maps.LatLng(6.934947,79.862308);
    var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        myOptions);

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
         }
        })
        (marker, i));
    }
    回复于

相关问题