使用平滑缩放(api V3)将谷歌地图标记居中的方法如下:
function initMap() {
// 创建地图实例
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -34.397, lng: 150.644}
});
// 在地图加载完毕后执行的回调函数
map.addListener('tilesloaded', function() {
// 在这里进行平滑缩放并将标记居中
smoothZoom(map, marker);
});
}
smoothZoom
,该函数接受地图实例和标记对象作为参数。function smoothZoom(map, marker) {
var zoom = map.getZoom();
var targetZoom = 15; // 设置目标缩放级别
var step = 0.01; // 设置每一步的缩放增量
if (zoom < targetZoom) {
// 如果当前缩放级别小于目标缩放级别,则逐步增加缩放级别
map.setZoom(zoom + step);
setTimeout(function() {
smoothZoom(map, marker);
}, 10);
} else if (zoom > targetZoom) {
// 如果当前缩放级别大于目标缩放级别,则逐步减小缩放级别
map.setZoom(zoom - step);
setTimeout(function() {
smoothZoom(map, marker);
}, 10);
} else {
// 当缩放级别达到目标缩放级别时,将标记居中
map.setCenter(marker.getPosition());
}
}
// 创建标记对象
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
map: map,
title: 'Hello World!'
});
smoothZoom
函数,将地图标记居中并进行平滑缩放。// 在地图加载完毕后执行的回调函数
map.addListener('tilesloaded', function() {
// 在这里进行平滑缩放并将标记居中
smoothZoom(map, marker);
});
这样,当地图加载完毕后,地图将会平滑缩放并将标记居中显示。
注意:以上代码示例中的 map
和 marker
分别表示地图实例和标记对象,你需要根据自己的实际情况进行调整。另外,这里没有提及具体的腾讯云产品和产品链接,你可以根据自己的需求选择适合的腾讯云产品来实现相应的功能。
领取专属 10元无门槛券
手把手带您无忧上云