当前位置: 首页 > 知识库问答 >
问题:

Google Maps API与Infowindows的多个标记

田修为
2023-03-14

我试图添加多个标记,每一个都有自己的信息,当点击时会出现。当我尝试时,我很难得到infowindows来,它要么只显示一个标记,而没有InfoWindow。

谢谢,如果你需要更多的信息,请告诉我

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>

共有1个答案

庞鸿骞
2023-03-14

你可以做个了结。只需像这样修改代码:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));  

下面是演示

 类似资料:
  • 我想添加多个点击激活的标记和信息。我有麻烦,以显示相关的信息标记,点击后,相同的信息标记为所有标记打开。 信息来自for循环这是代码

  • var Rafael=new google.maps.latlng(52.341949,6.682236);var Aandagt=new google.maps.latlng(52.341949,6.782236); 任何帮助或建议如何添加和附加2个信息,一个为标记'Rafael'和一个为标记'Aandagt'将非常感谢。 查看当前地图:http://www.imrafaelhi.nl/stag

  • 问题内容: 我的项目使用JSON提要来获取有关指定纬度和经度边界内地震的信息,本质上是一个盒子。我获取此信息,并将所有结果转换为Google地图上的标记。我还需要每个标记还显示一些其他信息,因此我尝试使用内置的InfoWindow对象,以便在单击标记时打开带有该标记相关信息的工具提示。但是,我发现无论单击什么标记,相同的信息窗口始终位于该组的相同标记之上,并且我相信它始终是循环中创建的最后一个信息

  • 问题内容: 这似乎很基本,但我无法弄清楚。 我有一个表“ item_tags”,我想选择所有与标签1和2匹配的项目(例如,每个项目都必须同时具有两个标签)。 我将如何在mysql中执行此操作? 创建表是: 谢谢! 问题答案: 使用: 您需要定义GROUP BY和HAVING子句,并且不同标签ID的数量必须等于您在IN子句中指定的标签数。

  • 问题内容: 目标:从特定元素(例如li)中提取文本,而忽略各种混合在标签中的内容,即展平第一级子级,并简单地分别返回每个展平型子级的串联文本。 例: 所需文字: Central Intelligence Agency Culinary Institute of America 除了周围的定位标记阻止简单的检索。 为了分别返回每个li标签,我们使用简单的方法: 但这还包括周围的锚标签等。 仅返回属于

  • 是否有一个已经存在的程序可以创建一个虚拟光标供Sikuli使用,同时用户保持对鼠标光标的控制?我正在寻找在使用Sikuli时使调试代码不那么费力的方法。在这方面的任何提示也是欢迎的!