我有两个功能可以在Google地图中绘制多边形。但是,当您绘制第一个多边形,然后选择按钮以绘制第二个多边形时,它们将被绘制。他们开始重叠。在这里查看我的JSFiddle:http://jsfiddle.net/ECssN/1
以下是我用来绘制多边形的内容(来自Google Maps API文档):
function polygon1() {
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: "#F390F9",
editable: true,
draggable: true
};
poly = new google.maps.Polygon(polyOptions);
poly.setMap(map);
google.maps.event.addListener(map, 'click', addPolygon1);
}
function addPolygon1(event) {
var path = poly.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
});
}
当用户点击按钮绘制第二个多边形时,如何取消选择第一个多边形,反之亦然?
jQuery .unbind
或.removeAttr
是一个很好的方法吗?不知道如何继续。
感谢您的帮助。
答案 0 :(得分:2)
您必须将句柄保存到事件侦听器(对于第一个多边形按钮),然后在开始绘制第二个多边形时将其清除。请参阅example at jsfiddle。
handle01 = google.maps.event.addListener(map, 'click', addPolygon1);
...
function polygon2() {
google.maps.event.removeListener(handle01);
var polyOptions = {
...
您可以对第二个多边形执行相同操作。
答案 1 :(得分:0)
最好的方法是将每个多边形存储到一个数组中,或者在您的情况下存储一个全局变量(您似乎将其作为poly
)。在设置之前检查是否存在多边形,如果存在,则在设置新地图之前取消设置地图。
function polygon1() {
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: "#F390F9",
editable: true,
draggable: true
};
if( poly ) // <-----
poly.setMap(null); // <-----
poly = new google.maps.Polygon(polyOptions);
poly.setMap(map);
google.maps.event.addListener(map, 'click', addPolygon1);
}
function addPolygon1(event) {
var path = poly.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
});
}