在GoogleMaps API上运行来自Google文档的代码时,出现此错误:https://developers.google.com/maps/documentation/javascript/customoverlays
我正在尝试遵循编写的内容,这是我的代码:
var overlay;
CustomImageOverly.prototype = new google.maps.OverlayView();
function init() {
var pos= {lat: 62.323907, lng: -150.109291};
var mapProp= {
center:new google.maps.LatLng(pos),
zoom:4,
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: [{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#3498DB'},
{visibility: 'on'}]
}]
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
debugger;
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);
}
我在做什么错了?
答案 0 :(得分:0)
我发现自己做错了。我使用google api方法时没有先在html中初始化google api。
我从这里得到了答案:https://stackoverflow.com/a/58161132/3277177
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
<script src = "map.js"></script>
然后在我的Javascript代码中:
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);