如何在谷歌地图上显示多个纬度和经度

How to display multiple Latitude and Longitude on Google Map

本文关键字：纬度经度显示谷歌地图更新时间：2023-09-26

我在PHP中的一个数组中有多个LAT/LONG，但显示LAT/LONG的代码是显示单个LAT/LONG，我试图在for循环中迭代数组，但没有成功，如下所示：

<html>
    <head>
        <style type="text/css">
            div#map {
                position: relative;
            }
            div#crosshair {
                position: absolute;
                top: 192px;
                height: 19px;
                width: 19px;
                left: 50%;
                margin-left: -8px;
                display: block;
                background: url(crosshair.gif);
                background-position: center center;
                background-repeat: no-repeat;
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map;
            var geocoder;
            var centerChangedLast;
            var reverseGeocodedLast;
            var currentReverseGeocodeResponse;
            function initialize() {
                <?php for($i=0;$i<count($data);$i++){?>
                var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
                var myOptions = {
                    zoom: 40,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder = new google.maps.Geocoder();
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "<?php echo $data[$i]['deviceID'];?>"
                });
                <?php }?>
            }
        </script>
    </head>
    <body onLoad="initialize()">
        <div id="map" style="width:200px; height:200px">
            <div id="map_canvas" style="width:100%; height:200px"></div>
            <div id="crosshair"></div>
        </div>

    </body>
</html>

我怀疑javasctipt代码中必须有一些参数multiple才能使其工作，但不确定。。。有人能帮上忙吗。

您在每次迭代中都要创建新的map。将map定义和geocoder定义放置在foreach:之外

function initialize() {
    var myOptions = {
        zoom: 40,
        center: latlng,   // set some default latlng here, e.g $data[0]['lat'], $data[0]['lng']
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    <?php for($i=0;$i<count($data);$i++){?>
    var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "<?php echo $data[$i]['deviceID'];?>"
    });
    <?php }?>
}