1

私は次の緯度経度座標（JS配列内）を持っていますが、これらの座標にマーカーを使用してGoogleマップを描画するにはどうすればよいですか。

APIドキュメントの例は実際には決定的な答えを与えていないか、私には複雑すぎるため、簡単な例を挙げてください。

43.82846160000000000000、-79.53560419999997000000

43.65162010000000000000、-79.73558579999997000000

43.75846240000000000000、-79.22252100000003000000

43.71773540000000000000、-79.74897190000002000000

前もって感謝します。

4

3 に答える 3

1

私はグーグルマップを使って作業しましたが、いくつかのマーカーを配置する必要がある場合（API v3を使用していることを確認してください）、v2は減価償却され、ある時点で削除されます。次に、緯度/経度の座標。それらは9または10文字にクリップダウンする必要があります。超長い緯度/経度の座標値を使用すると、運が悪かった。

Googleには、で地図を作成できる優れたツールがあります。ここから始める：

https://developers.google.com/maps/documentation/javascript/

Webhostsドメインにキーが必要になることを認識してください。ここでキーを取得できます：

https://developers.google.com/maps/signup

65個のv3APIの例を含むデモの長いリスト。

https://developers.google.com/maps/documentation/javascript/demogallery

デモで、私はこの例を見つけました。これは近いように見えます。ソースを表示して見つけたコードを再利用します。このリンクで、緯度と経度のペアと、それがどのように呼ばれるかを確認できます。

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js

これがキャンパスマップの例です。

http://beta.gr-3.net/map-api/

最後に、これが最も簡単な例です。1つのマーカーマップ。ソースを見て、それを再利用します。うまくいけば、それはあなたが始めるのに十分でしょう。

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple

これがすべてお役に立てば幸いです。

于 2012-09-24T17:03:15.393 に答える
1

あなたはこれを試すことができます

var map,
locations = [
    [43.82846160000000000000, -79.53560419999997000000],
    [43.65162010000000000000, -79.73558579999997000000],
    [43.75846240000000000000, -79.22252100000003000000],
    [43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(locations[0][0], locations[0][1]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

デモ。

于 2012-09-24T17:27:28.060 に答える
0

まず、Googleマップオブジェクトを作成します。headタグ内のどこかに、readyイベントをリッスンし、ハンドラーには次のものがあります。

var mapOptions = 
    {
      zoom: 10,
      center: new google.maps.LatLng( <%= @drawings.first.latitude %>, <%= @drawings.first.longitude %> ),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

これは、HTMLにidmap_canvasのdivがあることを前提としています。

ページにマーカーを追加する準備ができている必要があるよりも、座標を配列に格納して、ページとそれらのマーカーを反復処理できるようにする必要があります。

for( var i=0; i < coords.length; i++ )
{
     latlng = coords[i].latitude + ", " + coords[i].longitude;

     var marker = new google.maps.Marker({
      position: latlng, 
      map: map,
      title: '',
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
    }); 
}
于 2012-09-24T17:10:45.927 に答える