Question

我已将Google地图嵌入到我正在处理的网站中。该网站为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>

Answer 1

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

第二次，地图加载很快。您的菜单仍然是动画。

所以，你的地图加载在一个小宽度div（如100px）内，你的地点居中。但是你的菜单会滑动，你的地图会随之生长，然后就会离开。

这是明确的吗？我不确定这一点，但你应该尝试在回调中初始化你的地图。

为什么我的自定义Google地图中心不是我要求的？

1 个答案: