Question

我试图通过简单的按钮点击初始化地图加载，但没有运气。此外，javascript控制台中不会抛出任何错误。

如果我将其更改为var showMap = $('#show-map'); function initialize() { var mapOptions = { center: { lat: 0, lng: 0 }, zoom: 8 }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(showMap, 'click', initialize);，则可以正常使用。

#map-canvas {
  height: 30em;
  width: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>

<button id="show-map">Show Map</button>

<div id="map-canvas"></div>

Method[validateOnOrAfter]

Answer 1

不使用android:name处理程序作为按钮，而是使用jQuery事件侦听器。即使可以为其余的DOM使用Google地图事件处理程序，但最好还是使用jQuery。另外，我认为SebastiánRojas对使用google.maps.event提出了很好的建议。

这是Fiddle。与原始代码的唯一变化是：

window.onload

此代码会一直等到加载$(document).ready(function(){ $('#show-map').on('click',initialize) });，然后它会将事件监听器分配给按钮（document），以便在单击它时执行#show-map。

Answer 2

您无法替换初始化事件，因为加载窗口和Google Maps API也很重要。所以，相反，将dom监听器保留为文档建议，当事件被触发时，将事件监听器附加到按钮单击以显示地图

＆＃13;

function initialize() {

    //Add the event listener after Google Mpas and window is loaded
    $('#show-map').click(function () {
         var mapOptions = {
	    center: { lat: 0, lng: 0 },
	    zoom: 8
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map-canvas {
  height: 30em;
  width: 30em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>

<button id="show-map">Show Map</button>

<div id="map-canvas"></div>

＆＃13;

Answer 3

作为快速解决方案，这将有效：

var map = document.getElementById('show-map')
google.maps.event.addDomListener(map, 'click', initialize);

谷歌地图api加载地图按钮单击

3 个答案: