在Google地图上使用JSON显示标记 [英] Display markers on Google Map using JSON

问题描述

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

我使用Foursquare标记的设计作为示例来测试我的代码，到目前为止，我已经实现了一个简单的显示，用户在世界上只有一个小小的头像，当你悬停时，它会以工具提示的形式告诉你。下一部分是使用一些JSON数据： http://dev.driz.co.uk/googlemap/data.json

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

  Cameron问：
 Star Wars 3D仍在电影院？ 
 2012-05-20 02:31:21 
  

用户应该可以点击在标记被采取到岗位。

我浏览了谷歌地图的开发人员部分，但似乎得到正确的材料和不知道如何最好的使用它与我的工具提示功能和地图实现。

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

谢谢

/ p>

1. 使用AJAX请求提取数据并将其存储在变量中。
   
   

   
   

   • 你可以使用jQuery来做这件事。 http://api.jquery.com/jQuery.getJSON/

       $ .getJSON（'http://dev.driz.co.uk/googlemap/data.json'，函数（数据）{
      //循环并添加标记
     }）; 
       

   
   

   • 或者您可以使用普通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; //将每个项目的信息存储在标记中
    marker.setMap（map）; //其中`map`是Google Map的实例
    google.maps.event.addListener（marker，click，function（mark）{
    //使用`this.item`获取信息和创建动态HTML以显示它。
    // this.item.Post.datetime，this.item.Post.content等
   }）; 
    
    
     

I have the following test Google Map: http://dev.driz.co.uk/googlemap/

I'm using the design of Foursquare markers as an example to test out my code and so far I have implemented a simple display of where YOU the user is in the world with a small avatar and when you hover it tells you this in the form of a tooltip.

The next part is using some JSON data: http://dev.driz.co.uk/googlemap/data.json

I want to display those 5 posts on the map using the coordinates that are stored in the data and display them in a similar fashion to the current marker. The user will then hover the marker and be able to see a tooltip with the following information as an example:

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

The user should be able to click on the marker to be taken to the post.

I've had a look around the Developer section of Google Maps, but don't seem to getting the right stuff and not sure how best to use it with my tooltip function and map implementation.

Can anyone help? Post some code examples?

Thanks

解决方案

Follow these steps

1. Pull the data using an AJAX request and store it in a variable.

   • You can use jQuery for this. http://api.jquery.com/jQuery.getJSON/

     $.getJSON('http://dev.driz.co.uk/googlemap/data.json', function(data){
           // loop  and add markers
     });
     

   • Or you can use plain javascript and a JSON parser.

     • http://www.degraeve.com/reference/simple-ajax-example.php
     • http://www.json.org/

2. Loop in data and pick each item and add to map

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

这篇关于在Google地图上使用JSON显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！