gpt4 book ai didi

javascript - Google map 上未显示带有信息窗口的多个标记

转载 作者:行者123 更新时间:2023-12-03 11:52:29 24 4
gpt4 key购买 nike

我正在尝试创建一个多标记 map 。每个标记都会有他的信息窗口。我跟踪了所有开发 GoogleMaps 信息,但 infoWindow 仍然没有出现。

在我提供给您的这段代码中,我仅使用自己的函数“PintaMarker”创建了 3 个标记。此函数创建一个标记,并使用信息窗口信息添加其监听器,并将标记推送到我的“标记数组”(称为标记)。

完成标记的创建后,我会生成一个 MarkerClusterer 来使用和查看我创建的所有标记。

任何人都可以看一下我的代码并帮助我吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Markers Map</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--script src="js/bootstrap.js"></script-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>


</head>
<body>
<div id="map1" style="width:100%; height: 913px"></div>
</body>
<script>
var markers = [];
var map1=null;
var geocoder;
var infowindow = new google.maps.InfoWindow();

function pintaMarker(lat,lng,html){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});

google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1,marker);
console.log(infowindow);
});
markers.push(marker);
}

$(document).ready(function() {
//var center = new google.maps.LatLng(41.644183,1.620483);
geocoder = new google.maps.Geocoder();
var center = new google.maps.LatLng(41.38257066,2.15659028);
var options = {
zoom: 16,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map1 = new google.maps.Map(document.getElementById("map1"), options);

pintaMarker(41.385, 2.154, 'hola');
pintaMarker(41.387, 2.1529, 'hola2');
pintaMarker(41.38254, 2.1562, 'hola3');

var markerCluster = new MarkerClusterer(map1, markers);
});
</script>
</html>

谢谢!

最佳答案

问题在于,在您的函数 pintaMarker 中,map1 对象为空!!

解决办法:

将 map 对象作为参数传递给 pintaMarker,如下所示:

 pintaMarker(41.385, 2.154, 'hola', map1);

并将您的功能更新为:

    function pintaMarker(lat,lng,html, map1){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});

google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1, marker);
console.log(infowindow);
});
markers.push(marker);
}

现在 map 对象可用了!

关于javascript - Google map 上未显示带有信息窗口的多个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25760232/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com