我有一个脚本,我需要能够绘制一个poligon。 这是current script。
当我添加一个新点时,会在旧点上绘制一个新的poligon,而不是在添加新点的情况下重绘当前多边形。 我试着添加
poligon.setMap(null);
创建新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);
&#13;
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;
}
&#13;
<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>
&#13;
答案 0 :(得分:1)
您的问题是您永远不会清除coords数组,因此每次添加新的多边形时,都会在其中获得另一组重复的坐标。
变化:
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);
&#13;
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;
}
&#13;
<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>
&#13;