使用 google map api 在 google map 上标记多个位置

Question

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

更新了我的代码 函数初始化（）{

    $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', 初始化);

Answer 1

这是我想出的最终答案。特别感谢罗夏。

<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));
    }

Answer 2

您的问题在这里（您的“答案”中的信息，尚未在您的问题中）：

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

Answer 3

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

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

谷歌地图多个标记（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>