在使用Google Maps方法之前先对其进行定义 [英] Define Google Maps before using its methods
问题描述
我正在关注google maps api文档: https://developers.google.com/maps/documentation/javascript/customoverlays
I am following the google maps api documentation: https://developers.google.com/maps/documentation/javascript/customoverlays
在其init方法之前，定义USGSOverlay，它是google.maps.OverlayView()的原型.
The define the USGSOverlay, which is a prototype of google.maps.OverlayView(), before their init method.
我有一个单独的html文件和一个单独的javascript文件(Map.js)，在这里我为地图调用了init方法.
I have a separate html file and separate javascript file (Map.js), where I call the init method for the map.
<div id="googleMap"></div>
<script src="Map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<YOURKEY>&callback=init"></script>
但是，这引发了一个错误，即google.maps.OverlayView()中未定义google.
However, this throws an error that google is not defined in google.maps.OverlayView().
我知道我必须在Map.js之前定义maps.googleapis.com，但是如果这样做，则由于在Map.js文件中，因此未定义回调函数.
I know that I have to define my maps.googleapis.com before my Map.js, but if I do that, then the callback function is not defined since it is in the Map.js file.
如何通过将html代码和javascript代码保存在不同的文件中来实现这一目标?
How can I achieve this by keeping the html code and javascript code in different files?
因此，我按照此处链接中的文档进行了异步延迟: https://developers.google.com/maps/documentation/javascript/tutorial#sync
So I followed the documentation in the link here for async defer: https://developers.google.com/maps/documentation/javascript/tutorial#sync
但是我仍然遇到错误.
我的html代码是:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<style>
#map {
height: 50%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>
</body>
</html>
我在map.js中的javascript代码是:
And my javascript code in map.js is:
var map;
CustomImageOverly.prototype = new google.maps.OverlayView();
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
function CustomImageOverly(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
它可以正确显示地图，但是对于覆盖图，它仍然会引发错误:未定义google.有什么我想念的吗?
It displays the map correctly, but for the overlay, it still throws the error: google is not defined. Is there something I am missing?
推荐答案
If you look at the example, they are not loading the API asynchronously (with "async defer" and callback function), they are loading it synchronously.
要更改您的API，请执行以下操作:
To do that change your API include from:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>
收件人:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
然后在DOM(和API)完成加载时使用以下方法初始化地图:
Then initialize the map when the DOM (and the API) has finished loading with:
google.maps.event.addDomListener(window, 'load', initMap);
var map;
CustomImageOverly.prototype = new google.maps.OverlayView();
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new CustomImageOverly(bounds, srcImage, map);
}
function CustomImageOverly(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);html,
body,
#map {
height: 100%;
width: 100% margin: 0;
padding: 0;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>这篇关于在使用Google Maps方法之前先对其进行定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
