0

作業中の Web サイトに Google マップを埋め込みました。Web サイトはhttp://www.paulgrantdesign.com/aberdeenです(小さいモニターの場合、条件付きレスポンシブ デザインはまだ完了していないことに注意してください) 。

右側の Location をクリックすると、私が実装しようとしているカスタム 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

マップの初期化を待つべきだと思います。あなたのウェブサイトを初めて実行すると、プラグインの読み込みに時間がかかります。このステップで、アニメーション メニューの遷移が完了しました。

2 回目は、マップがすばやく読み込まれます。メニューはまだアニメーション化されています。

したがって、マップは小さな幅の div (100px など) 内に読み込まれ、スポットが中央に配置されます。しかし、あなたのメニューはシルスライドであり、あなたのマップはそれとともに成長し、スポットは左に行きます.

これで十分ですか？これについてはよくわかりませんが、コールバックでマップを初期化する必要があります。

于 2013-09-11T14:49:30.830 に答える