Google 地图多边形 - 添加新点后重绘

Question

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

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

    poligon.setMap(null);

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

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

我是 Google 地图的新手 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 = [];
}

和地图属性到您现有的多边形。

工作代码片段：

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>

Google 地图多边形 - 添加新点后重绘

Google Maps Polygon - redraw after adding new points

javascript

google-maps