我尝试创建一个HTML按钮,可以触发谷歌地图上的标记的点击事件,所以每当我点击按钮,地图将自动放大到标记和显示infowindow。这里是我的代码无法触发谷歌地图标记点击事件从HTML按钮
Semua
Ayam
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);
Coba1 Click Me!
coba2 Click Me!
该地图工程几乎完美;无论何时我手动点击地图上的标记,它们都会按预期行事。但是,当我点击按钮“科巴1”和“coba2”时,他们什么都不做。此外,任何建议使我的代码更优雅(我不熟悉网络编程)。
编辑 这是我的工作与实现Jinja2的:
Semua
Ayam
{% 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);
{% for m in maps %}
{{ m.name }} Click Me!
{% endfor %}