英文:
How to position viewport to top center marker google maps
问题
以下是代码片段的翻译：
我是新手使用谷歌地图，以下是谷歌地图的代码片段。
标记位于屏幕中央，但如何使其出现在屏幕的顶部中央（如图中所示）。
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
}
window.initMap = initMap;
英文:
I am new to google maps and following is code snippet of google maps
The marker is in middle of the screen but how can I appear at top center (top middle as illustrated in image) of the screen.
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
}
window.initMap = initMap;
答案1
得分: 1
PanTo(): https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo
此函数用于设置地图的中心位置：
panTo(latLng)
参数：
latLng: LatLng|LatLngLiteral 地图的新中心纬度/经度。
返回值： 无
将地图的中心更改为给定的LatLng。如果变化小于地图的宽度和高度，过渡将平滑地进行动画处理。
因此，这将根据标记器设置中心位置。
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
// 将地图位置设置为根据标记器位置居中
map.panTo(myLatLng);
}
window.initMap = initMap;
这也将对你有所帮助：
Google Maps PanTo OnClick
更新
http://jsfiddle.net/kamrankb/6mxopg0n/2/
英文:
PanTo(): https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo
This function is used to set the center position of the map:
panTo(latLng)
Parameters:
latLng: LatLng|LatLngLiteral The new center latitude/longitude of the map.
Return Value: None
Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.
So this will you to set center position according to marker.
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
// map position set to center according to marker position
map.panTo(myLatLng);
}
window.initMap = initMap;
This will also help you:
Google Maps PanTo OnClick
UPDATE
答案2
得分: 0
只需使用Map.panTo()方法将地图移动到指定位置，并使用Map.setZoom()方法设置缩放级别。
你可以测试一下，看看它对你是否有用。如果你需要任何更改，只需告诉我，我会进行修改。
英文:
Simply, to the specified location you can use the Map.panTo() method and to set the zoom level you can use the Map.setZoom() method.
You can test it to see if it's useful to you, and if you want any changes, just let me know and I'll make them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
const marker = new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
// Set the map center to the marker position
map.panTo(myLatLng);
// Set the zoom level to 12
map.setZoom(12);
}
window.initMap = initMap;
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论