2013-05-20 44 views
0

;)中心和自動變焦谷歌地圖

我是一個不太熟悉的谷歌地圖API,但是我能搞清楚大部分問題初學者故障。 ;)但我不明白的是,以中心的兩個標誌我設置和自動放大它...之間的映射;(

也許有人有適合我的提示...

謝謝和歡呼聲!

<script> function initialize() { 
    var myLatLng = new google.maps.LatLng(0, 0); 
    var mapOptions = { 
    zoom: 3, 
    mapTypeControl: false, 
    navigationControl: false, 
    scrollwheel: false, 
    streetViewControl: false, 
    zoomControl: false, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 


    var flightPlanCoordinates = [ 
     new google.maps.LatLng(100, 100), 
     new google.maps.LatLng(120, 120) 



    ]; 

    var lineSymbol = { 
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
}; 

    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.5, 
    icons: [{ 
    icon: lineSymbol, 
    offset: '100%' 
    }], 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize);</script> 

<div id="map" style="width: 100%; height: 300px"></div>

<script>jQuery('#myModal-<? the_ID(); ?>').on('shown', function() { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989)); })</script>

回答

0
// Make an array of the LatLng's of the markers you want to show 
var LatLngList = new Array (

    new google.maps.LatLng(<?php echo esc_html($et_location_lat); ?>, <?php echo esc_html($et_location_lng); ?>), 
    new google.maps.LatLng(<?php echo esc_html($destination_lat); ?>, <?php echo esc_html($destination_lng); ?>)  
    ); 
// Create a new viewpoint bound 
var bounds = new google.maps.LatLngBounds(); 
// Go through each... 
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
    // And increase the bounds to take this point 
    bounds.extend (LatLngList[i]); 
} 
// Fit these bounds to the map 
map.fitBounds (bounds); 

當我打開一個模式對話框內的地圖我已經到只要我打開它重新加載反彈地圖:

jQuery('#myModal-<? the_ID(); ?>').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.fitBounds (bounds); 
}) 
3

你需要適應地圖的界限,因爲它涉及到你的標記。

// Make an array of the LatLng's of the markers you want to show 
var LatLngList = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017)); 
// Create a new viewpoint bound 
var bounds = new google.maps.LatLngBounds(); 
// Go through each... 
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
    // And increase the bounds to take this point 
    bounds.extend (LatLngList[i]); 
} 
// Fit these bounds to the map 
map.fitBounds (bounds); 
+0

謝謝!男人 – Philipp

+0

@Phillip做到了嗎? – lfender6445

+0

嗨!是的,我也添加了這個代碼之後:'jQuery('#myModal- <?the_ID();?>')。on('shown',function(){ google.maps.event.trigger(map, 'resize'); map.fitBounds(bounds); })' 我在引導模式框中打開地圖。所以有必要在打開模態後重新加載邊界。再次感謝! – Philipp