2012-09-24 184 views
1

我有以下經緯度座標(在JS數組中),我們如何在這些座標上繪製帶有標記的Google地圖。谷歌地圖:鑑於緯度座標

請舉一個簡單的例子,因爲API文檔中的例子並沒有給出確鑿的答案,或者對我來說太複雜。

43.82846160000000000000,-79.53560419999997000000

43.65162010000000000000,-79.73558579999997000000

43.75846240000000000000,-79.22252100000003000000

43.71773540000000000000,-79.74897190000002000000

在此先感謝。

回答

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)); 
} 

DEMO

+0

謝謝謝赫,它的作品就像一個魅力! :-) – amirak17

+0

您不必引用外部數組即可訪問您的標記值。在標記點擊事件處理程序中使用「this」。這樣你就可以訪問正確的標記對象 – Andreas

1

我已經使用谷歌地圖,如果你只需要放置幾個標記(確保你使用的API v3)V2是折舊,並會在某個時候下降。接下來,你的經緯度。他們需要削減到9或10個字符。當我使用超長/經度長的Coords值時,我一直不走運。

谷歌有一個不錯的工具,可以讓你建立一個地圖。從這裏開始:

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

意識到你需要在你的域名主機管理的關鍵。你可以在這裏得到你的關鍵:

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

演示的一個長長的清單,與65倍API的例子。

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/

最後,這裏是最簡單的例子。一個標記地圖。查看源代碼並重新使用它。希望這足以讓你開始。

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

我希望這一切都是有幫助的。

0

首先,你需要創建谷歌地圖對象,地方head標籤內你會不會聽的事件做好準備並在處理程序有:

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); 

這裏假設你使用ID map_canvas提供你的HTML有一個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" 
    }); 
}