我创建了一个 Google 地图表单,允许用户在文本字段中输入地址并对条目进行地理编码。然后这会在地图上放置一个标记。这工作正常,但我想添加一个额外的 addListener,这样当用户单击地图时,它将在他们单击的位置添加另一个图钉。由于某种原因,我的“点击”addListener 不起作用。我如何拥有多个这样的添加监听器?
我附上我当前的代码:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.7,-74.0),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var marker = new google.maps.Marker({
map: map,
draggable: true
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
var image = "http://www.google.com/mapfiles/marker_green.png";
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')
].join(' ');
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, 'click', function() {
//alert("Hello! I am an alert box!!");
var marker1 = new google.maps.Marker({
map: map,
draggable: true
});
var image = "http://www.google.com/mapfiles/marker_green.png";
marker1.setIcon(image);
marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
map.addOverlay(marker1);
});
</script>
地图点击事件将返回鼠标点击的位置。
更新:要在添加新标记时删除旧标记,您需要在侦听器范围之外存储标记的实例,然后您可以在侦听器事件开始时删除它。
var singleMarker;
google.maps.event.addListener(map, 'click', function(event) {
//if marker exists, erase marker
if(singleMarker){
singleMarker.setMap(null);
}
singleMarker = new google.maps.Marker({
position: event.latLng, //mouse click position
map: map,
draggable: true,
icon: "http://www.google.com/mapfiles/marker_green.png"
});
});
Updated 小提琴的例子。 http://jsfiddle.net/sk5EQ/1
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)