【发布时间】：2017-03-09 19:03:26
【问题描述】：
我使用折线在谷歌地图上绘制形状。在谷歌地图上拖动时，应该绘制线条，在绘制的形状内需要获取所有标记位置的纬度和纬度。我已经使用以下代码来实现这些功能。
function disable(){
map.setOptions({
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: false
});
}
function enable(){
map.setOptions({
draggable: true,
zoomControl: true,
scrollwheel: true,
disableDoubleClickZoom: true
});
}
function initialize() {
var polygon,path,marker, i,poly;
var markers = [], selected = [];
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(13.060874081343613,80.24474027142173),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var locations = [['Bondi Beach', 13.014047884121025, 80.22414090618736, 1],['Coogee Beach', 13.002005430858949, 80.22139432415611, 2],['Cronulla Beach', 13.011371833931621, 80.25435330853111, 3],['Manly Beach', 12.99397680394788, 80.23238065228111, 4],['Maroubra Beach', 13.006019646912229, 80.25023343548423, 5]];
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
marker.set("id",locations[i][3]);
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//draw
$("#draw a").click(function(e) {
e.preventDefault();
disable()
//Reset map
if(polygon){
polygon.setMap(null);
selected = [];
}
google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
polygon=new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move=google.maps.event.addListener(map,'mousemove',function(e){
polygon.getPath().push(e.latLng);
});
poly = polygon.getPath();
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path=polygon.getPath();
polygon.setMap(null);
polygon=new google.maps.Polygon({map:map,path:path});
google.maps.event.clearListeners(map.getDiv(), 'mousedown');
enable()
});
});
});
function addPolyPoints(e) {
poly.push(e.latLng);
var markerCnt = 0;var sel = [];
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) {
sel={'hotel_id' : markers[i].get("id"), 'lat':markers[i].position.lat(),'lng':markers[i].position.lng()};
selected.push(sel);
markerCnt++;
}
}
if(selected){
console.log(selected);
$.each(selected, function (i, field) {
});
}
document.getElementById('info').innerHTML = "markers in polygon: " + markerCnt;
}
google.maps.event.addListener(map, 'click', addPolyPoints);
}
google.maps.event.addDomListener(window, 'load', initialize);
使用上面的代码，我得到了正确的标记位置。但是我在完成折线形状后也遇到了问题，它在点击地图时会进一步延伸线，它不应该像这样。一旦我在谷歌地图上绘制了形状，如何在不使用绘图管理器的情况下将绘图模式设置为 false。在我单击重置地图之前，我只需要在地图上绘制一个形状。
请任何人帮助我防止这种情况，进一步延伸折线。如何在没有绘图管理器的情况下实现这一点。
【问题讨论】：
标签： javascript jquery google-maps google-maps-api-3