Question

我使用以下基本代码作为嵌入Google地图的框架：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(41.2048114,8.0734625),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <a href="https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map">Adding a Google Map to your website</a>
  </body>
</html>

但是，地图不会以iframe / url嵌入方法的方式集中在所需的国家/地区：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

注意：我已经检查了其他问题，但代码似乎过时了，或者至少与我试图遵循的官方惯例完全不同。

如何使用/修改第一个代码块来居中地图（我不想从method急剧偏离。）

Answer 1

您最简单的选择是使两张地图的大小相同，并调整Google Maps Javascript API v3地图的中心和缩放，直到它与您的嵌入地图相匹配。

fiddle

代码段

＆＃13;

function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: new google.maps.LatLng(41.28718658156576, 12.600134851639705),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(map,'center_changed',function() {
        document.getElementById('info').innerHTML = map.getCenter()+":"+map.getZoom();
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map {
    width: 700px;
    height: 700px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="info"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>

＆＃13;

另一个选择是使用Google Maps Javascript API v2 Geocoder来获得意大利的界限。这并不适合缩放级别6（因此缩放到边界不会放大得足够近）。要解决等待地图设置其边界的问题，请将缩放级别增加1。

fiddle

代码段

＆＃13;

function initialize() {
  var mapCanvas = document.getElementById('map');
  var map = new google.maps.Map(mapCanvas);
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Italy"
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.bounds);
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        map.setZoom(map.getZoom() + 1);
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map {
  width: 700px;
  height: 700px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624"
width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>

＆＃13;

Answer 2

虽然geocodezip的答案是正确的，但您可能希望在某些浏览器中玩游戏并将用户位置作为中心。您想要居中的方式和位置通常取决于您的使用案例。但是，它在Firefox和Chrome中运行良好，但Safari似乎需要在设置中进行调整以允许跟踪。

jsfiddle

以下是使用用户位置居中的代码：

<!DOCTYPE html>
<html>
<head>
<style>
  #map {
    width: 700px;
    height: 700px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }
    function showPosition(pos) {
       var mapCanvas = document.getElementById('map');
       var mapOptions = {
          center: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       var map = new google.maps.Map(mapCanvas, mapOptions);
    }
  google.maps.event.addDomListener(window, 'load', getLocation);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

自定义Google地图嵌入不像iframe嵌入代码那样居中

2 个答案: