Google Maps fitBounds 是否在标记标签上抛出错误?
Is Google Maps fitBounds throwing a bug on marker label?
如果我在 Google 地图地图上添加带有标签的标记,然后调用 fitBounds 到另一个区域,我仍然会继续看到没有标记的标签,除非我缩小。
这是一个错误吗?
这是一个有效的 fiddle,尝试单击 Milano 按钮:
JSFiddle
Html:
<div id="map-canvas"></div>
CSS:
#map-canvas {
width:100%;
height:500px;
position:"absolute";
top: 0px;
left: 0px;
overflow:"hidden";
background-color:#000;
}
.map-button{
margin-top: 10px;
height: 30px;
cursor: pointer;
color: #565656;
border:0px;
border-radius: 3px;
background-color:#fff;
box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px -1px;
}
.map-button:hover {
background-color: #ebebeb;
color: #000;
}
Javascript:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.29085, 12.71216),
zoom: 6,
gestureHandling: 'greedy'
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
label: {
text:'Roma',
fontSize: '28px'
}
});
var control = document.createElement('button');
control.innerHTML = 'Milano';
control.className = 'map-button';
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);
google.maps.event.addDomListener(control, 'click', function (event) {
var milanBounds = new google.maps.LatLngBounds(
{lat: 45.462818, lng: 9.184145},
{lat: 45.466806, lng: 9.190239});
map.fitBounds(milanBounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
您描述的问题似乎只发生在 API 的实验版本中。
通过在 API 调用中不指定版本号,您将获得实验版本,这可能不是最好的主意,尤其是对于生产中的应用程序。
尝试在您的 API 调用中指定版本以获取发布版本,例如:
//maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY
请参阅 this link 以了解有关版本控制和 Google 鼓励的最佳实践的更多信息。
更改 API 的版本帮助我解决了同样的错误(标签在没有标记的情况下移动)。当我尝试将地图平移到特定标记位置然后将其放大时,就会发生这种情况。
在我的例子中,google 地图 API 的 3.31 版本已经完成。
如果我在 Google 地图地图上添加带有标签的标记,然后调用 fitBounds 到另一个区域,我仍然会继续看到没有标记的标签,除非我缩小。 这是一个错误吗?
这是一个有效的 fiddle,尝试单击 Milano 按钮: JSFiddle
Html:
<div id="map-canvas"></div>
CSS:
#map-canvas {
width:100%;
height:500px;
position:"absolute";
top: 0px;
left: 0px;
overflow:"hidden";
background-color:#000;
}
.map-button{
margin-top: 10px;
height: 30px;
cursor: pointer;
color: #565656;
border:0px;
border-radius: 3px;
background-color:#fff;
box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px -1px;
}
.map-button:hover {
background-color: #ebebeb;
color: #000;
}
Javascript:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.29085, 12.71216),
zoom: 6,
gestureHandling: 'greedy'
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
label: {
text:'Roma',
fontSize: '28px'
}
});
var control = document.createElement('button');
control.innerHTML = 'Milano';
control.className = 'map-button';
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);
google.maps.event.addDomListener(control, 'click', function (event) {
var milanBounds = new google.maps.LatLngBounds(
{lat: 45.462818, lng: 9.184145},
{lat: 45.466806, lng: 9.190239});
map.fitBounds(milanBounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
您描述的问题似乎只发生在 API 的实验版本中。
通过在 API 调用中不指定版本号,您将获得实验版本,这可能不是最好的主意,尤其是对于生产中的应用程序。
尝试在您的 API 调用中指定版本以获取发布版本,例如:
//maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY
请参阅 this link 以了解有关版本控制和 Google 鼓励的最佳实践的更多信息。
更改 API 的版本帮助我解决了同样的错误(标签在没有标记的情况下移动)。当我尝试将地图平移到特定标记位置然后将其放大时,就会发生这种情况。 在我的例子中,google 地图 API 的 3.31 版本已经完成。