在 google 地图 javascript api - 如何移动地图而不是标记
In google maps javascript api - how to move map not marker
目前我有一个小项目需要将标记设为静态并将地图移动到地图上的标记显示 - 我希望它有意义 -
如何移动地图而不是标记 - 就像我说的那样，标记不能移动，但当位置改变时地图需要移动到标记 - 标记显示在地图底部，以便为标记上方的其他事件腾出空间比如路径显示等等 -
已经完成的是，当汽车移动时它会监视 gps - 然后告诉标记移动到该 gps 作为当前位置，然后平移到地图底部 - 这使得标记在地图底部猛烈移动时位置改变了——所以我想如果我把它放在地图上方的 div 中并通过 css 样式固定它来保持标记静态——所以它一直保持在同一个地方——但这是错误的它不能随地图一起移动，然后当有人用手指拖动地图时 - 所以这不是正确的解决方案 - 你对这个困境的解决方案是什么，除非我遗漏了什么 -
为了达到你想要的效果，你需要在正确的轴上旋转地图，找到地图中心的位置地图，最后 将地图居中 在正确的位置。
1 - 旋转地图
在你的情况下（我假设你希望汽车始终面向用户位置前方的道路）你需要在居中之前旋转地图，否则地图总是朝向北方并且它可能会很烦人当汽车朝其他方向移动时（例如向南）。在这种情况下，视点指向错误的方向，用户看不到前方的道路。
你可以找到一个例子here in the documentation. Basicaly you need to use setHeading() method. The rotation on gmap is not easy than it can be (see this post).
2 - 找到地图的中心
要找到地图中心的更新位置，您需要检索始终位于标记固定位置上方相同距离（以地图容器的像素为单位）的点的 latLng 位置。使用方法 fromLatLngToPoint() 和 fromPointToLatLng() 检索从地图到现实世界的位置，反之亦然（有关详细信息，请参阅 getProjection()）。
例子：
您的地图以 1000*1000 像素显示，您选择的标记的底部位置在左侧 500 像素和顶部 950 像素。如果你想移动地图的中心而不改变标记的位置，你需要找到标记上方450px的点的latLng位置。
function findMapCenter(map, markerLatLng) {
// need this to adjust from the actual zoom on the map
let scale = Math.pow(2, map.getZoom());
// position in pixel x.y from the container
let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng);
// calcul of the position of the center
let centerWorldCoordinate = new google.maps.Point(
markerWorldCoordinate.x,
markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker
);
// return latLng of the center point of the map
return map.getProjection().fromPointToLatLng(centerWorldCoordinate);
}
3 - 将地图设置在正确的位置
使用 setCenter() 方法将地图居中放置在选定的经纬度位置上。
let marker; // = config of your marker
let gMap = new google.maps.Map(document.getElementById('map'));
update({lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE});
// call this every time you want to update
function update(markerNewLatLng){
// ... first step : rotate the map if you need to
// then update marker position
marker.setPosition(markerNewLatLng);
// center the map
gMap.setCenter(findMapCenter(gmap, markerNewLatLng));
}
目前我有一个小项目需要将标记设为静态并将地图移动到地图上的标记显示 - 我希望它有意义 -
如何移动地图而不是标记 - 就像我说的那样，标记不能移动，但当位置改变时地图需要移动到标记 - 标记显示在地图底部，以便为标记上方的其他事件腾出空间比如路径显示等等 -
已经完成的是，当汽车移动时它会监视 gps - 然后告诉标记移动到该 gps 作为当前位置，然后平移到地图底部 - 这使得标记在地图底部猛烈移动时位置改变了——所以我想如果我把它放在地图上方的 div 中并通过 css 样式固定它来保持标记静态——所以它一直保持在同一个地方——但这是错误的它不能随地图一起移动，然后当有人用手指拖动地图时 - 所以这不是正确的解决方案 - 你对这个困境的解决方案是什么，除非我遗漏了什么 -
为了达到你想要的效果，你需要在正确的轴上旋转地图，找到地图中心的位置地图，最后 将地图居中 在正确的位置。
1 - 旋转地图
在你的情况下（我假设你希望汽车始终面向用户位置前方的道路）你需要在居中之前旋转地图，否则地图总是朝向北方并且它可能会很烦人当汽车朝其他方向移动时（例如向南）。在这种情况下，视点指向错误的方向，用户看不到前方的道路。
你可以找到一个例子here in the documentation. Basicaly you need to use setHeading() method. The rotation on gmap is not easy than it can be (see this post).
2 - 找到地图的中心
要找到地图中心的更新位置，您需要检索始终位于标记固定位置上方相同距离（以地图容器的像素为单位）的点的 latLng 位置。使用方法 fromLatLngToPoint() 和 fromPointToLatLng() 检索从地图到现实世界的位置，反之亦然（有关详细信息，请参阅 getProjection()）。
例子：
您的地图以 1000*1000 像素显示，您选择的标记的底部位置在左侧 500 像素和顶部 950 像素。如果你想移动地图的中心而不改变标记的位置，你需要找到标记上方450px的点的latLng位置。
function findMapCenter(map, markerLatLng) {
// need this to adjust from the actual zoom on the map
let scale = Math.pow(2, map.getZoom());
// position in pixel x.y from the container
let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng);
// calcul of the position of the center
let centerWorldCoordinate = new google.maps.Point(
markerWorldCoordinate.x,
markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker
);
// return latLng of the center point of the map
return map.getProjection().fromPointToLatLng(centerWorldCoordinate);
}
3 - 将地图设置在正确的位置
使用 setCenter() 方法将地图居中放置在选定的经纬度位置上。
let marker; // = config of your marker
let gMap = new google.maps.Map(document.getElementById('map'));
update({lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE});
// call this every time you want to update
function update(markerNewLatLng){
// ... first step : rotate the map if you need to
// then update marker position
marker.setPosition(markerNewLatLng);
// center the map
gMap.setCenter(findMapCenter(gmap, markerNewLatLng));
}