Question

我正在使用Google Maps API（最新）。到目前为止，我可以借助折线和标记来创建和删除（添加操作时）路线。

问题是当我尝试修改（以更新模式）时，地图（动态地）填充了我保存的路线，但是如果尝试删除/修改现有路线，则标记会删除，而折线则不会。

尝试poly.setMap(null);。但不起作用。

在页面加载上：

删除任何标记后：（最后一个被删除）

您会看到标记已被删除，但折线仍然存在

CODE （不适用于小提琴）：

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

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 24.926294,
      lng: 67.022095
    } // Center the map on Pakistan.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // if update/edit model populate map dynamically
  populateLatLng();

  // Add a listener for the click event
  map.addListener('click', addLatLng);

  map.addListener('click', function() {
    getPathVariableCode(poly);
  });
}

function populateLatLng() {
  var path = '[{"lat":24.96078338154793,"lng":67.10892827306634},{"lat":24.934323836524374,"lng":67.07047612462884},{"lat":24.926851877301345,"lng":67.08111912999993},{"lat":24.90816999805268,"lng":67.06669957433587},{"lat":24.917822655664953,"lng":67.0519366959179},{"lat":24.911102310371437,"lng":67.03740863310293}]' //dynamic array
  path = JSON.parse(path);

  for (k = 0; k < path.length; k++) {

    var marker = new google.maps.Marker({
      position: path[k],
      title: '#' + k,
      map: map
    });

    markers.push(marker);

    poly = new google.maps.Polyline({
      path: path,
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    google.maps.event.addListener(marker, 'click', function(event) {
      removePoint(marker);
    });
  }
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  console.log("event", event);
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });

  markers.push(marker);

  console.log(markers.length - 1, event.latLng);
  poly.getPath().setAt(markers.length - 1, event.latLng);
  google.maps.event.addListener(marker, 'click', function(event) {
    removePoint(marker);
  });
}

function getPathVariableCode(line) {
  var getLocation = '';
  var locationArr = [];
  var pathArr = line.getPath();
  for (var i = 0; i < pathArr.length; i++) {
    var codeStr = [];
    codeStr = {
      'lat': pathArr.getAt(i).lat(),
      'lng': pathArr.getAt(i).lng()
    };
    locationArr.push(codeStr);
    document.getElementById('locationCordinates').value = JSON.stringify(locationArr);
  }
};

function removePoint(marker) {

  for (var i = 0; i < markers.length; i++) {
    if (markers[i] === marker) {
      markers[i].setMap(null);
      markers.splice(i, 1);
      poly.getPath().removeAt(i);
      getPathVariableCode(poly);

    }
  }
}

#map {
  height: 200px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 1

这是删除标记和折线的可行演示

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

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 24.926294,
      lng: 67.022095
    } // Center the map on Pakistan.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // if update/edit model populate map dynamically
  populateLatLng();

  // Add a listener for the click event
  map.addListener('click', addLatLng);

  map.addListener('click', function() {
    getPathVariableCode(poly);
  });
}

function populateLatLng() {
  var path = '[{"lat":24.96078338154793,"lng":67.10892827306634},{"lat":24.934323836524374,"lng":67.07047612462884},{"lat":24.926851877301345,"lng":67.08111912999993},{"lat":24.90816999805268,"lng":67.06669957433587},{"lat":24.917822655664953,"lng":67.0519366959179},{"lat":24.911102310371437,"lng":67.03740863310293}]' //dynamic array
  path = JSON.parse(path);

  for (k = 0; k < path.length; k++) {
    var marker = new google.maps.Marker({
      position: path[k],
      title: '#' + k,
      map: map
    });

    let index = markers.push(marker) - 1;

    google.maps.event.addListener(marker, 'click', function(event) {
      removePoint(marker, index);
    });
  }

  poly = new google.maps.Polyline({
    path: path,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  console.log("event", event);
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });

  let index = markers.push(marker) - 1;
  
  console.log(markers.length - 1, event.latLng);
  poly.getPath().setAt(markers.length - 1, event.latLng);
  google.maps.event.addListener(marker, 'click', function(event) {
    removePoint(marker, index);
  });
}

function getPathVariableCode(line) {
  var getLocation = '';
  var locationArr = [];
  var pathArr = line.getPath();
  for (var i = 0; i < pathArr.length; i++) {
    var codeStr = [];
    codeStr = {
      'lat': pathArr.getAt(i).lat(),
      'lng': pathArr.getAt(i).lng()
    };
    locationArr.push(codeStr);
    //document.getElementById('locationCordinates').value = JSON.stringify(locationArr);
  }
};

function removePoint(m, i) {
  let marker = markers[i]
  marker && marker.setMap(null);
  poly.getPath().removeAt(i);
  markers[i] = undefined;
}

#map {
  height: 200px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Google Maps修改/删除填充的折线

1 个答案: