-1
Googleマップで図形を描くためにポリラインを使用しました。 Googleマップ上でドラッグしている間、描画された図形内に線を描画し、すべてのマーカー位置のlatとlangを取得する必要があります。私は次のコードを使用してこれらの機能を達成するために使用しました。Googleマップでドラッグしてポリラインを描く方法
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);
マーカーを正しく配置しています。しかし、私はポリラインの形状を完成した後も問題に直面しています。それは、地図上をクリックするとさらに線を広げます。一度私はdrawManagerを使用せずに描画モードをfalseに設定する方法をGoogleマップ上の図形を描きました。リセットマップをクリックするまでは、マップ上に1つの図形だけを描画する必要があります。
私はこれを防ぐために、ポリラインをさらに伸ばしてください。描画マネージャーなしでこれを達成する方法。