Question

我正在运行显示一堆API标记的代码。与我的代码一起工作正常，但中心是根据我的标记自我调整。我想预设中心和缩放系数。我知道我必须在'function initialize()'中添加一些代码，如：

var mapOptions = { zoom: 7, center: new google.maps.LatLng(9.22316, 52.35308)

但如果我在运行的代码中复制它就不再有用了。那么请你帮帮我，告诉我我要修改哪部分代码？

这是我正在运行的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <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 LocationData = [ xxx, yyy, zzz, 0];


var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

    var icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',      
      iconURLPrefix + 'yellow-dot.png'
    ]




function initialize()
{
    var map =
        new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();


    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);       
    bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon : icons[p[3]],
            title: p[2]
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }

    map.fitBounds(bounds);
}



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

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

非常感谢你的帮助！

Answer 1

取消对map.fitBounds(bounds);

的调用

然后，如the documentation中所述，添加预定义的缩放和中心：

var map;


function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(9.22316, 52.35308)
  };
  var map =
    new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

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

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

Google Maps Marker API - 初始化中心

1 个答案: