定製谷歌地圖嵌入不居中像iframe嵌入代碼

我使用下列基本的代碼爲框架，嵌入谷歌地圖：定製谷歌地圖嵌入不居中像iframe嵌入代碼

<!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大幅偏離）居中地圖。

來源

2015-10-18 Clarus Dignus

最簡單的選擇是讓兩個地圖的大小相同，然後調整Google Maps Javascript API v3地圖的中心和縮放比例，直到它與您的嵌入式地圖相匹配。

fiddle

代碼片段：

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上不太合適（因此縮放到邊界的距離不夠近）。要解決該等待，直到地圖設置了邊界，然後將縮放級別加1。

fiddle

代碼片段：

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>

來源

2015-10-18 16:32:11 geocodezip

您能否簡要解釋一下您已經添加的事件監聽器是在幹什麼？我理解它是這樣的：「當中心改變時，獲取中心和縮放信息」。 –

哪個事件監聽器？第一個例子中的那個與你所說的完全一致。我手動調整地圖以匹配嵌入式示例後，便獲得了中心和縮放信息以配置地圖。 – geocodezip

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

來源

2015-10-18 16:50:05

謝謝，但地圖將始終關注一個國家，而不是根據用戶的位置進行動態調整。 –

好的，那麼geocode zip的答案應該適合你的用例。 –

定製谷歌地圖嵌入不居中像iframe嵌入代碼

回答

相關問題