Pri*_*jan 5 google-maps map inspect google-maps-api-3
我已经在我的网站上集成了谷歌地图但是当我打开检查元素地图将工作,当我关闭地图将消失.请让我知道这是什么问题
之前
打开检查元素后.
代码就在这里
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = -25.363882;
var longitude = 131.044922;
var zoom = 7;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
initialize();
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
小智 6
创建标记或加载地图后放置此代码:
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
});
Run Code Online (Sandbox Code Playgroud)
idle
在平移或缩放后地图变为空闲时触发事件.
resize
地图变空后我们正在使用方法意味着所有加载完成.因此代码等待地图空闲事件(当所有处理在地图上停止时)发生,然后它执行该resize
方法,这将地图重绘为正确的尺寸.
归档时间: |
|
查看次数: |
5170 次 |
最近记录: |