javascript - 使用 JSON 在 Google Map 上显示标记

Question

我有以下测试谷歌地图：http ://dev.driz.co.uk/googlemap/

我以 Foursquare 标记的设计为例来测试我的代码，到目前为止，我已经用一个小头像实现了一个简单的显示用户在世界上的位置，当你悬停它时，它会以表格形式告诉你的工具提示。

下一部分是使用一些 JSON 数据：http ://dev.driz.co.uk/googlemap/data.json

我想使用存储在数据中的坐标在地图上显示这 5 个帖子，并以与当前标记类似的方式显示它们。然后，用户将鼠标悬停在标记上，并能够看到带有以下信息的工具提示，例如：

Cameron asked:
Is Star Wars 3d still on at the cinema?
2012-05-20 02:31:21

用户应该能够单击要被带到帖子的标记。

我浏览了 Google Maps 的 Developer 部分，但似乎没有得到正确的东西，并且不确定如何最好地将它与我的工具提示功能和地图实现一起使用。

任何人都可以帮忙吗？发布一些代码示例？

谢谢

score 3 · Accepted Answer

按着这些次序

使用 AJAX 请求提取数据并将其存储在变量中。
- 您可以为此使用 jQuery。http://api.jquery.com/jQuery.getJSON/
```
$.getJSON('http://dev.driz.co.uk/googlemap/data.json', function(data){
      // loop  and add markers
});
```
- 或者您可以使用纯 javascript 和 JSON 解析器。
  - http://www.degraeve.com/reference/simple-ajax-example.php
  - http://www.json.org/

循环数据并选择每个项目并添加到地图

for (var i = 0; i < data.length; i++) {
    var item = data[i];

    var markerLatlng = new google.maps.LatLng(item.Post.latitude, item.Post.longitude);
    var marker = new google.maps.Marker({
        position: markerLatlng
    });
    marker.item = item; // store information of each item in marker
    marker.setMap(map); // where `map` is the instance of Google Map
    google.maps.event.addListener(marker, "click", function(mark) {
        // retrieve information using `this.item` and create dynamic HTML to show it. 
        // this.item.Post.datetime, this.item.Post.content etc.
    });

}

javascript - 使用 JSON 在 Google Map 上显示标记

1 回答 1

Related

Reference