Question

目前正致力于谷歌地图（响应）我搜索了几个选项超过SO，但我无法重现相同的地方我能够重新调整地图的移动和平板电脑但我有标记和路径这不是适合中心的屏幕尺寸。并且需要动态地在标记内添加文本我根本没有得到任何东西。

以下是marker line

的代码

CSS

#map
{
   height: 83%;
   width: 100%;
   position: absolute;
   left: 0px;
   top:65px;
   z-index: 0;
   margin: 0;
   padding: 0;    
}

javascript：

initMap();

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
        lat: 51.1500,
        lng: -1.000
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: 'Styles/images/ic_pin_from.png',
    map: map,
    position: new google.maps.LatLng(51.3700, -2.3800)
});
var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: 'Styles/images/ic_pin_to.png',
    map: map,
    position: new google.maps.LatLng(52.1600, 0.1080)
});
var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: 'Styles/images/ic_car.png',
    map: map,
    position: new google.maps.LatLng(51.7200, -0.2800)
});
/*var flightPlanCoordinates = [
{lat: 51.3610, lng: -2.300},
{lat: 51.2680, lng: 0.464}
];*/
var flightPlanCoordinates = [{
    lat: 51.3740,
    lng: -2.300
}, {
    lat: 51.3510,
    lng: -1.1640
}, {
    lat: 51.1600,
    lng: -1.0000
}, {
    lat: 51.8950,
    lng: -0.5000
}];
var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#00298B',
    strokeOpacity: 1.0,
    strokeWeight: 3
});
flightPath.setMap(map);
}

以下是同一

的fiddle link

Answer 1

使用.extend方法将折线中的点添加到空的google.maps.LatLngBounds对象，然后调用map.fitBounds。

  var bounds = new google.maps.LatLngBounds();
  // for each marker do:
  bounds.extend(marker.getPosition());

  for (var i=0; i<flightPlanCoordinates.length; i++) {
    bounds.extend(new google.maps.LatLng(flightPlanCoordinates[i].lat, flightPlanCoordinates[i].lng));
  }
  map.fitBounds(bounds);

updated fiddle

代码段

initMap();

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 51.1500,
      lng: -1.000
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var bounds = new google.maps.LatLngBounds();
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    // icon: 'http://imgur.com/3PFbvd1',
    map: map,
    position: new google.maps.LatLng(51.3700, -2.3800)
  });
  bounds.extend(marker.getPosition());

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    // icon: 'http://imgur.com/dc2Sq4r',
    map: map,
    position: new google.maps.LatLng(52.1600, 0.1080)
  });
  bounds.extend(marker.getPosition());

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    // icon: 'Styles/images/ic_car.png',
    map: map,
    position: new google.maps.LatLng(51.7200, -0.2800)
  });
  bounds.extend(marker.getPosition());

  var flightPlanCoordinates = [{
    lat: 51.3740,
    lng: -2.300
  }, {
    lat: 51.3510,
    lng: -1.1640
  }, {
    lat: 51.1600,
    lng: -1.0000
  }, {
    lat: 51.8950,
    lng: -0.5000
  }];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#00298B',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  flightPath.setMap(map);

  for (var i = 0; i < flightPlanCoordinates.length; i++) {
    bounds.extend(new google.maps.LatLng(flightPlanCoordinates[i].lat, flightPlanCoordinates[i].lng));
  }
  map.fitBounds(bounds);
}

#map {
  height: 83%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 65px;
  z-index: 0;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Answer 2

@mahadhevan，试试这段代码。

   google.maps.event.addDomListener(window, "resize", function() {
       var center = map.getCenter();
       google.maps.event.trigger(map, "resize");
       map.setCenter(center); 
  });

谷歌地图标记和行无响应

2 个答案: