使用 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 地图的开发者部分，但似乎没有找到正确的东西，并且不确定如何最好地将它与我的工具提示功能和地图实现一起使用。

有人可以帮忙吗？贴一些代码示例？

谢谢

Answer 1

按照这些步骤进行

1. 使用 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/

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

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