如何：从谷歌地图上的 JSON 动态更新标记

Posted 2023-02-24

【中文标题】如何：从谷歌地图上的 JSON 动态更新标记

【英文标题】：howto: dynamically update markers from JSON on google maps

【发布时间】：2014-10-18 20:38:13

【问题描述】：

我正在尝试更新标记的位置而不刷新整个页面。我曾尝试使用setTimeout(function()，但我没有运气..

这是我到目前为止的代码..

提前致谢

function initialize() 
    var mapOptions = 
       center: new google.maps.LatLng(35.66, -80.50),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);



 var json = (function ()  
        var json = null; 
            $.ajax( 
                'async': false, 
                'global': false, 
                'url': "getjson.php", 
                'dataType': "json", 
                'success': function (data) 
                 json = data;  ); 

            return json;)(); 
for (var i = 0, length = json.length; i < length; i++) 

  var data = json[i],
  latLng = new google.maps.LatLng(data.lat, data.lng); 
var marker = new google.maps.Marker(
position: latLng,
map: map,
title: data.title
);



var infoWindow = new google.maps.InfoWindow();


google.maps.event.addListener(marker, "click", function(e) 
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
);


(function(marker, data) 


google.maps.event.addListener(marker, "click", function(e) 
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
);

)(marker, data);



  

  google.maps.event.addDomListener(window, 'load', initialize);

这是我的 JSON 输出。

["lat":35.6606376,"lng":-80.5048653,"content":"bca",    "lat":42.6799504,"lng":-36.4949205,"content":"abc"]

【参考方案1】：

我建议使用 setInterval 而不是 setTimeout。

这里有一些代码通过 fiddle 中的 JSON 模拟更新，使用您提供的 JSON 并为每个标记添加所需的“描述”成员：

var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () 
    new Request.JSON(
        url: '/echo/json/',
        data: 
            json: JSON.encode([
                "lat": 35.6606376 + (0.01 * intervalNumber),
                    "lng": -80.5048653 + (0.1 * intervalNumber),
                    "content": "bca",
                "description":"first marker"
            , 
                "lat": 42.6799504 + (0.01 * intervalNumber),
                    "lng": -36.4949205 - (0.1 * intervalNumber),
                    "content": "abc",
                "description": "second marker"
            ]),
            delay: 3
        ,
        onSuccess: function (response) 
            update_map(response);
            intervalNumber++;
        
    ).send();
, 5000);
update_map = function (data) 
    var bounds = new google.maps.LatLngBounds();

    // delete all existing markers first
    for (var i = 0; i < gmarkers.length; i++) 
        gmarkers[i].setMap(null);
    
    gmarkers = [];

    // add new markers from the JSON data
    for (var i = 0, length = data.length; i < length; i++) 
        latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        bounds.extend(latLng);
        var marker = new google.maps.Marker(
            position: latLng,
            map: map,
            title: data[i].title
        );
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function (e) 
            infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
            infoWindow.open(map, marker);
        );
        (function (marker, data) 
            google.maps.event.addListener(marker, "click", function (e) 
                infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
                infoWindow.open(map, marker);
            );
        )(marker, data[i]);
        gmarkers.push(marker);
    

    // zoom the map to show all the markers, may not be desirable.
    map.fitBounds(bounds);
;

function initialize() 
    // initialize the map on page load.
    var mapOptions = 
        center: new google.maps.LatLng(35.66, -80.50),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    // add the markers to the map if they have been loaded already.
    if (gmarkers.length > 0) 
        for (var i = 0; i < gmarkers.length; i++) 
            gmarkers[i].setMap(map);
        
    


google.maps.event.addDomListener(window, 'load', initialize);

【参考方案2】：

https://developers.google.com/maps/documentation/javascript/reference

markerObject.setPosition(latlng:LatLng|LatLngLiteral)

我认为你不需要重新绘制地图，但万一你这样做了：

google.maps.event.trigger(mapObject, 'resize');

【讨论】：

试过了，也许我做错了，但它不起作用.. :(