html – 使用MarkerClusterer在Marker上的InfoWindow

编程之家收集整理的这篇文章主要介绍了html – 使用MarkerClusterer在Marker上的InfoWindow编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

这是我的HTML代码.我试着在标记添加一个infowindow,但它不想工作.我的数据是从“Alle_Ortswahlen.page1.xml”文件加载的.
有谁知道如何将infoWindow添加到每个标记
<script type="text/javascript">
  google.load('maps','3',{
    other_params: 'sensor=false'
  });
  google.setOnLoadCallback(initialize);
function initialize() {

  var stack = [];

  var center = new google.maps.LatLng(48.136,11.586);
    var options = {
        'zoom': 5,'center': center,'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
  var map = new google.maps.Map(document.getElementById("map_canvas"),options);
  GDownloadUrl("Alle_Ortswahlen.page1.xml",function(doc) {
    var xmlDoc = GXml.parse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("Field4"));
      var lng = parseFloat(markers[i].getAttribute("Field6"));
      var marker = new google.maps.Marker({
            position : new google.maps.LatLng(lat,lng),map: map,title:"This is a marker"
        });     
      stack.push(marker);
    }
    var mc = new MarkerClusterer(map,stack);
  });
}
</script>

解决方法

在for循环之前,创建一个空的infowindow对象.
var infowindow = new google.maps.InfoWindow();

比在for循环中,在标记之后添加一个事件监听器,如下所示:

google.maps.event.addListener(marker,'click',(function(marker,i) {
                return function() {
                    infowindow.setContent("You might put some content here from your XML");
                    infowindow.open(map,marker);
                }
            })(marker,i));

将回调参数传递给addListener方法时会发生一些关闭魔法.如果您不熟悉它,请看这里:

Mozilla Dev Center: Working with Closures

所以,你的代码应该是这样的:

google.load('maps',{
            other_params: 'sensor=false'
        });

        google.setOnLoadCallback(initialize);

        function initialize() {

            var stack = [];

            var center = new google.maps.LatLng(48.136,11.586);
            var options = {
                'zoom': 5,'mapTypeId': google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),options);
            var infowindow = new google.maps.InfoWindow();
            GDownloadUrl("Alle_Ortswahlen.page1.xml",function(doc) {
                var xmlDoc = GXml.parse(doc);
                var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(markers[i].getAttribute("Field4"));
                    var lng = parseFloat(markers[i].getAttribute("Field6"));
                    var marker = new google.maps.Marker({
                        position : new google.maps.LatLng(lat,title:"This is a marker"
                    });     
                    google.maps.event.addListener(marker,i) {
                        return function() {
                            infowindow.setContent("You might put some content here from your XML");
                            infowindow.open(map,marker);
                        }
                    })(marker,i));
                    stack.push(marker);
                }
                var mc = new MarkerClusterer(map,stack);
            });
        }

总结

以上是编程之家为你收集整理的html – 使用MarkerClusterer在Marker上的InfoWindow全部内容,希望文章能够帮你解决html – 使用MarkerClusterer在Marker上的InfoWindow所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206(已满)
编程之家官方4群:230427597

相关文章

猜你在找的HTML相关文章

表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。 是的上层标签必须在一个里面,它不能单独使用,相当于的属性标签.标示一个表格,标示
css的overflow属性规定内容溢出元素框时,如何处理溢出内容。overflow属性可能的值:visible:默认值,内容不会被修剪,会呈现在元素框之外。hidden:内容会被修剪,并且其余内容是不可见的。scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余内容,有可能元素框可以放下所有内容也会出现滚动条。auto:如果内容被修剪,则浏览器显示滚动条,以便查看其
网站图标favicon制作介绍:favicon.ico一般作为缩略的网站标志,他显示于浏览器的地址栏,表示网站的Logo,如下图红圈所示:下面介绍如何由.jpg或者.png图片生成.icon图标:      http://www.bitbug.net/,打开该网址,即可在线将其他格式的图片生成icon格式的图标。一般生成的图标icon的尺寸选择32*32.在html页面中引用i
页面中一些诡异的现象1、有的时候body标签中多了style,这是因为 query版本1.11.0与2.0.0导致的,使用别的jquery版本,标签中的style就会没有了。2、有的时候,自己独立出来的一个html,里面有个div,设置属性position:absolute;在其他引用的地方能显示正常,但是在另一文件中显示诡异,如下面这幅图所示:在其他页面这个loading能居
gbk一般用于繁体中文,是国家标准gb2312基础上扩容后兼容gb2312的标准。文字编码(中英文)用双字节编码,是国家编码,通用性比utf8差,但utf8占用的数据库比gbk大gb2312一般用于简体中文utf8----是全球通用,用于解决国际上字符的一种多字节编码,英文使用8位(一个字节),中文使用28位(3个字节)。现在一般都用utf8编码。允许含BOM,但一般不包含BOM。gb
在浏览网站的时候,会发现页面中包含多个html     body等元素。因为html是弱标签,所以出现多个同样的标签,只要格式正确,是不会报错的。1、多个标签:取最外层标签2、多个  去第一个3、多个标签,则按照顺序全部列出来不顾规范声明:只有一个body  html title  head标签
浏览器不能显示修改后的样式:当我们修改了css文件之后,刷新浏览器,但是显示的页面的效果并不是我们修改之后的样式的效果,而是之前         没修改的样式;或者是修改了js文件,但是在刷新浏览器之后,也是没有实现我们修改之后的功能,功能还是没修改之前的功能。原因分析:可能的原因是浏览器有缓存的功能,可能缓存了没修改之前的版本,你可以查看下Sources下你修改过得文件,看看该文件是你修 
title与alt的区别:对alt的说明:1、alt是html的属性2、alt属性用于元素img   input   textarea ,用于网页中图片无法正常显示时,给用户提供文字说明,使用户了解图像信息,起到替代图像的作          用对title的说明:1、title是html的属性,同时也是html的标签2、title作为属性时,可以为元素提供额外信息,可以作