Javascript 为什么赢了'；t我的自定义谷歌地图中心位于点I'；我是这么要求的？

我已经将谷歌地图嵌入到我正在开发的网站中。该网站是（注意，对于较小的显示器，我还没有完成条件响应设计）

如果你点击右边的位置，它会打开一个我正在尝试实现的自定义谷歌地图。加载此屏幕时，地图的中心不是应该居中的位置。如果抓住中心点，并将其拖动到右上角，则可以看到一个红色轮廓点。轮廓区域的中心应居中。我知道代码中有正确的坐标，因为当我把坐标输入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>

函数初始化（）{
var map_canvas=document.getElementById（'map_canvas'）；
变量映射_选项={
中心：新google.maps.LatLng（53.518191，-110.331709），
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（地图画布，地图选项）；
变量样式=[
{
样式：[
{hue:#00ffe6}，
{饱和度：-20}
]
},{
特色类型：“道路”，
elementType:“几何体”，
样式：[
{亮度：100}，
{可见性：“简化”}
]
},{
特色类型：“道路”，
elementType:“标签”，
样式：[
{可见性：“在”}
]
}
];
var FlightPlan坐标=[
新google.maps.LatLng（53.52235，-110.337503），
新google.maps.LatLng（53.522987，-110.333168），
新google.maps.LatLng（53.514414，-110.321967），
新google.maps.LatLng（53.514593，-110.337503），
新google.maps.LatLng（53.52235，-110.337503），
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
strokeColor:#FF0000“，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
setOptions（{styles:styles}）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

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

第二次，地图加载速度很快。您的菜单仍处于动画状态

所以，你的地图在一个小的宽度范围内加载（比如100px），你的点位于中心。但是你的菜单是滑动的，你的地图也随着滑动而增长，而且点会向左移动

这清楚吗？

---

我不确定这一点，但您应该尝试在回调中初始化映射。

如果我获取代码并运行它，它将以居中显示映射和多段线。它似乎起作用了。但是，如果我使用FireFox访问您的站点，我会看到一张地图，但不会看到多段线。如果我使用Chrome，我什么都看不见。所以我猜除了上面的代码，你还有其他一些问题……是的，我明白你的意思。我感谢您的反馈！