Question

我正在使用谷歌地图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>

Answer 1

要更改标记的位置，请在该标记上调用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);

我没有测试上面的代码，因此可能会出现小的语法错误或其他问题，但它应该会给你一个想法。

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

1 个答案: