javascript - Google map 多边形 - 添加新点后重绘

Question

我有一个脚本，我需要能够在其中绘制一个多边形。这是current script .

当我添加新点时，会在旧多边形上绘制一个新多边形，而不是使用添加的新点重新绘制当前多边形。我尝试添加

    poligon.setMap(null);   

在创建之前创建了新的多边形，但之后多边形根本不会出现。

谁能告诉我我做错了什么？

我是 Google map API 的新手，所以请保持温柔。

非常感谢您的帮助。

代码片段:

var coords = [];
var poligonCoords = [];
var map = null;
var poligon = null;

function getMinX(a) {
  var ar = [];
  for (i = 0; i < a.length; i++) {
    ar.push(a[i].x);
  }
  return Math.min.apply(Math, ar);
}

function getMaxX(a) {
  var ar = [];
  for (i = 0; i < a.length; i++) {
    ar.push(a[i].x);
  }
  return Math.max.apply(Math, ar);
}

function getMinY(a) {
  var ar = [];
  for (i = 0; i < a.length; i++) {
    ar.push(a[i].y);
  }
  return Math.min.apply(Math, ar);
}

function getMaxY(a) {
  var ar = [];
  for (i = 0; i < a.length; i++) {
    ar.push(a[i].y);
  }
  return Math.max.apply(Math, ar);
}

function getCoords() {
  jQuery('ul#coords li').each(function() {
    var x = jQuery(this).children('input:first-child').val();
    var y = jQuery(this).children('input:last-child').val();
    coords[coords.length] = {
      "x": x,
      "y": y
    };
  });
}

function setPoligon() {
  if (!poligon) {}
  for (i = 0; i < coords.length; i++) {
    var point = new google.maps.LatLng(coords[i].x, coords[i].y);
    poligonCoords.push(point);
  }
  poligon = new google.maps.Polygon({
    paths: poligonCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  poligon.setMap(map);
}

function initialize() {

  getCoords();

  var minX = getMinX(coords);
  var minY = getMinY(coords);

  var maxX = getMaxX(coords);
  var maxY = getMaxY(coords);

  centerX = minX + ((maxX - minX) / 2);
  centerY = minY + ((maxY - minY) / 2);
  if (!centerX || !centerY) {
    centerX = 46.361416;
    centerY = 25.802191;
  }
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(centerX, centerY),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    scaleControl: true,
    streetViewControl: true
  };


  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  setPoligon();

  google.maps.event.addListener(map, 'dblclick', function(event) {
    var ev = event.latLng;
    document.getElementById("latLong").innerHTML = "" + ev.lat().toFixed(6) + ", " + ev.lng().toFixed(6) + "";
    jQuery("ul#coords").append(jQuery("ul#coords li:first-child").clone());
    jQuery("ul#coords li:last-child").children('input:first-child').val(ev.lat().toFixed(6));
    jQuery("ul#coords li:last-child").children('input:last-child').val(ev.lng().toFixed(6));
    getCoords();
    setPoligon();
  });

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

      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        position: relative;
      }
      #map-canvas {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 20%;
      }
      #info {
        margin: 0px;
        padding: 1em;
        box-sizing: content-box;
        position: absolute;
        top: 80%;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ececec;
        border-top: 1px solid #cccccc;
        box-shadow: 0 0 .5em #636363;
        overflow: auto;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
<div id='info'>
  <div class='row'>
    <ul id='coords'>
      <li>X:
        <input type='text' name='coords[][x]' value='46.216917'>Y:
        <input type='text' name='coords[][y]' value='25.728241'>
      </li>
      <li>X:
        <input type='text' name='coords[][x]' value='46.214539'>Y:
        <input type='text' name='coords[][y]' value='25.729388'>
      </li>
      <li>X:
        <input type='text' name='coords[][x]' value='46.211428'>Y:
        <input type='text' name='coords[][y]' value='25.730610'>
      </li>
      <li>X:
        <input type='text' name='coords[][x]' value='46.209813'>Y:
        <input type='text' name='coords[][y]' value='25.725277'>
      </li>
      <li>X:
        <input type='text' name='coords[][x]' value='46.209296'>Y:
        <input type='text' name='coords[][y]' value='25.717523'>
      </li>
      <li>X:
        <input type='text' name='coords[][x]' value='46.213830'>Y:
        <input type='text' name='coords[][y]' value='25.722928'>
      </li>
    </ul>
  </div>
  Info: <span id='latLong'></span>
</div>

Answer 1

您的问题是您永远不会清除坐标数组，因此每次添加新的多边形时，您都会在其中得到另一组重复的坐标。

更改:

function getCoords(){
    jQuery('ul#coords li').each(function(){
        var x = jQuery(this).children('input:first-child').val();
        var y = jQuery(this).children('input:last-child').val();
        coords[coords.length] = { "x":x, "y":y };
    });
}

致:

function getCoords(){
    coords = [];
    jQuery('ul#coords li').each(function(){
        var x = jQuery(this).children('input:first-child').val();
        var y = jQuery(this).children('input:last-child').val();
        coords[coords.length] = { "x":x, "y":y };
    });
}

添加:

if(!!poligon && !!poligon.setMap){
    poligon.setMap(null);
    poligonCoords = [];
}

以及现有多边形的 map 属性。

工作代码片段:

var coords=[];
var poligonCoords = [];
var map = null;
var poligon = null;

function getMinX(a) {
	var ar = [];
	for(i=0;i<a.length;i++) {
		ar.push(a[i].x);
	}
    return Math.min.apply(Math,ar);
}

function getMaxX(a){
	var ar = [];
	for(i=0;i<a.length;i++) {
		ar.push(a[i].x);
	}
    return Math.max.apply(Math,ar);
}

function getMinY(a) {
	var ar = [];
	for(i=0;i<a.length;i++) {
		ar.push(a[i].y);
	}
    return Math.min.apply(Math,ar);
}

function getMaxY(a){
	var ar = [];
	for(i=0;i<a.length;i++) {
		ar.push(a[i].y);
	}
    return Math.max.apply(Math,ar);
}

function getCoords(){
    coords = [];
	jQuery('ul#coords li').each(function(){
		var x = jQuery(this).children('input:first-child').val();
		var y = jQuery(this).children('input:last-child').val();
		coords[coords.length] = { "x":x, "y":y };
	});
}

function setPoligon(){
	if(!!poligon && !!poligon.setMap){
        poligon.setMap(null);
        poligonCoords = [];
	}
	for(i=0;i< coords.length;i++){
		var point = new google.maps.LatLng( coords[i].x, coords[i].y );
		poligonCoords.push(point);
        var marker = new google.maps.Marker({position:point,map:map,title:"marker "+i});
	}
	poligon = new google.maps.Polygon({
        map:map,
	    paths: poligonCoords,
	    strokeColor: '#FF0000',
	    strokeOpacity: 0.8,
	    strokeWeight: 3,
	    fillColor: '#FF0000',
	    fillOpacity: 0.35
	});
	
	poligon.setMap(map);	
}

function initialize() {

	getCoords();	

	var minX = getMinX(coords);
	var minY = getMinY(coords);
	
	var maxX = getMaxX(coords);
	var maxY = getMaxY(coords);
	
	centerX =  minX + ((maxX - minX) / 2);
	centerY = minY + ((maxY - minY) / 2);
	if(!centerX || !centerY){
		centerX = 46.361416; centerY = 25.802191;
	}
	var mapOptions = {
	    zoom: 16,
	    center: new google.maps.LatLng(centerX, centerY),
	    mapTypeId: google.maps.MapTypeId.SATELLITE,
	    scaleControl: true,
	    streetViewControl: true
	};


	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	setPoligon();
	  
	google.maps.event.addListener(map, 'dblclick', function(event) {
		var ev = event.latLng;
	    document.getElementById("latLong").innerHTML = "" + ev.lat().toFixed(6) + ", " +ev.lng().toFixed(6)+ "";
	    jQuery("ul#coords").append(jQuery("ul#coords li:first-child").clone());
	    jQuery("ul#coords li:last-child").children('input:first-child').val(ev.lat().toFixed(6));
	    jQuery("ul#coords li:last-child").children('input:last-child').val(ev.lng().toFixed(6));
	    getCoords();
	    setPoligon();
	});
	
}
google.maps.event.addDomListener(window, 'load', initialize);

      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        position: relative;
      }
      #map-canvas {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 20%;
      }
      #info {
        margin: 0px;
        padding: 1em;
        box-sizing: content-box;
        position: absolute;
        top: 80%;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ececec;
        border-top: 1px solid #cccccc;
        box-shadow: 0 0 .5em #636363;
        overflow: auto;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
    <div id='info'>
    	<div class='row'>
    		<ul id='coords'>
			    <li>X: <input type='text' name='coords[][x]' value='46.216917'> Y:<input type='text' name='coords[][y]' value='25.728241'></li>
			    <li>X: <input type='text' name='coords[][x]' value='46.214539'> Y:<input type='text' name='coords[][y]' value='25.729388'></li>
			    <li>X: <input type='text' name='coords[][x]' value='46.211428'> Y:<input type='text' name='coords[][y]' value='25.730610'></li>
			    <li>X: <input type='text' name='coords[][x]' value='46.209813'> Y:<input type='text' name='coords[][y]' value='25.725277'></li>
			    <li>X: <input type='text' name='coords[][x]' value='46.209296'> Y:<input type='text' name='coords[][y]' value='25.717523'></li>
			    <li>X: <input type='text' name='coords[][x]' value='46.213830'> Y:<input type='text' name='coords[][y]' value='25.722928'></li>
		    </ul>
    	</div>
    	Info: <span id='latLong'></span>
</div>