Google map loads like this on mobile
我的网站是wordpress,而Google地图部分加载。(路由加载中,背景地图未加载,请查看所附图片)为什么会发生这种情况?这是由我的代码引起的还是Google Map错误?控制台上也没有错误。
<!---------------------------- Map ------------------------->
<?php if (!empty($arr)) { ?>
<script src="https://maps.googleapis.com/maps/api/js?key=<my_key>"
type="text/javascript"></script>
<div class="container map-container">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<div id="map" style="width: 100%; height: 600px;"></div>
</div>
<script type="text/javascript">
var locations = <?php echo json_encode($arr); ?>;
var map = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.LatLng(locations[i][1], locations[i][2]);
new google.maps.Marker({
position: marker,
map: map
});
bounds.extend(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var userCoorPath = [];
for (i = 0; i < locations.length; i++) {
userCoorPath[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
}
var userCoordinate = new google.maps.Polyline({
path: userCoorPath,
strokeColor: "#000000",
strokeOpacity: 1,
strokeWeight: 2
});
userCoordinate.setMap(map);
map.fitBounds(bounds);
</script>
<?php } ?>
<!---------------------------- EndMap ------------------------->