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

时间:2014-04-22 12:38:03

标签: google-maps google-maps-api-3

我想在谷歌地图上添加多个位置。我已经保存了数据库中的经度和纬度。然后我从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>

更新了我的代码                  function 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(窗口,&#39;加载&#39;,初始化);

3 个答案:

答案 0 :(得分:0)

你的数据库连接(php代码):

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

Google地图多个标记(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>

答案 1 :(得分:0)

您的问题在这里(您的回答中的信息&#39;,还没有问题):

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'];?>)
);

答案 2 :(得分: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));
    }