自定义Google Map嵌入未像iframe嵌入代码那样居中

debugcn 发表于 Dev

值得重要

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

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

注意：我已经检查了其他问题，但是代码似乎过时或至少与我要遵循的正式约定不符。

如何使用/修改第一个代码块来使地图居中（我不想大幅度偏离其方法）。

地理编码

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

小提琴

代码段：

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);

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

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

另一个选择是使用Google Maps Javascript API v2 Geocoder来获得义大利的边界。这在缩放级别6上不太合适（因此缩放到边界的距离不够近）。要解决该问题，直到地图设置其边界，然后将缩放级别增加一。

小提琴

代码段：

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);

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。