中心和自动缩放谷歌地图

时间:2013-05-20 04:09:10

标签: maps embed

我对Google Maps 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>

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分: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);
})