谷歌地图标记和线路没有响应

google map markers and line not responsive

本文关键字：响应 线路 地图 图标 谷歌      更新时间：2023-09-26

目前正在谷歌地图上工作（响应式） 我在 SO 上搜索了几个选项，但我无法重现相同的内容，我可以为手机和平板电脑重新调整地图大小但我有标记和路径，这不适合屏幕尺寸居中。并且需要在标记内动态添加文本，我根本没有得到任何东西。

这是标记行的代码

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

这是相同的小提琴链接

使用 .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);

更新的小提琴

代码片段：

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>

@mahadhevan，请尝试使用此代码。

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