2

これは何ヶ月も私の麺を焼いてきました、私は正直に言うと、私はプログラマーではなくデザイナーなので、このタイプのスクリプトは私が使用している平均的なjquery/javascriptよりも少し難しいです。

これを除いて、実装方法に関する基本的なドキュメントは見つかりませんが、それほど直感的ではありません-http ://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html

JSfiddleを作成しようとしましたが、機能させることすらできません（Tsarのおかげで機能するようになりました）

私はjQueryモバイルアプリを構築しました。ジオロケーション機能を（フュージョンテーブルから）フュージョンテーブルマーカーで機能させ、フュージョンテーブルマーカーをクリックして情報ウィンドウを表示できるようにしたいと思っています。この情報ウィンドウは、フュージョンテーブルで作成されます。

マップをデバイスの現在の場所の中央に配置するには、地理的位置が必要です。地理的位置が使用できないか、デバイスユーザーによって拒否された場合、地図はこれらの座標52.450939、-1.721002の中央に配置する必要があります。

次のレベルは、jQueryモバイルUIポップアップウィンドウを表示することですが、これは重要ではなく、マップ上の標準のバブルだけで問題ありません。

更新されたJSFiddle... http: //jsfiddle.net/twGHC/30/

私のフュージョンテーブル番号は：1260763です

デフォルトの場所は次のとおりです:(地理的場所が利用できない場合のみ）52.450939、-1.721002

ズームレベル：13

どんなアドバイスも素晴らしいでしょう、JSfiddleまでお気軽にどうぞ。前もって感謝します。

4

2 に答える 2

3

これは、ユーザーの位置を検出し、その上にマーカーをドロップし、FusionMarkersを使用してマップをプロットする実用的なソリューションです。Google Maps v3 APIのドキュメントによると：

$(function() {
  var position = new google.maps.LatLng(52.450939, -1.721002);

  getCurrentPosition = function(callback) {
    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            callback(position);
          }, callback(position));         
    } // Try Google Gears Geolocation
    else if (google.gears) {
      var geo = google.gears.factory.create('beta.geolocation');
      geo.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.latitude,pos.longitude);
          callback(position);
        }, callback(position));          
    } // Browser doesn't support Geolocation
    else {
      // Drop the user off in Coventry =)
      callback(position);
    }
  };
     // call the above function
  getCurrentPosition(InitMap);
});

function InitMap(pos) {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: pos,
    zoom: 14,
    mapTypeId: 'roadmap'
  });

  var marker = new google.maps.Marker({
    position: pos, 
    animation: google.maps.Animation.DROP,
    map: map, 
    title: "You are here, mate!"
  });   

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'Geocodable address',
    from: '1260763'
    },
  });

  layer.setMap(map);
};

ユーザーが自分の場所の追跡を拒否すると、例外がキャッチされgetCurrentPositionますが、この関数の2番目のオプションのパラメーターは例外ハンドラーであるcallback(position)ため、デフォルトの場所がマップ上に設定されるように、私が行ったことを単純に渡します。実行したくない場合は、マップ初期化コードInitMapを別の関数に移動し、例外がキャッチされたときに代わりに呼び出して、白地図を表示します。

ここで実際の動作を確認してください：http：//jsfiddle.net/twGHC/36/

PS次の質問が「マーカークリック時にバルーンポップアップを追加する方法」である場合は、次のことを行う必要があります。

于 2011-08-10T10:21:29.363 に答える
0

jquery-ui-mapを使用してこれを行う方法は次のとおりです。http： //jsfiddle.net/rweCf/1/ http://jsfiddle.net/rweCf/1/embedded/result/

クライアントの位置の特定の半径内で変更したい場合は、これが http://jsfiddle.net/Ywknf/1/の方法です（クライアントの場所が最初のポイントであるため、誰もが結果を確認できます）

URLが機能しない場合、またはトランクコードが変更された場合のコードは次のとおりです

$(function() {

  $('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) { 
        $('#map_canvas').gmap('getCurrentPosition', function(results, status) {
            if ( status === 'OK' ) {
                var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
                var marker = $('#map_canvas').gmap('get', 'markers > client' );
                if ( !marker ) {
                    $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
                } else {
                    marker.setPosition(position);
                    map.panTo(position);
                }
            } else if ( status === 'NOT_SUPPORTED' ) {
                $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
            }
        });
        $('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
    });  

});
于 2011-08-16T11:59:30.613 に答える