如何移动谷歌地图的中心位置 [英] How to move the center position of google map

问题描述

  var mapElement，
 parent， 
 mapOptions，
 map，
标记，
 latLong，
 openMarker; 
 
 parent = document.getElementsByClassName（'parent'）[0]; 
 mapElement = document.createElement（'div'）; 
 latLong = new google.maps.LatLng（some_lat_from_db，some_long_from_db）; 
 
 mapOptions = {
 center：latLong，
 zoom：14，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 map = new google.maps.Map（mapElement，mapOptions）; 
 marker = new google.maps.Marker（{
 position：latLong，
 map：map，
 title：'some title'
}）; 
 
 openMarker = function（）{
 var infowindow = new google.maps.InfoWindow（）; 
 infowindow.setContent（'Some Content'）; 
 infowindow.open（map，marker）; 
}; 
 
 google.maps.event.addListener（标记，'click'，openMarker）; 
 parent.appendChild（mapElement）; 
 openMarker（）; 
  

使用此代码时，默认打开的infowindow会超出地图视口，因此不会可见。我首先尝试减小信息窗口的大小，但没有成功。所以我想移动一下地图的中心，以便信息窗口保留在视口中。

那么，我怎样才能将中心移动一些像素，这样信息窗口保留在视口中？

解决方案

您可以使用 .setCenter（） 移动地图中心

  map.setCenter（marker.getPosition（））; 
  

更新

使用 LatLng rel = noreferrer> fromLatLngToDivPixel（）转换为 Point 添加一个偏移量，并使用 LatLng developers.google.com/maps/documentation/javascript/reference?hl=de#MapCanvasProjectionrel =noreferrer>。fromDivPixelToLatLng（）

I am creating a google map in a script with the following code -

var mapElement,
    parent,
    mapOptions,
    map,
    marker,
    latLong,
    openMarker;

parent = document.getElementsByClassName('parent')[0];
mapElement = document.createElement('div');
latLong = new google.maps.LatLng(some_lat_from_db, some_long_from_db);

mapOptions = {
    center: latLong,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(mapElement, mapOptions);
marker = new google.maps.Marker({
    position: latLong,
    map: map,
    title: 'some title'
});

openMarker = function () {
    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent('Some Content');
    infowindow.open(map, marker);
};

google.maps.event.addListener(marker, 'click', openMarker);
parent.appendChild(mapElement);
openMarker();

When using this code, the infowindow that opens up by default goes outside the map viewport, so it's not visible. I first tried to reduce the size of the info window but that didn't work out. So I thought to move the center of the map a bit so that the info window remains in the viewport.

So, how can I move the center by some pixels so that the info window remains in the viewport?

解决方案

You can use .setCenter() to move the center of the map

map.setCenter(marker.getPosition());

Update

Convert the LatLng with .fromLatLngToDivPixel() into a Point add an offset and convert it back into a LatLng with .fromDivPixelToLatLng()

这篇关于如何移动谷歌地图的中心位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！