我使用以下函数异步加载 Google map ,如果下拉列表中选择的值发生变化, map 将刷新以居中,这一切都正常。
我遇到的问题是,每次加载页面或使用下拉列表中的值重新加载 map 时, map 都会先加载旧金山,然后在加载正确位置后一两秒加载,这是我的编码问题还是我对此能做些什么,我在网上查了一下,但在这个问题上找不到太多信息,这是 map 异步加载的问题吗?
非常感谢任何帮助。
function selectMapLocation(pLocationName)
{
var map;
if (pLocationName != "")
{
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address' : pLocationName }, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
}
});
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644)
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addDomListener(window, 'load', initialize);
}
else
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
google.maps.event.addListener(map, 'click', function(event){
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
}
最佳答案
最简单的修复方法是只有在知道将其初始化到何处后才初始化 map 。
function selectMapLocation(pLocationName) {
var map;
if (pLocationName != "") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': pLocationName
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) { // result of geocoder request
var mapOptions = {
zoom: 10,
center: results[0].geometry.location
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
} else { // default position
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644)
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});
// google.maps.event.addDomListener(window, 'load', initialize);
} else { // default position
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
google.maps.event.addListener(map, 'click', function (event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
}
工作代码片段:
function selectMapLocation(pLocationName) {
var map;
if (pLocationName != "") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': pLocationName
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 10,
center: results[0].geometry.location
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
} else {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644)
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});
// google.maps.event.addDomListener(window, 'load', initialize);
} else {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
}
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<select onchange="selectMapLocation(this.value)">
<option value="">---- select ----</option>>
<option value="New York, NY">New York</option>
<option value="Newark, NJ">Newark, NJ</option>
<option value="Baltimore,MD">Baltimore, MD</option>
<option value="Boston, MA">Boston, MA</option>
</select>
关于javascript - 谷歌地图加载旧金山然后重新加载正确的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27495931/