万博体育最新资讯

UX和所有东西网络

从JSON向谷歌地图添加多个标记

最近 我收到了几封读者发来的邮件,开始使用谷歌地图API 3,当通过JSON数据动态加载标记时,向多个信息窗口添加信息时会出现问题。

在我的书中,我实际上描述了如何从JSON中添加多个标记,以及如何在每个标记上附加唯一的信息窗口。我没有描述的是如何让JSON数据实际显示在信息窗口中。本教程旨在描述如何做到这一点。

JSON

在这个例子中,我将使用斯堪的纳维亚国家的首都:斯德哥尔摩,奥斯陆和哥本哈根。每一个大写字母都将用一个标记显示在地图上。当你点击一个标记时,一个信息窗口会弹出一些关于城市的简要信息。

JSON数据如下:

var json=[“title”:“斯德哥尔摩”,“LAT”:59.3,“LNG”:18.1,“说明”:“斯德哥尔摩是瑞典的首都和最大城市,是斯堪的纳维亚人口最多的城市,大都会区人口210万(2010年)。}“title”:“奥斯陆”,“LAT”:59.9,“LNG”:10.8,“说明”:“奥斯陆是市政府,挪威首都和人口最多的城市,大都会人口1442318人(截至2010年)。”}“title”:“哥本哈根”,“LAT”:55.7,“LNG”:12.6,“说明”:“哥本哈根是丹麦的首都和人口最多的城市,城市人口1931467(截至2012年1月1日)。”}

请注意,上面的JSON数据包含以下信息:

  • 纯文本标题
    我们将使用此信息作为标记上的工具提示
  • 纬度
    位置的纬度部分
  • 经度
    位置的经度部分
  • 描述
    将在信息窗口中显示的内容。我在其中包含了一些HTML,以说明您不局限于纯文本。

音符:在这个示例中,JSON数据与代码位于同一个JS文件中,但在现实场景中,您可能会从外部源(如后端服务器或Web服务)获取它。

创建地图

首先,我们需要创建一个地图。地图将以斯堪的纳维亚为中心,这样斯德哥尔摩和可以看到奥斯陆和哥本哈根。

//新建map var map=new google.maps.map(document.getElementByID(“map”),中心:新Google.maps.latlng(57.9,14.6)缩放:6,maptypeid:google.maps.maptypeid.roadmap);

如果你不确定这一切是如何运作的,我建议你阅读谷歌地图API 3–基础.它描述了如何创建一个简单的地图。

添加标记

为了从JSON数据中创建标记,我们需要遍历它并提取每个标记的信息。

对于(var i=0,长度=json.length;i长度;i++)var data=json[i],latlng=新的google.maps.latlng(data.lat,数据;液化天然气;//创建一个标记并将其放到地图var marker=new google.maps.marker(position:latlng,地图:地图,标题:data.title);}

这将向地图添加标记,它们都有自己独特的标题,当您用鼠标悬停在它们上面时,这些标题将显示为工具提示。

添加信息窗口

好啊,现在我们已经创建了一个映射,并从JSON数据中添加了一些标记。到目前为止还没那么难,这样做的方式是非常直接的。但是正确地连接信息窗口是另一回事。现在开始变得棘手了。

首先,我们要创造一个全球性的信息窗我们将重用所有标记。这需要在循环之外创建。因此,在我们插入的代码中的循环上方:

var infowindow=new google.maps.infowindow();

这给了我们一个可以在地图上使用的空信息窗口对象。

下一步是将单击事件附加到每个标记。在执行的代码中,我们将填充信息窗用正确的信息在正确的位置打开它,指向单击的标记。

乍一看,您似乎可以用添加标记的方法来完成此操作:

//将click事件附加到当前标记google.maps.event.addListener(marker,“点击”,函数(e)infowindow.setcontent(data.description);信息窗口。打开(地图,标记);(});

这种方法的问题在于,当您试图添加多个信息窗,它们都将具有与上一次迭代相同的内容。为了防止这种情况发生,我们需要使用一种叫做关闭.

闭包

闭包所做的是在循环的每个迭代中持久化数据,以便它绑定到特定的标记。

一种方法是将代码封装在一个即时执行的匿名函数中。您需要确保将信息从当前迭代传递到匿名函数。在我们的例子中我们将传递当前标记和当前数据.

这是一个令人困惑的概念,有点难以解释,所以让我们来看一些代码。

实施关闭

//创建一个闭包以保留正确的数据//注意我如何将循环中的当前数据传递到闭包中(标记,数据)(功能(标记,data)//将click事件附加到当前标记google.maps.event.addListener(marker,“点击”,函数(e)infowindow.setcontent(data.description);信息窗口。打开(地图,标记);(});}(标记,数据);

通过将数据传递给匿名函数,我们确保它将保持在那里。我们基本上是从3个位置创建3个独立的对象(闭包)。

现在,如果我们尝试代码,它会很好地工作的信息窗将显示正确的信息。

提示:Nicholas Johnson解释了闭合如何在他短杆的5个简单弹点中起作用,什么是关闭?

现场演示

结论

我希望这个例子可以澄清关于这个主题的一些混淆。闭包是一个非常令人困惑的概念,但是一旦你理解了它是如何工作的,这是您可以很容易地在您自己的代码中应用的东西。不管怎样,您应该能够从这个示例中获取代码,并将其用作样板文件来调整您自己的需求。

快乐编码!

我的谷歌地图册

如果你觉得这篇文章有用,你可能会对我的书感兴趣开始使用谷歌地图API 3.它涵盖了在网站上创建出色地图所需的所有知识。在amazon.com上购买

28评论maxbetx

  1. 对我来说,这个封闭不起作用。我看到三个标记,但只有哥本哈根显示一个信息窗口。你能把整个代码贴成一页吗?

  2. 我抄袭你的知识。
    谢谢你的信息。
    这对我很有帮助。
    谢谢。

  3. 嗨-我正在看完你的书(顺便说一句很好)。尝试使用上面的例子。不过,我的基本代码是ColdFusion。我有一个来自数据库的查询,我可以用serialijson将其转换为JSON对象。但是,我的格式与您的示例非常不同,我看不到如何循环使用我拥有的JSON对象。
    有没有一个快速的方法,你可以看到我可以读它或有其他的方法我应该去。
    我的JSON如下:
    “columns”:[“企业名称”,“纬度”,“经度”],“数据”:[“SDFDSF图书”,-36.890408121.154751],[“DSDSD图书销售商”,-14.921735,18.602189],[“FFF国际”,-17.8451823195.0541819]];
    感激地接受任何帮助

  4. 感谢您的阐述/澄清。我去年买了你的书,强烈推荐!

  5. 谢谢您!关闭部分是我的功能工作所缺少的全部内容。.

  6. 我买了你的书。我想知道如何实现这个相同的特性来读取JSON文件,而不是当前的JSON文件。当做。

  7. 这就是解决办法!!!!
    谢谢

  8. 但是如果我想在页面加载时打开一个信息窗口呢?
    我试过在页面加载时创建一个信息窗口,它可以工作,但是当我单击JSON数据中的标记时:
    a)页面加载时的信息窗口保持打开状态
    b)一旦关闭,它将不再显示(这可能是因为它只在页面加载时显示)
    我怎么解决这个问题?

  9. 我已经使用了上面的代码,“信息窗口”不能与斯德哥尔摩和奥斯陆合作……我只能在单击哥本哈根之后看到一个信息窗口。你能告诉我在我这方面可能有什么问题吗?

  10. 感谢您发表这篇文章。这很有帮助。我已经设法使事情运转起来了。现在,我试着理解它为什么起作用。我对匿名函数中的封装代码有点不清楚:

    1(功能(标记,数据){

    3//将单击事件附加到当前标记
    4 google.maps.event.addListener(标记,“点击”,函数(e){
    5信息窗口.setcontent(data.description);
    6信息窗口。打开(地图,标记);
    7 };

    9 }(标记,数据);

    我一直在想第一个”(马克,数据)(I.第1)行是参数的传入,但我猜参数实际上是在第9行传递的。对吗?如果是这样,那么你能解释一下指定(标记,数据)在第1行的函数关键字之后?

    干杯!

  11. 现在很高兴!!!!!

    6月8日,2012下午1:54

    哇……我为此挣扎了好几个小时。谢谢你发这个帖子。

  12. 令人惊叹的

  13. 约翰·查拉姆比德斯

    7月13日,2012年上午10:06

    找不到带有JS的页面,请你给我看源代码,因为只有一个标记显示信息框。
    谢谢你的一篇好文章

  14. 你好,有了你的文章(当然还有你的书),我可以在地图上实现更多的标记。
    在JSON数组的不同标记中添加不同的图标怎么样?

  15. 执行长鲍得温

    10月5日,2012下午4点59分

    你救了我的命

    一周来,我一直在努力将JSON数据与OverlappingMarkerSpideryer集成在一起,而闭包是我能让它工作的唯一方法。

    再次感谢(这是我的代码,以防其他人正在挣扎)

    (函数){
    window.onload=函数()。{
    //新建map var map=new google.maps.map(document.getElementByID(“map_canvas”),中心:新Google.maps.latlng(54.6,- 3)缩放:6,maptypeid:google.maps.maptypeid.roadmap);

    //通过json var json加载数据=(函数()var json=空;$.Ajax('Async':假,“global”:错误,“url”:“yourjson.json”,“datatype”:“json”,“成功”:函数(数据)json=数据;});返回json;)();

    //创建一个全局信息窗口对象,该对象将被所有标记var infowindow=new google.maps.infowindow()重用;var oms=新重叠markers piderfier(map,markers wontmove:true,神枪手:真的);var usualColor='eebb22';var spiderfiedColor='ffee22';var iconwithcolor=function(color)return'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin+'+color+'000000 ffff000';}var shadow=new google.maps.markerimage('https://www.google.com/intl/en_all/mapfiles/shadow50.png',新谷歌地图尺寸(37,34)//大小–用于sprite剪辑新的google.maps.point(0,0)//原点–同上,新google.maps.point(10,34)//锚——在哪里与地图位置相接);
    //循环通过json data var bounds=new google.maps.latlngbounds();对于(var i=0,长度=json.length;i长度;i++)var data=json[i],latlng=新的google.maps.latlng(data.latitude,数据。经度);界限。延伸(latlng);//创建一个标记并将其放到地图var marker=new google.maps.marker(position:latlng,地图:地图,icon:iconwithcolor(通常为彩色),阴影:阴影,标题:data.fullname);马克斯
    '+data.comment+'';

    //创建一个闭包以保留正确的数据,注意我如何将循环中的当前数据传递到闭包(标记,数据)(功能(标记,data)oms.addListener('点击',函数(marker)infowindow.setcontent(marker.desc);信息窗口。打开(地图,标记);(});addListener(“蜘蛛式”,函数(标记)for(var i=0;i//将Click事件附加到当前标记/*google.maps.event.addListener(marker,“点击”,函数(e)infowindow.setcontent(data.comment);信息窗口。打开(地图,标记);};

    }(标记,数据);map.fitbounds(bounds);
    }
    }
    });

  16. 请动态地提供它,不应该静态地………

  17. 迪潘·阿亚斯瓦米

    1月16日,2013年上午10:47

    非常感谢你,这是一个很棒的教程

  18. 是否可以添加谷歌地图定制应用程序提供的JSON数据?

  19. 谢谢您!
    我被困在整个“关闭”上两个小时!

  20. 谢谢您!你的指示很快解决了我的问题!

  21. 非常非常高兴

  22. 如何使用信息框而不是信息窗口

  23. 维萨维纳德赛

    6月17日,2013年12:28 AM

    你好,伟大的职位!
    我想做些类似的事情,但要从JSON文件加载数据,然后用它在地图上做标记。你能指导我该做什么吗?

    这是我用来从JSON文件中读取的代码:

    $(document).ready(函数()。{

    $.getjson(“markers.json”,函数(JSON1){

    每一美元(JSON1,函数(键)标记){

    var latlng=新的google.maps.latlng(markers.lat,标记;LNG);

    //创建标记并将其放到地图上

    var marker=new google.maps.marker({

    位置:闭锁,

    标题:markers.title

    (});

    marker.setmap(地图);

    (});

    (});

    (});

    我的JSON文件如下:

    VAR标记=

    “lat”:-33.890542,“液化天然气”:151.274856,“title”:“你好”,“lat”:-33.923036,“液化天然气”:151.259052,“title”:“嗨”];

    你能帮我一下吗?我会非常感激的。谢谢。希望听到你的回音。

  24. 你好,

    对于JSHITEN,当您执行闭包(标记、数据)时,出现一个错误:“不要在循环中生成函数”。

    你有机会解决这个问题吗?

留下答复

您的电子邮件地址将不会发布。

*

专利文献2019万博体育最新资讯

主题通过安德斯诺伦-向上