7

Maps API v3 を使用してソフトウェアの実装を開始しました。残念ながら、v3 API には深刻な問題があり、ビジネス ライセンスを取得するのをためらうことがわかりました。

クライアントは 1920x1080 の HD 解像度のモニターを使用しており、マップは画面スペースの 90% を占めています。残念ながら、ここで私が話している問題が発生します。マップ上でマウスをクリックしてドラッグし始めると、スムーズではなく、本当に面倒です。すべての楽しみがなくなります。

Windows XP、Windows 7、および Windows 8を使用して、いくつかの異なるシナリオを試しました。使用しているブラウザーは、Firefox、Chrome、および IE の最新バージョンです。マップをドラッグしようとしたときの結果は次のとおりです。

  1. 小さな画面の解像度 320x240: Firefox、Chrome、および IE は非常にうまく処理します。ドラッグがスムーズでないことに気付くことは不可能です。
  2. 小さな画面解像度 320x240、マップ上に 10 個のポリライン: Chrome と IE はそれをうまく処理しますが、v2 API の経験があれば違いに気付くでしょう。Firefox - 悪夢です。ドラッグがまったくスムーズではありません。
  3. 中画面解像度 1024x768。Firefox - 一貫性のない遅れがあります。Chrome と IE - ドラッグはスムーズですが、マウスを速く動かすと状況が悪化します。
  4. 中程度の画面解像度 1024x768、マップ上に 10 個のポリライン。Firefox - 悪夢。Chrome と IE - 多少の遅延があることに気付き始めますが、同時に滑らかに見えます。
  5. 高解像度 1920x1080。Firefox - 大幅な遅れ。Chrome と IE - 少しは良くなっていますが、それでも顕著な遅れがあります。6) マップ上のポリラインを含む高解像度 1920x1080: Firefox、Chrome、IE - NIGHTMARE。地図をドラッグすることはほとんど不可能です。

興味深い事実：

  1. 上記の問題は、Google マップの v2 API では発生しません。
  2. マウスの移動速度が毎秒 50 ～ 60 ピクセル未満の場合、上記の問題は発生しません。ドラッグは本当にスムーズです。マウスを速く動かすと、ラグが発生します。
  3. http://maps.google.comでは、問題はまったく存在しませんが、開発者ガイドのコード サンプルの一部を開くと問題が発生します。例を次に示します: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple。

私は問題をできるだけ深く説明したと思いますが、それを回避しようとしても、解決策を見つけることができませんでした。

誰かがこの問題について意見を共有してくれたらうれしいです.

PS 残念ながら、私は v2 のキーを持っていないので、ローカルホストの外でマップを表示できる例を作成することはできませんが、並べて比較できる Web サイトを見つけました (v2 と v3)。マップをドラッグして、違いを確認してみてください。

http://www.wolfpil.de/v2-v3-sidebyside.html

マップの解像度は非常に小さく、おそらく経験の浅いユーザーには違いがわからない可能性があるため、マップへの別のリンクも提供します。キャンバスの解像度を大きくするには、firebug または同様のデバッガーを使用する必要があります。次に、私が話していることがわかります。

4

4 に答える 4

6

すべての要素に CSS3 トランジションが追加されているという問題がありました。

したがって、トランジションを削除すると、正常に機能しました..

例を参照してください:

#map * {
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: all 0s ease;
  transition: none;
}

于 2020-02-14T09:04:28.133 に答える
5

こっちも一緒。私が気付いたのは、マップをパンしているときに v3 が多くのイベントを発生させ、ブラウザーがチョークする傾向があることです (特に FF)。これは、Bing Maps API も使用しており、1 秒あたりのイベント数viewchange(Google の に相当center_changed) がはるかに少ないためです。また、addThrottledHandler()生成されるイベントの数を減らす方法も提供します。

私が知る限り、Google マップは、マップのビューが更新される前に、イベントcenter_changedごとに1 つのイベントを発生させるようです。mousemoveしたがって、多くのイベントが生成されますが、それらのどれも画面に複製されません。ブラウザーがマップ ビューの更新を停止するか、変更がなくなるまでマップが待機し、その後にビューを更新する可能性があります。

編集: 一部のmousemoveイベントが Google マップに到達しないようにすると、ブラウザはmousemoveイベントに加えて、Google マップがこのイベントから生成する他のすべてのイベント ( など) を停止せcenter_changedず、マップはスムーズにパンします。

これを行うには、イベント リスナーを#mapdiv に追加します (bodyタグにも追加できます)。キャプチャ フェーズのイベントを追加します。マウスが画面上を移動すると、最初にbodyタグがイベントを受け取り、次に#mapdiv、次に Google マップ要素 (div、タイル) を受け取ります。これが捕獲フェーズです。その後、バブル フェーズが続き、イベントは Google マップ要素から#mapdiv に戻り、bodyタグに戻ります。通常、イベント ハンドラーはバブリング フェーズ用に登録されるため、キャプチャ フェーズ用のハンドラーを登録すると、イベントをキャンセルできるため、このイベントのバブリング フェーズはありません。これは、Google マップがイベントを受信しないことも意味します。

periodパラメータとspaceパラメータを増やして、より多くのイベントを強制終了できます。あまりにも多くのイベントを強制終了すると、マップがある位置から次の位置にジャンプし始めることを意味します。キル数が少なすぎると、すべてのイベントが Google マップに到達し、ブラウザーは Google マップから新しく生成されたイベントで停止するため、マップはある位置から次の位置にジャンプします。いくつかの中間点が最も効果的です。

結局のところ、Google Maps は Bing Maps ほど滑らかではありません。これは、Bing Maps が慣性を使用しているためです。マップを激しく動かすと、マップはマウスに追従してゆっくりと動き始め、その後どんどん速くなります。これにより、実際に非常に滑らかなパンが作成されます。

私が発見した興味深い事実はmousemove、マウスが動かなくても、Google Chrome と Opera/Chrommium は毎秒約 1 つのイベントを生成するということです! このコードは、これらのイベントも強制終了します (これらのイベントでdistanceは がゼロであるため)。

http://jsfiddle.net/uNm57/ (Firefox の js コンソールを確認してください。いくつかのイベントが停止され、次に 1 つの許可されたイベントが表示されるはずです)

<html>
  <head>
    <style type='text/css'>
      #map {
          position: absolute;
          width: 100%;
          height: 100%;
          margin: 20px;
      }
    </style>

    <script type='text/javascript'>
      var last = {time : new Date(),    // last time we let an event pass.
                  x    : -100,          // last x position af the event that passed.
                  y    : -100};         // last y position af the event that passed.
      var period = 100; // ms - don't let pass more than one event every 100ms.
      var space  = 2;   // px - let event pass if distance between the last and
                        //      current position is greater than 2 px.

      function init_map() {
          map_div = document.getElementById("map")
          // map
          var map_options = {
              center: new google.maps.LatLng(45.836454, 23.372497),
              zoom: 8
          };
          map = new google.maps.Map(document.getElementById("map"), map_options);

          // register event handler that will throttle the events.
          // "true" means we capture the event and so we get the event
          // before Google Maps gets it. So if we cancel the event,
          // Google Maps will never receive it.
          map_div.addEventListener("mousemove", throttle_events, true);
      };

      function throttle_events(event) {
          var now = new Date();
          var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
          var time = now.getTime() - last.time.getTime();
          if (distance * time < space * period) {    //event arrived too soon or mouse moved too little or both
              console.log("event stopped");
              if (event.stopPropagation) { // W3C/addEventListener()
                  event.stopPropagation();
              } else { // Older IE.
                  event.cancelBubble = true;
              };
          } else {
              console.log("event allowed: " + now.getTime());
              last.time = now;
              last.x    = event.clientX;
              last.y    = event.clientY;
          };
      };
    </script>
</head>
<body onload = "init_map()">
    <div id="map"></div>
</body>
</html>
于 2014-02-26T03:00:16.210 に答える