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

Question

I am using google maps api to place markers on a map.我正在使用谷歌地图 api 在 map 上放置标记。 The gps coordinates of the markers are stored in a mySQL database.标记的 gps 坐标存储在 mySQL 数据库中。 I have been able to create the markers however the locations will constantly changing so I was wondering how I would go about updating the markers' locations so that the markers will move across the map.我已经能够创建标记，但是位置会不断变化，所以我想知道 go 如何更新标记的位置，以便标记将在 map 上移动。 Here is my code so far:到目前为止，这是我的代码：

<!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>

Answer 1

To change the location of a marker, call setPosition() on that marker:要更改标记的位置，请在该标记上调用 setPosition()：

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

To do this, you will need to save all your markers in an array.为此，您需要将所有标记保存在一个数组中。 Perhaps something like this would work:也许这样的事情会起作用：

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

Then, when the position of a marker needs to change, hopefully you know the bus ID and can just call:然后，当标记的 position 需要更改时，希望您知道总线 ID 并可以调用：

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

I didn't test the above code so there may be small syntax errors or something, but it should give you the idea.我没有测试上面的代码，所以可能会有小的语法错误或其他东西，但它应该会给你这个想法。

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2011-05-25 16:13:04

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2011-05-25 16:13:04

解决方案1
4 已采纳 2011-05-25 16:13:04