maps - 谷歌地图：给定经纬度坐标

Question

我有以下经纬度坐标（在 JS 数组中），我们如何在这些坐标上绘制带有标记的谷歌地图。

请举一个简单的例子，因为 API 文档中的例子并没有真正给出结论性的答案，或者对我来说太复杂了。

43.82846160000000000000, -79.53560419999997000000

43.65162010000000000000, -79.73558579999997000000

43.75846240000000000000, -79.22252100000003000000

43.71773540000000000000, -79.74897190000002000000

提前致谢。

Answer 1

我使用过谷歌地图，如果您只需要放置一些标记（确保您使用的是 API v3），v2 已贬值并且会在某个时候脱落。接下来，您的纬度/经度坐标。它们需要缩减为 9 或 10 个字符。当我使用超长纬度/经度坐标值时，我很不走运。

谷歌有一个很好的工具，可以让你用它来构建地图。从这里开始：

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

意识到您将需要您的虚拟主机域上的密钥。你可以在这里得到你的钥匙：

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

一长串演示，包含 65 个 v3 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

我希望这一切都会有所帮助。

Answer 2

你可以试试这个

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

演示。

Answer 3

首先，您将创建 google maps 对象，在 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 中有一个 id 为 map_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"
    }); 
}