我正在尝试根据点击不同的地址来加载不同的 Google map 实例。事件监听器很有用,但问题是标记未加载。这是我的代码。我想要为每个地址 onclick 事件加载标记。
<div style="float:left;width:100%;">
<div style="float:left;">
<h2>Locations</h2>
<ul class="menu">
<li onclick="loadMap('43.6581859','-79.3906945');">
<a href="#">Category 1</a></li>
<li onclick="loadMap('43.658589','-79.3872499');">
<a href="#">Category 2</a></li>
<li onclick="loadMap('43.6533033','-79.4058543');">
<a href="#">Category 3</a></li>
</div>
<div style="float:left; width: 20px;"> </div>
<div style="width:400px;height:450px; overflow:hidden;"><h2>Map</h2>
<div id="map_canvas" style="height:400px;"></div>
</div>
</div>
<!--Load Map Script -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var home;
var markersArray = [];
function initialize() {
home = new google.maps.LatLng('43.659924','-79.38875');
var opts = {
zoom: 15,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), opts);
google.maps.event.addListener(map, "click", function(event) {
showMarker(event.latLng);
});
}
function loadMap(lat,lng)
{
var location= new google.maps.LatLng(lat, lng);
map.setCenter(location);
}
function showMarker(location) {
deleteOverlays();
var marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i=0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
markersArray.length = 0;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
非常感谢任何帮助!
最佳答案
如果你想在地址选择后显示标记,你应该在 loadMap 中移动 showMarker(location)。
function loadMap(lat,lng)
{
var location= new google.maps.LatLng(lat, lng);
map.setCenter(location);
showMarker(location);
}
我还建议从 <li>
移动 'onclick' 事件元素到内部 <a>
元素。
这将避免意外点击。
<li><a onclick="loadMap('43.6581859','-79.3906945');" href="#">Category 1</a></li>
<li><a onclick="loadMap('43.658589','-79.3872499');" href="#">Category 2</a></li>
<li><a onclick="loadMap('43.6533033','-79.4058543');" href="#">Category 3</a></li>
另外我要注意,你的deleteOverlays()
功能无法正常工作,因为在您的示例中您调用了
markersArray[i].setMap(map);
代替
markersArray[i].setMap(null);
我觉得应该更好:)
我创建了工作 JSFiddle为您提供您的代码。
关于javascript - 在点击事件上加载谷歌地图 API,标记不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25894518/