仅更新 Google 个地图中的标记

Question

当Google加载地图时，加载所有子地图需要几秒钟，每次我想改变一个标记我需要一次又一次地加载所有地图，可以一次加载地图并更新标记动态？

function initialize(markers) {
    console.log(markers);
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(40.4378271,-3.6795367)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var j=0;
    for (var i=0;i<((markers.length)-3);i=i+3){
        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i],markers[i+1]),
                map: map,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+j+'|FE6256|000000',
                title: markers[i+2]
        });
        j++;
}
}
google.maps.event.addDomListener(window, 'load', initialize(markers()));

Answer 1

您必须将地图实例存储在 initialize 内部可访问的某个位置，然后您将能够在以后的调用中重新使用地图，并且必须只删除以前的标记并绘制新标记。

Sample(将Map存储为map-div的属性):

function initialize(markers) {

    var node = document.getElementById('map-canvas'),
        j = 0,
        marker;

    //create a single Map-instance and store it as property of the map-container
    if (!node.map) {
        //create a MVCObject, used for binding of the markers map-property
        node.mvc = new google.maps.MVCObject();
        //the map
        node.map = new google.maps.Map(node, {
            zoom: 2,
            center: new google.maps.LatLng(40.4378271, -3.6795367)
        });

    }
    //this will remove previous markers
    node.mvc.set('map', null);
    node.mvc.set('map', node.map);


    for (var i = 0; i < ((markers.length) - 3); i = i + 3) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i], markers[i + 1]),
            map: node.map,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + 
                   j + '|FE6256|000000',
            title: markers[i + 2]
        });
        //bind the markers map-property
        marker.bindTo('map', node.mvc, 'map', true);


        google.maps.event.addListener(marker, 'map_changed', function () {
            //remove the binding when map has been set to null
            if (!this.getMap()) {
                this.unbind('map');
            }
        });

        j++;
    }
}

演示：http://jsfiddle.net/doktormolle/ns7j3sx0/

仅更新 Google 个地图中的标记

update only markers in Google Maps

javascript

google-maps

google-maps-api-3