创建新多边形时删除多边形

Question

我有一张小google地图https://jsfiddle.net/deMischa/fkLm5zg9/8/。如果单击它，将放置一个标记，并在该标记周围绘制一个圆圈。

如果您再次单击，标记将被删除并放置一个新标记。效果不错。

function addMarker(location,blue) {  
  deleteMarkers();

  var marker = new google.maps.Marker({  
    position: location,  
    map: map,
    draggable: true
  });  
  markers.push(marker);  
  window.position = markers[0].position;

  addCircle();
}

我的问题是我不能用 polygon/circle 做同样的事情。

我知道我可以用

删除多边形

function deleteCircle() { 
  blue.setMap(null);
}

如果我通过单击按钮调用该函数，它就可以正常工作。但我希望从创建新 marker/circle 的函数中调用它。在这里它不起作用

function addMarker(location,blue) {  
  deleteMarkers();
  deleteCircle(); LIKE THE MARKERS, THE CIRCLES SHOULD BE DELETED HERE

  ...
}

控制台出现如下错误

Uncaught TypeError: Cannot read properties of null (reading 'setMap')

你们有什么想法吗？我将整个脚本上传到 https://jsfiddle.net/deMischa/fkLm5zg9/8/，因此可能很容易调试。

Answer 1

当我取消对 deleteCircle 调用的注释时，出现以下 javascript 错误： Uncaught ReferenceError: blue is not defined，因为 blue 直到您第一次调用 addCircle 函数后才被定义。

Duplicate/related 个问题：

how to remove previous circle from the map?

建议：您在全局范围内声明circle但不要使用它。

将 blue 更改为 circle。

// Adds a circle to the position of the marker. 
function addCircle() {
  circle = new google.maps.Polygon({
    paths: [drawCircle(new google.maps.LatLng(position), 0.1, 1)],
    strokeColor: "#0000FF",
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: "white",
    fillOpacity: 0.15
  });
  circle.setMap(map);
}

检查圆是否存在，如果存在则hide/delete它。

// Delete the circle 
function deleteCircle() { 
  if (circle && circle.setMap) 
    circle.setMap(null);
}

proof of concept fiddle

代码片段：

var map = null;
var circle = null;
var bounds = null;
var markerPosition = null;
var markers = [];
var position = new google.maps.LatLng(50.2275, 7.4885);

function initialize() {
  var myOptions = {
    zoom: 15,
    center: position,
    mapTypeControl: false,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }

  map = new google.maps.Map(document.getElementById("map"), myOptions);
  bounds = new google.maps.LatLngBounds();

  // This event listener will call addMarker() when the map is clicked.  
  map.addListener('click', function(event) {
    addMarker(event.latLng);
  });
}


// Adds a circle to the position of the marker. 
function addCircle() {
  circle = new google.maps.Polygon({
    paths: [drawCircle(new google.maps.LatLng(position), 0.1, 1)],
    strokeColor: "#0000FF",
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: "white",
    fillOpacity: 0.15
  });
  circle.setMap(map);
}

// Delete the circle 
function deleteCircle() {
  if (circle && circle.setMap)
    circle.setMap(null);
}


// Adds a marker to the map and push to the array.  
function addMarker(location) {
  deleteMarkers();
  deleteCircle(); //LIKE THE MARKERS, THE CIRCLES SHOULD BE DELETED HERE

  var marker = new google.maps.Marker({
    position: location,
    map: map,
    draggable: true
  });
  markers.push(marker);
  window.position = markers[0].position;

  addCircle();
}

// Sets the map on all markers in the array.  
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.  
function clearMarkers() {
  setMapOnAll(null);
}

// Deletes all markers in the array by removing references to them.  
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 64;

  // find the radius in lat/lon 
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  if (dir == 1) {
    var start = 0;
    var end = points + 1
  } // one extra here makes sure we connect the
  else {
    var start = points + 1;
    var end = 0
  }
  for (var i = start;
    (dir == 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 80%;
  width: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDCA7_eY2neZvNFOM8jhvjeTpuRS1-HkDU"></script>
  <script src="ol3gm.js"></script>
  <script src="math.js"></script>
  <title>Example</title>
</head>

<body onload="initialize()">
  <div id="map" class="map"></div>
  <br>
  <input onclick="deleteMarkers();" type=button value="Delete Markers">
  <input onclick="deleteCircle();" type=button value="Delete Circle">

</body>

</html>

创建新多边形时删除多边形

Delete Polygon when creating a new one

javascript

google-maps-api-3

jsfiddle