Question

我对Google地图有疑问。我有多个标记，div和infowindows。它工作但是，当我在导航中刷新地图时，我想要在巴黎的地图中心。但是，它不是在巴黎的中心，而是在附近。马克巴黎在左上方，我想在中心标记。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
var paris = new google.maps.LatLng(48.8566667, 2.3509871);
var tunis = new google.maps.LatLng(36.845235, 10.164723);
var hongkong = new google.maps.LatLng(22.298812, 114.172175);



function Tunisie(controlDiv2, map) {

  controlDiv2.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv2.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(tunis);
  });

}
function HongKong(controlDiv3, map) {
  controlDiv3.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv3.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(hongkong);
  });

}
function Paris(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(paris);
  });

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 8,
    zoomControl : false,                       
    scrollwheel : false,                      
    disableDoubleClickZoom : true          
  }
  map = new google.maps.Map(mapDiv, mapOptions);


  var tunisieControlDiv = document.createElement('div');
  var tunisieControl = new Tunisie(tunisieControlDiv, map);

  tunisieControlDiv.index = 3;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(tunisieControlDiv);

  var hongkongControlDiv = document.createElement('div');
  var hongkongControl = new HongKong(hongkongControlDiv, map);

  hongkongControlDiv.index = 2;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(hongkongControlDiv);

 var parisControlDiv = document.createElement('div');
  var parisControl = new Paris(parisControlDiv, map);

  parisControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(parisControlDiv);

    var marker2 = new google.maps.Marker({
      position: tunis,
      map: map,
      title: ''
  });

    var marker3 = new google.maps.Marker({
      position: hongkong,
      map: map,
      title: ''
  });

    var marker = new google.maps.Marker({
      center: paris,
      position: paris,
      map: map,
      title: ''
  });

    var infowindow2 = new google.maps.InfoWindow({
      content: ""
  });
    var infowindow3 = new google.maps.InfoWindow({
      content: ""
  });
    var infowindow = new google.maps.InfoWindow({
      content: ""
  });

  google.maps.event.addListener(marker2, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker2.getPosition());
  });
  google.maps.event.addListener(marker3, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker3.getPosition());
  });  
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });

    infowindow2.open(map,marker2);
    infowindow3.open(map,marker3);
    infowindow.open(map,marker);

}
google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

感谢您的帮助，我在谷歌搜索，但我找不到任何信息

Answer 1

查看代码的第102行。那是你设置地图中心的地方。 Var paris是全球性的，因此您可以在任何地方使用它。

....
function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    center: paris,   // I would like the map center in Paris
    zoom: 8,
    zoomControl : false,                       
    scrollwheel : false,                      
    disableDoubleClickZoom : true          
  }
  map = new google.maps.Map(mapDiv, mapOptions);
...

编辑：顺便说一句，这个值给你卢浮宫。不错的地方，在中心。

var paris = new google.maps.LatLng(48.8610174, 2.3358584);  // Louvre

Answer 2

如果您希望以巴黎为中心初始化地图，请将其用于center MapOption（不是标记的中心属性）。

function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    var mapOptions = {
        center: paris,
        zoom: 8,
        zoomControl: false,
        scrollwheel: false,
        disableDoubleClickZoom: true
    }
    map = new google.maps.Map(mapDiv, mapOptions);

infowindow“auto pan”正在干扰地图中心（你正在打开3个infowindows，一个接一个，平底锅互相干扰。将{disableAutoPan: true}添加到infowindow选项。

working fiddle

工作代码段：

var map;
var paris = new google.maps.LatLng(48.8566667, 2.3509871);
var tunis = new google.maps.LatLng(36.845235, 10.164723);
var hongkong = new google.maps.LatLng(22.298812, 114.172175);



function Tunisie(controlDiv2, map) {

  controlDiv2.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv2.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(tunis);
  });

}

function HongKong(controlDiv3, map) {
  controlDiv3.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv3.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(hongkong);
  });

}

function Paris(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = '';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b></b>';
  controlUI.appendChild(controlText);
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(paris);
  });

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    center: paris,
    zoom: 8,
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true
  }
  map = new google.maps.Map(mapDiv, mapOptions);


  var tunisieControlDiv = document.createElement('div');
  var tunisieControl = new Tunisie(tunisieControlDiv, map);

  tunisieControlDiv.index = 3;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(tunisieControlDiv);

  var hongkongControlDiv = document.createElement('div');
  var hongkongControl = new HongKong(hongkongControlDiv, map);

  hongkongControlDiv.index = 2;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(hongkongControlDiv);

  var parisControlDiv = document.createElement('div');
  var parisControl = new Paris(parisControlDiv, map);

  parisControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(parisControlDiv);

  var marker2 = new google.maps.Marker({
    position: tunis,
    map: map,
    title: 'Tunis'
  });

  var marker3 = new google.maps.Marker({
    position: hongkong,
    map: map,
    title: 'Hong Kong'
  });

  var marker = new google.maps.Marker({
    position: paris,
    map: map,
    title: 'Paris'
  });

  var infowindow2 = new google.maps.InfoWindow({
    content: "Tunis",
    disableAutoPan: true

  });
  var infowindow3 = new google.maps.InfoWindow({
    content: "Hong Kong",
    disableAutoPan: true

  });
  var infowindow = new google.maps.InfoWindow({
    content: "Paris",
    disableAutoPan: true
  });

  google.maps.event.addListener(marker2, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker2.getPosition());
  });
  google.maps.event.addListener(marker3, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker3.getPosition());
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });

  infowindow2.open(map, marker2);
  infowindow3.open(map, marker3);
  infowindow.open(map, marker);

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Answer 3

想要提示，因为这个想法并不是我自然而然的：

我使用了来自“https://www.google.se/maps/”的纬度和经度完全放大并且它在那里工作得很好但是当在我的主页上使用它时它将它们扔掉了大约0.001（离建筑物大约50米，足够傻瓜游客）

我用手调整经度和经度几分钟，直到我把它弄好并且它都居中并将标记放在正确的位置。

谷歌地图没有正确居中

3 个答案: