Question

我尝试创建一个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”按钮时，它们什么都不做。此外，欢迎任何使我的代码更优雅的建议（我不熟悉网络编程）。

EDIT 这是我使用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>

Answer 1

这是更正后的代码......

Demo

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

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

1 个答案: