无法通过html按钮触发Google Maps标记单击事件

哈利马基布

我尝试创建一个HTML按钮,该按钮可以在Google地图中的标记上触发点击事件,因此,每当我单击该按钮时,地图都会自动放大到标记并显示信息窗口。这是我的代码

<!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”按钮时,它们什么也不做。另外,欢迎提出任何使我的代码更优雅的建议(我对Web编程不熟悉)。

编辑这是我使用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>
一世

这是更正的代码...

演示版

<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>
var Coba1center = new google.maps.LatLng(-7.79793,110.36933);
var Coba1marker = new google.maps.Marker({
    position:Coba1center,
    });

var coba2center = new google.maps.LatLng(-7.78793,110.36933);
var coba2marker = new google.maps.Marker({
    position:coba2center,
    });

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);


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);

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){
    var gMarker = null;
    var center = null;
    console.log(marker);
    if(marker === 'Coba1marker') {
        gMarker = Coba1marker;
        center = Coba1center;
    }
    else if(marker === 'coba2marker') {
        gMarker = coba2marker;
        center = coba2center;
    }

    console.log(gMarker);
    console.log(center);
    google.maps.event.trigger(gMarker, 'click', {
        latLng: center
    });
}
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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击其他时更改Google Maps标记图标

来自分类Dev

Google Maps-单击按钮时触发搜索框

来自分类Dev

按钮单击事件未触发

来自分类Dev

Android:自定义工具提示Google Maps中的按钮单击事件

来自分类Dev

(angularjs-google-maps)ng在标记内单击

来自分类Dev

标记拖动点击事件Google Maps

来自分类Dev

Google Maps API标记点击事件未触发

来自分类Dev

通过使用jQuery单击按钮和单独的JS文件来触发Google Map Marker上的click事件

来自分类Dev

适用于Google Maps v3的RichMarker-单击通过标记

来自分类Dev

Google Maps API v3-单击标记时如何“提示”标记ID

来自分类Dev

标记的angular2-google-maps点击事件

来自分类Dev

HTML按钮无法触发与Document.clear同名的事件功能

来自分类Dev

Asp.Net无法触发按钮单击事件

来自分类Dev

无法通过html按钮触发Google Maps标记单击事件

来自分类Dev

Google Maps信息窗口不适用于标记单击

来自分类Dev

单击标记时打开URL(Google Maps Android)

来自分类Dev

标记拖动事件Google Maps API V3

来自分类Dev

按钮单击事件未触发

来自分类Dev

骨干Js-无法触发按钮单击事件

来自分类Dev

在标记Google Maps v3上添加onclick事件

来自分类Dev

可以通过单击html unredered列表上的项目标记来触发事件吗?

来自分类Dev

用于Google Maps v3的RichMarker-单击通过标记

来自分类Dev

Google Maps API v3-单击标记时如何“提示”标记ID

来自分类Dev

将Google Maps API标记限制为每个标记只能单击一次

来自分类Dev

使Google Maps标记数组全局中断标记click事件

来自分类Dev

单击标记时,新按钮会自动显示在Google Maps(Android)上?如何删除?

来自分类Dev

Google Maps Markers事件侦听器单击

来自分类Dev

Google Maps标记事件点击问题

来自分类Dev

单击事件触发而无需单击按钮

Related 相关文章

  1. 1

    单击其他时更改Google Maps标记图标

  2. 2

    Google Maps-单击按钮时触发搜索框

  3. 3

    按钮单击事件未触发

  4. 4

    Android:自定义工具提示Google Maps中的按钮单击事件

  5. 5

    (angularjs-google-maps)ng在标记内单击

  6. 6

    标记拖动点击事件Google Maps

  7. 7

    Google Maps API标记点击事件未触发

  8. 8

    通过使用jQuery单击按钮和单独的JS文件来触发Google Map Marker上的click事件

  9. 9

    适用于Google Maps v3的RichMarker-单击通过标记

  10. 10

    Google Maps API v3-单击标记时如何“提示”标记ID

  11. 11

    标记的angular2-google-maps点击事件

  12. 12

    HTML按钮无法触发与Document.clear同名的事件功能

  13. 13

    Asp.Net无法触发按钮单击事件

  14. 14

    无法通过html按钮触发Google Maps标记单击事件

  15. 15

    Google Maps信息窗口不适用于标记单击

  16. 16

    单击标记时打开URL(Google Maps Android)

  17. 17

    标记拖动事件Google Maps API V3

  18. 18

    按钮单击事件未触发

  19. 19

    骨干Js-无法触发按钮单击事件

  20. 20

    在标记Google Maps v3上添加onclick事件

  21. 21

    可以通过单击html unredered列表上的项目标记来触发事件吗?

  22. 22

    用于Google Maps v3的RichMarker-单击通过标记

  23. 23

    Google Maps API v3-单击标记时如何“提示”标记ID

  24. 24

    将Google Maps API标记限制为每个标记只能单击一次

  25. 25

    使Google Maps标记数组全局中断标记click事件

  26. 26

    单击标记时,新按钮会自动显示在Google Maps(Android)上?如何删除?

  27. 27

    Google Maps Markers事件侦听器单击

  28. 28

    Google Maps标记事件点击问题

  29. 29

    单击事件触发而无需单击按钮

热门标签

归档