2012-02-29 8 views
4

私は、訪問者が地図上に表示され、選択した半径(10kmなど)のウェブサイトを作っています。訪問者はPOI(レストラン、バーなど)を見ることができます。ジオロケーション:OpenStreetMapを使用した地図とPOI

<!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 { height: 100% } 
     </style> 
     <script type="text/javascript" 
       src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false"> 
     </script> 
     <script type="text/javascript"> 
      function init() 
      { 
       if(navigator.geolocation) 
       { 
        navigator.geolocation.getCurrentPosition (processPosition, handleError); 
       } 
       else 
       { 
        alert("Geolocation not supported in this browser"); 
       } 
      } 

      function processPosition(pos) 
      { 
       var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 

       var myOptions = { 
        center: latlng, 
        zoom: 16, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)" 
       }); 
      } 

      function handleError(err) 
      { 
       alert('An error occurred: ' + err.code); 
      } 

     </script> 
    </head> 
    <body onload="init()"> 
     <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

それは私はGoogleマップを使用して、マーカーで地図上の自分の位置を示しています。

は、私がこれまでのところ、このコードを持っています。
OpenStreetMapのマップを使用したいのですが(それらは定期的に更新されていますが、制限はありません)、残念ながらまだ実装していません。ここで

私が必要とするマップである:Maps

1.例はGoogle年代のように、彼らのAPIを使用する方法を示しており、(チュートリアル)はありますか?
2. OpenStreetMapにはGoogle PlacesのようなPOIがありますか?または、GoogleプレイスをOpenStreetMapの地図と一緒に使用することも可能ですか?

答えて

2

OpenStreetMapデータを使用する場合は、OpenLayersを調べる必要があります。これは、GoogleマップやBing Maps APIとは少し異なります。サーバーにOpenLayers JavaScriptライブラリをインストールする必要があります。また、さまざまなソースから取得できるマップデータ(マップタイル)を表示します。OpenStreetMap (OSM)、Googleマップ、独自のカスタム地図データなどがあります。OpenStreetMap websiteはOpenLayersを使用してマップを表示します。

1:で「OSM」と入力します(Googleデータを単独で、または一緒に、OpenStreetMapのデータを使用するためのいくつかを含め、examplesの(私は怖いが、それほどGoogle MapsのAPIのための良くない)とたくさんdocumentationあり上部の「フィルタ」ボックス)。

2:ランドマークとして、あなたは、アイコンをクリックしたときに表示されるカスタマイズ可能なマーカーアイコンや気泡を含む、this exampleのように地図上"Marker Layer"を置くことができますが、POIのためのデータの世話をする必要があります検索機能は自分で機能します。あなたが望むならば、あなたはGoogle Places APIを自由に使用して、display「Powered by Google」のロゴである限り、結果をOpenStreetMapのマーカーとして表示することができます。

+0

Googleの技術を使って何かを開発することに時間を費やすことはありません。 –

+1

OSMマップにGoogleプレイスを表示することはできません。「アプリケーションがPlaces APIデータを地図に表示する場合、その地図はGoogleによって提供されている必要があります。 (https://developers.google.com/places/policies) –

1

それはあなたの質問に関連して、いわゆる「webmaps」のリスト上の特定の通知に、openstreetmap.orgから利用可能なすべてのOSMのフレームワークのリスト、:http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps

NJOY!

関連する問題