谷歌地图多边形 - 添加新点后重新绘制
Google Maps Polygon - redraw after adding new points
我有一个脚本，我需要能够画一个多边形。这是当前脚本。
当我添加新点时，将在旧点上绘制一个新的多边形，而不是在添加新点的情况下重新绘制当前多边形。我试图添加
poligon.setMap(null);
在创建新的 poligon 之前，会创建新的 poligon，但随后多边形根本不会出现。
谁能告诉我我做错了什么？
我是谷歌地图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>您的问题是您永远不会清除坐标数组，因此每次添加新多边形时，您都会在其中获得另一组重复的坐标。
改变：
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>相关文章：
- 使用新参数通过服务器端处理重新绘制引导数据表
- 在新窗口中打开时，未在画布中绘制图像
- 在新框架上绘制图像，同时仍然使用P5.js中的利萨茹曲线
- 将许多新图像绘制到画布时内存泄漏
- 有没有一种好方法可以添加新框并使用 javascript 重新绘制画布
- 谷歌地图多边形 - 添加新点后重新绘制
- 需要使用新数据重新绘制地图(与CartoDB.js结合使用）
- 使用单击功能绘制新的动态JS多边形
- HTML5 画布 - 使用剪辑擦除新圆圈后重新绘制新圆圈
- 使用数据表(Meteor Tabular）在新行中绘制数组的每个元素
- 将json中的数据合并到一个新的数组中，并使用d3.js绘制形状
- 如何加载新图像并将其绘制到画布上
- 使用阶梯将绘制的形状移动到新的Y
- 单击按钮打开一个新窗口，并用D3绘制多个大圆
- 谷歌地图v3方向渲染器重新绘制响应
- 删除以前的路线，并绘制一个新的路线
- 画布-只绘制时，悬停在新的瓷砖，而不是整个画布
- 如何将前一个函数的结果绘制到JavaScript中的新函数中
- 如何绘制画布到新的html页面
- 绘制新形状时删除DrawingManager形状
