谷歌地图v3 - 用标记绘制折线

时间:2013-12-18 12:00:47

标签: jquery google-maps-api-3

我有来自Google API源代码示例的脚本,我需要使用行创建删除标记的功能。删除最后一点没有问题,但删除了中间点。

var map;
    var poly;
    marker=new Array();

    function initializeAddRoute() {
      var mapOptions = {
        zoom: 6
      };
       setMapCenter();
      map = new google.maps.Map(document.getElementById('map-addRoute'),
          mapOptions);


    var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
      };

        poly = new google.maps.Polyline(polyOptions);
        poly.binder = new MVCArrayBinder(poly.getPath());
        poly.setMap(map);

        google.maps.event.addListener(map, 'click', addLatLng);
    }


    function addLatLng(event) {
       var path = poly.getPath();
        path.push(event.latLng);
        var len = path.getLength();
        var markers = marker.length;

        marker[len] = new google.maps.Marker({
          position: event.latLng,
          title: '#' + len,
          map: map,
          draggable : true,
          id: len
        });
        marker[len].bindTo('position', poly.binder, (len-1).toString());
        google.maps.event.addListener(marker[len], 'click', deletePosition);
    }

    function deletePosition(event){
        ????????    
    }

这是删除最后一点的脚本。

function deletePosition(event){
alert(this.id);
    var path = poly.getPath();
path.removeAt(this.id-1);

marker.splice( $.inArray(this.id,marker),1);
this.setMap(null);              
}

2 个答案:

答案 0 :(得分:0)

你需要遍历你的标记数组。

for (var i = 0; i < marker.length; i++) {
    // Delete marker
    marker[i].setMap(null);
    marker.splice(i, 1);
    // Delete polyline point
    poly.getPath().removeAt(i);
}

如果你想删除一个特定的标记,这个想法大致相同。请查看这个非常明确的示例,了解如何添加,移动和删除标记以及折线:

http://jsfiddle.net/upsidown/4bJBx/

答案 1 :(得分:0)

这样做的方法有点优雅(对于你在地图上有另一个标记的情况,你不想与折线标记对应) 设置标记时 - 用折线的路径数标题:

var polyMarker = new google.maps.Marker({
            title: ''+path.getLength(),
            position: event.latLng,
            map: map
        });

所以当你需要删除具体标记时:

google.maps.event.addListener(polyMarker, 'rightclick', function() {
            removePoint(polyMarker);
        });

功能是:

function removePoint(polyMarker) {
            // Delete marker
            polyMarker.setMap(null);
            // Delete polyline point
            polyLine.getPath().removeAt(polyMarker.getTitle()-1);
}