Yog*_*ani 27 google-maps google-maps-api-3
只是一个努力学习的菜鸟,我出现了一个问题,当我尝试用click事件创建标记时,拖动和dragend事件监听器将无法工作.而在默认情况下创建这些工作.
这是我到目前为止所尝试的.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Default Marker',
draggable:true
});
google.maps.event.addListener(map,'click',function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Click Generated Marker',
draggable:true
});
}
);
google.maps.event.addListener(
marker,
'drag',
function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
//alert('drag');
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
alert('Drag end');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
</body></html>
dun*_*can 57
你可能想要做的是改变你的事件侦听器的参考,从这个到事件本身.
然后,您需要在创建新标记的同时为其添加单独的事件侦听器.我建议只使用一个函数来获取latlng,title和你需要的任何其他东西的输入参数.然后它创建标记和所需的任何事件监听器.
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}
function handleEvent(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
}
小智 8
var marker = new google.maps.Marker({
position: latlng,
map: map,
zoom:25,
title: title,
draggable:true,
});
var infowindow = new google.maps.InfoWindow({
content: info
});
infowindow.open(map,marker);
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
});
infowindow.open(map,marker);
});
google.maps.event.addListener(marker,'dragend',function(event)
{
document.getElementById('lat').value =event.latLng.lat();
document.getElementById('lng').value =event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
});
infowindow.open(map,marker);
});
| 归档时间： |
|
| 查看次数： |
86456 次 |
| 最近记录： |