Html代码
<div class="panel-body">
<div id="map_canvas" style="position: relative;width: 1050px;top: 100%;bottom: 0;height: 500px;"></div>
</div>
Jquery
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://maps.googleapis.com/maps/api/js?key= **********&安培;回调= initMap
function initMap() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 4,
center: {lat: 20.5937, lng: 78.9629}
});
setMarkers(map);
}
var beaches = [
['India', 20.5937, 78.9629, 1],
];
function setMarkers(map) {
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
console.log(beach);
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
这是谷歌地图的代码。
问题出在生产中,但在本地工作正常。
生产错误如下:
Uncaught TypeError: Cannot read property 'firstChild' of null
at Object._.vg (js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:90)
at new Ag (js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:92)
at initMap (location:222)
at js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:98
at js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:56
at Object._.Mc (js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:53)
at Xc (js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:56)
at js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:135
at Object.google.maps.Load (js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:21)
at js?key=AIzaSyDSGjhKsJgMAQmzn1E5UTGQvKtNLKKqMNo&callback=initMap:134