html – 使用MarkerClusterer在Marker上的InfoWindow

html – 使用MarkerClusterer在Marker上的InfoWindow,第1张

概述这是我的HTML代码.我试着在标记上添加一个infowindow,但它不想工作.我的数据是从“Alle_Ortswahlen.page1.xml”文件加载的. 有谁知道如何将infoWindow添加到每个标记? <script type="text/javascript"> google.load('maps', '3', { other_params: 'sensor=false' 这是我的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,@R_404_5979@:"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,@R_404_5979@:"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所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1109051.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-29
下一篇2022-05-29

发表评论

登录后才能评论

评论列表(0条)

    保存