0

1 つのマーカーと情報ウィンドウが関連付けられたシンプルな Google マップ v3 があります。

マーカーをクリックすると、情報ウィンドウが表示され、ビュー内の情報ウィンドウに合わせてマップが自動的にパンしますが、ページの読み込み時にクリックをトリガーして情報ウィンドウを開こうとすると、情報ウィンドウは開きますが、パンは発生しません。

トリガーは次のように行われます。

google.maps.event.trigger(marker, 'click');

上記のコードを関数に移動し、setTimeout 500 で呼び出すと、パニングも発生します。

私はAPIを掘り下げましたが、オンデマンドで自動パンニングを引き起こす機能を見つけることができませんでした. タイムアウトを使わない方法はありますか? タイムアウトが役立つのはなぜですか?

ありがとう

パンしない例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { width: 400px; height: 320px }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(42.6620233,-78.4250679);
        var mapOptions = {
          center: myLatlng,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        google.maps.event.trigger(marker, 'click'); 

      }
      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

これは、パンを行うがタイムアウトのみを行うものです。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { width: 400px; height: 320px }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      var map;
      var marker;

      function initialize() {
        var myLatlng = new google.maps.LatLng(42.6620233,-72.4250679);
        var mapOptions = {
          center: myLatlng,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        setTimeout('pop()', 500);
        //google.maps.event.trigger(marker, 'click');
        //infowindow.open(map,marker);
        //map.pan();

      }

      google.maps.event.addDomListener(window, 'load', initialize);

      function pop() {
        google.maps.event.trigger(marker, 'click');
      }

      //setTimeout('pop()', 500);

    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>
4

1 に答える 1

1

マップの初期化は同期プロセスではありません。マップ インスタンスを作成すると、マップのすべてのプロパティが設定されるまで時間がかかります (マップをパンする位置を決定するために必要なプロパティがいくつかある可能性があります)。

タイムアウトを使用して機能する場合、この時点で必要なプロパティが設定されます。

代わりに、タイルが読み込まれたときに関数を呼び出すことをお勧めします。この時点でマップの初期化が完了していることを確認できます。

google.maps.event.addListenerOnce(map, 'tilesloaded', pop);
于 2013-09-12T21:50:36.117 に答える