我嘗試創建一個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 %}

總結

以上是生活随笔為你收集整理的html地图无法点击,无法触发谷歌地图标记点击事件从HTML按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。