200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html地图无法点击 无法触发谷歌地图标记点击事件从HTML按钮

html地图无法点击 无法触发谷歌地图标记点击事件从HTML按钮

时间:2021-08-31 08:12:58

相关推荐

html地图无法点击 无法触发谷歌地图标记点击事件从HTML按钮

我尝试创建一个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 %}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。