Javascript 谷歌地图没有正确居中_Javascript_Google Maps

Javascript 谷歌地图没有正确居中

javascript google-maps

Javascript 谷歌地图没有正确居中,javascript,google-maps,Javascript,Google Maps,我对谷歌地图有问题。我有多个marker、div和infowindows。它可以工作，但是，当我在导航中刷新地图时，我想要巴黎的地图中心。但是，它不是巴黎的中心，而是附近的城市。Marker Paris在左上方，我想Marker在中间 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

我对谷歌地图有问题。我有多个marker、div和infowindows。它可以工作，但是，当我在导航中刷新地图时，我想要巴黎的地图中心。但是，它不是巴黎的中心，而是附近的城市。Marker Paris在左上方，我想Marker在中间

<!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>


html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var映射；
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.298812114.172175）；
功能突尼斯（controlDiv2，地图）{
controlDiv2.style.padding='5px'；
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='白色'；
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，无衬线'；
controlText.style.fontSize='12px'；
controlText.style.paddingLeft='4px'；
controlText.style.paddingRight='4px'；
controlText.innerHTML=''；
controlUI.appendChild（controlText）；
google.maps.event.addDomListener（controlUI，'click'，function（）{
赛特中心地图（突尼斯）；
});
}
香港功能区（controlDiv3，地图）{
controlDiv3.style.padding='5px'；
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='白色'；
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，无衬线'；
controlText.style.fontSize='12px'；
controlText.style.paddingLeft='4px'；
controlText.style.paddingRight='4px'；
controlText.innerHTML=''；
controlUI.appendChild（controlText）；
google.maps.event.addDomListener（controlUI，'click'，function（）{
香港赛特中心地图；
});
}
巴黎功能区（控制分区，地图）{
controlDiv.style.padding='5px'；
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='白色'；
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，无衬线'；
controlText.style.fontSize='12px'；
controlText.style.paddingLeft='4px'；
controlText.style.paddingRight='4px'；
controlText.innerHTML=''；
controlUI.appendChild（controlText）；
google.maps.event.addDomListener（controlUI，'click'，function（）{
赛特中心地图（巴黎）；
});
}
函数初始化（）{
var mapDiv=document.getElementById（'map-canvas'）；
变量映射选项={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：8，
动物控制：错误，
滚轮：错误，
禁用双击缩放：真
}
map=新的google.maps.map（mapDiv，mapOptions）；
var tuniesiecontroldiv=document.createElement（'div'）；
var tunisieControl=新的突尼斯（tunisieControlDiv，地图）；
突尼斯控制指数=3；
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（tunisieControlDiv）；
var hongkongControlDiv=document.createElement（'div'）；
var hongkongControl=新香港（hongkongcontroliv，地图）；
香港控制指数=2；
map.controls[google.maps.ControlPosition.TOP_RIGHT].push（香港控件IV）；
var parisControlDiv=document.createElement（'div'）；
var parisControl=新巴黎（parisControlDiv，地图）；
parisControlDiv.index=1；
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（parisControlDiv）；
var marker2=新的google.maps.Marker({
职位：突尼斯，
地图：地图，
标题：“”
});
var marker3=新的google.maps.Marker({
职位：香港，
地图：地图，
标题：“”
});
var marker=new google.maps.marker({
中心：巴黎，
职位：巴黎，
地图：地图，
标题：“”
});
var infowindow2=新建google.maps.InfoWindow({
内容：“”
});
var infowindow3=新建google.maps.InfoWindow({
内容：“”
});
var infowindow=new google.maps.infowindow({
内容：“”
});
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（标记'click'，函数（）{
map.setZoom（8）；
map.setCenter（marker.getPosition（））；
});
信息窗口2.打开（地图、标记2）；
信息窗口3.打开（地图、标记3）；
信息窗口。打开（地图、标记）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

谢谢你的帮助，我在谷歌搜索，但是我没有找到任何信息。请看你代码的第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

如果希望地图以巴黎为中心进行初始化，请将其用于
```
中心（而不是标记的中心属性）
```



信息窗口“自动平移”与地图中心发生干扰（您正在打开3个信息窗口，一个接一个，这些平移相互干扰。将{disableAutoPan:true}
添加到信息窗口选项中


工作代码段：

var映射；
var paris=new google.maps.LatLng（48.8566667,2.3509871）；
变量
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);