5

Google マップ API の使用についてかなりの時間をかけて読み、以下のコードをまとめました。このコードは、最初に特定の場所を中心にしてから、地図の中心をユーザーの現在の場所に変更します。これは、2 番目のマーカーで強調表示されます。次に、マップの中心を再設定せずに、5 秒間隔で 2 番目のマーカーの位置を更新します。これは、さまざまなデバイスやブラウザーでさまざまな程度に機能するため、デバイス間の互換性を高めるにはどうすればよいか考えていました.

======================================================================================================================
Device      Browser                      Display map                  Display map marker      Display current location
======================================================================================================================
PC          Chrome                           Yes                           Yes                        Yes (if allowed)
----------------------------------------------------------------------------------------------------------------------
iPhone 3    iOS 5                            Yes                           Yes                        No
----------------------------------------------------------------------------------------------------------------------
Nokia n97   Opera Mobile                     Yes                           Yes                        Yes
----------------------------------------------------------------------------------------------------------------------
Nokia n97   Native symbian browser       Yes, though hybrid map is poor      No      It detects the current location and centres the map there, but doesn't display the image.
----------------------------------------------------------------------------------------------------------------------

カスタム アイコンなどでマップが正しくレンダリングされるように、自分のサイトでマップをホストする必要があります。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>mysite - Find your way :)</title>
    <style>
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #map_canvas {
          height: 100%;
        }

        @media print {
          html, body {
            height: auto;
          }

          #map_canvas {
            height: 650px;
          }
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script>
      var map;
      var current_location;
      var clue_location;
      function initialize()
      {
            var lostLatLong = new google.maps.LatLng(51.1,-0.1);
            var mapOptions = {
              zoom: 19,
              center: lostLatLong,
              mapTypeId: google.maps.MapTypeId.HYBRID,
              streetViewControl: false,
              rotateControl: false,
              zoomControl: true,
              zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
                }
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var image = '/static/images/maps_images/mysite-map-icon-48x48.png';
            clue_location = new google.maps.Marker({
                position: lostLatLong,
                map: map,
                icon: image
            });

            if(navigator.geolocation) 
            {
                navigator.geolocation.getCurrentPosition(function(position) 
                {
                    var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
                    var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    current_location = new google.maps.Marker({
                        position: newPos,
                        map: map,
                        icon: current_location_image,
                    });
                    map.setCenter(newPos);
                });
                setTimeout(autoUpdateLocation, 5000);
            }
        }

        function autoUpdateLocation() 
        {
            navigator.geolocation.getCurrentPosition(function(position) 
            {
                current_location.setMap(null);
                var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
                var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                current_location = new google.maps.Marker({
                    position: newPos,
                    map: map,
                    icon: current_location_image,
                });
            });
            setTimeout(autoUpdateLocation, 5000);
        }

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

    </script>

  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
</html>
4

1 に答える 1

2

あなたのコードはAndroidのOperaMobile12.1でうまくいくようです。ただし、場合によっては問題を引き起こす可能性のあることがいくつかあります。たとえば、2つのインスタンスがsetTimeout同時に実行され、本質的に同じことを実行している場合があります。これは、コードを可能な限り再利用するという理想にも反するため、ここでコードを単純化しようとしました。

function initialize() {
    var isFirstTime = true;
    var lostLatLong = new google.maps.LatLng(51.1, -0.1);
    var mapOptions = {
        zoom: 19,
        center: lostLatLong,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        streetViewControl: false,
        rotateControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        }
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var image = '/static/images/maps_images/mysite-map-icon-48x48.png';
    var clue_location = new google.maps.Marker({
        position: lostLatLong,
        map: map,
        icon: image
    });

    function autoUpdateLocation() {
        navigator.geolocation.getCurrentPosition(function(position) {
            // Remove marker if necessary
            if (!isFirstTime && current_location) {
                current_location.setMap(null);
            }

            // Get new location
            var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
            var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var current_location = new google.maps.Marker({
                position: newPos,
                map: map,
                icon: current_location_image
            });

            // Set centre first time only
            if (isFirstTime && map) {
                map.setCenter(newPos);
                isFirstTime = false;
            }
        });
    }

    if (navigator.geolocation) {
        setInterval(autoUpdateLocation, 5000);
    }
}

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

その他の注意事項：

  • 繰り返しの作業に適したものに置き換えましsetTimeoutた。setInterval

  • すべてをinitialize()関数内に配置して、グローバル名前空間に入らないようにします。

  • オブジェクトの最後の項目の終了コンマを削除しました。

  • current_location関数の外部で変数を宣言する必要はありませんautoUpdateLocation()。

おそらくさらに改善することができますが、これはもう少し堅牢になるはずです。それでも問題が解決しない場合はお知らせください。

于 2012-11-01T06:30:45.540 に答える