【发布时间】：2014-01-08 22:17:19
【问题描述】：
我尝试创建一个 HTML 按钮，该按钮可以在谷歌地图中的标记上触发点击事件，因此每当我单击该按钮时，地图都会自动放大到标记并显示信息窗口。这是我的代码
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-XFi-PrFDZgDYRRD3PDtY4-xcRt6lkA&sensor=false">
</script>
</head>
<body>
<form method = "post">
<button name="semua" type="submit" value="">Semua</button>
<button name="makanan" type="submit" value="Ayam">Ayam</button>
</form>
<script>
function initialize()
{
var mapCenter = new google.maps.LatLng(-7.79793, 110.36933);
var infowindow = null;
var mapProp = {
center:mapCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var Coba1center = new google.maps.LatLng(-7.79793,110.36933);
var Coba1marker = new google.maps.Marker({
position:Coba1center,
});
google.maps.event.addListener(Coba1marker,'click',function() {
map.setZoom(15);
map.setCenter(Coba1marker.getPosition());
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
infowindow.setContent("Coba1")
infowindow.open(map,Coba1marker);
});
Coba1marker.setMap(map);
function showMarker(marker){
google.maps.event.trigger(marker, 'click');
}
var coba2center = new google.maps.LatLng(-7.78793,110.36933);
var coba2marker = new google.maps.Marker({
position:coba2center,
});
google.maps.event.addListener(coba2marker,'click',function() {
map.setZoom(15);
map.setCenter(coba2marker.getPosition());
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
infowindow.setContent("itu")
infowindow.open(map,coba2marker);
});
coba2marker.setMap(map);
}
function showMarker(marker){
google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Coba1 <button type="button" onclick="showMarker(Coba1marker)">Click Me!</button> <br>
coba2 <button type="button" onclick="showMarker(coba2marker)">Click Me!</button> <br>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
地图几乎可以完美运行；每当我手动单击地图上的标记时，它们都会按预期运行。但是，当我单击“Coba 1”和“coba2”按钮时，它们什么也不做。此外，欢迎任何使我的代码更优雅的建议（我不熟悉网络编程）。
编辑 这是我使用 Jinja2 的工作实现：
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-XFi-PrFDZgDYRRD3PDtY4-xcRt6lkA&sensor=false">
</script>
</head>
<body>
<form method = "post">
<button name="semua" type="submit" value="">Semua</button>
<button name="makanan" type="submit" value="Ayam">Ayam</button>
</form>
<script>
{% for m in maps %}
var {{ m.name }}{{ 'center' }} = new google.maps.LatLng({{m.latlon}});
var {{ m.name }}{{ 'marker' }} = new google.maps.Marker({
position:{{ m.name }}{{ 'center' }},
});
{% endfor %}
function initialize()
{
var mapCenter = new google.maps.LatLng(-7.79793, 110.36933);
var infowindow = null;
var mapProp = {
center:mapCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
function setMarker(marker){
map.setZoom(15);
map.setCenter(marker.getPosition());
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
}
{% for m in maps %}
google.maps.event.addListener({{ m.name }}{{ 'marker' }},'click',function() {
setMarker({{ m.name }}{{ 'marker' }});
infowindow.setContent("{{ m.desc }}");
infowindow.open(map,{{ m.name }}{{ 'marker' }});
});
{{ m.name }}{{ 'marker' }}.setMap(map);
{% endfor %}
}
function showMarker(marker){
google.maps.event.trigger(marker, 'click')
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
{% for m in maps %}
{{ m.name }} <button type="button" onclick="showMarker({{ m.name }}{{ 'marker' }})">Click Me!</button> <br>
{% endfor %}
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
【问题讨论】：
标签： javascript html google-maps google-maps-api-3