为什么我的自定义谷歌地图不会集中在我要求它的地方

Why won't my custom Google map center on the point I'm asking it to?

本文关键字：我要 集中 自定义 我的 谷歌地图 为什么      更新时间：2023-09-26

我已经将谷歌地图嵌入到我正在处理的网站中。该网站 http://www.paulgrantdesign.com/aberdeen（请注意，对于较小的显示器，我尚未完成条件响应式设计）

如果您单击右侧的位置，则会打开我正在尝试实现的自定义 Google 地图。加载此屏幕时，地图的中心不是应居中的位置。如果抓住中心点并将其拖动到右上角，则可以看到一个红色轮廓点。轮廓区域的中心应居中。我知道我在代码中有正确的坐标，因为当我将坐标打回 maps.google.com 时，它会向我显示正确的位置。为什么该位置加载到左下角？

    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(53.518191,-110.331709),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options);
        var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "on" }
    ]
  }
];
var flightPlanCoordinates = [
    new google.maps.LatLng(53.52235,-110.337503),
    new google.maps.LatLng(53.522987,-110.333168),
    new google.maps.LatLng(53.514414,-110.321967),
    new google.maps.LatLng(53.514593,-110.337503),
    new google.maps.LatLng(53.52235,-110.337503),
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);
map.setOptions({styles: styles});
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

我认为你应该等待初始化你的地图。我第一次运行您的网站时，插件需要很长时间才能加载。在此步骤中，动画菜单已完成其转换。

第二次，地图加载速度很快。而且您的菜单仍然具有动画效果。

因此，您的

地图加载在较小的宽度div（如 100px）内，并且您的位置居中。但是你的菜单在滑动，你的地图也随之增长，点向左移动。

这够清楚吗？我不确定这一点，但您应该尝试在回调中初始化您的地图。

相关文章：