0

我已将 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>
4

1 回答 1

0

我认为您应该等待初始化地图。我第一次运行您的网站时，插件需要很长时间才能加载。在这一步，动画菜单已经完成了它的过渡。

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

因此，您的地图加载在一个小宽度的 div（如 100 像素）内，并且您的位置居中。但是您的菜单正在滑动，您的地图随之增长，并且位置向左移动。

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

于 2013-09-11T14:49:30.830 回答