如何更新谷歌地图中多个标记的位置

How do I update the locations of multiple markers in google maps

本文关键字：位置 谷歌地图 何更新 更新      更新时间：2023-09-26

我使用谷歌地图api在地图上放置标记。标记的gps坐标存储在mySQL数据库中。我已经能够创建标记，但位置会不断变化，所以我想知道如何更新标记的位置，以便标记在地图上移动。这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var image = new google.maps.MarkerImage('busIcon.png',
        // The image size
        new google.maps.Size(44, 46),
        // The origin
        new google.maps.Point(0,0),
        // The anchor
        new google.maps.Point(22, 23));
    var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
        new google.maps.Size(58, 46),
        new google.maps.Point(0,0),
        new google.maps.Point(22, 23)
    ); 
    var shape = {
        coord: [1, 1, 1, 45, 43, 45, 43 , 1],
        type: 'poly'
    };
    var markers = [
        <?php
        // Make a MySQL Connection
        mysql_connect("**********", "**********", "**********") or die(mysql_error());
        mysql_select_db("matsallen") or die(mysql_error());
        //Get number of rows
        $result = mysql_query
        (
            'SELECT COUNT(*) FROM busTrack AS count'
        )
        or die(mysql_error());
        $row = mysql_fetch_array( $result );
        $length = $row["COUNT(*)"];
        for ($count = 1; $count <= $length; $count++) {

            //Get data from MySQL database
            $result = mysql_query
            (
                'SELECT * FROM busTrack WHERE busID = '.$count
            )
            or die(mysql_error());


            // store the record of the "busTrack" table into $row
            $row = mysql_fetch_array( $result );
            // Echo the data into the array 'markers'
            $output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
            if ($count != $length) {
                $output = $output.',';
            };
            echo $output;
        };

        ?>
    ];
    for (index in markers) addMarker(map, markers[index]);

  function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });
    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);
    var infowindow = new google.maps.InfoWindow({
        content: content
    });
    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });

  }
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>

要更改标记的位置，请在该标记上调用setPosition（）：

marker.setPosition(new google.maps.LatLng(newLat,newLng);

为此，您需要将所有标记保存在一个数组中。也许这样的东西会起作用：

var myMarkers = new Array();
for (index in markers) {
    myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}
function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });
    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);
    var infowindow = new google.maps.InfoWindow({
        content: content
    });
    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
    return marker;    
}

然后，当标记的位置需要更改时，希望您知道总线ID，并可以调用：

myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);

我没有测试上面的代码，所以可能会有一些小的语法错误或其他什么，但它应该会给你一些想法。

相关文章：