Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图上没有显示带有infowindow的多个标记

Javascript 谷歌地图上没有显示带有infowindow的多个标记

javascript html google-maps google-maps-api-3

Javascript 谷歌地图上没有显示带有infowindow的多个标记,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我正在尝试创建一个多标记地图。每个标记都有自己的信息窗口。我跟踪了所有的谷歌地图信息和信息窗口仍然没有出现 在我给你们的这段代码中，我只使用自己的函数“PintaMarker”创建了3个标记。此函数创建一个标记，并使用infowindow信息添加其侦听器，并将该标记推送到我的“标记数组”markers中 当我完成标记的创建时，我会生成一个MarkerClusterer来使用和查看我创建的所有标记 谁能看看我的代码，帮我一把吗 <!DOCTYPE html PUBLIC "-//W3C//D

我正在尝试创建一个多标记地图。每个标记都有自己的信息窗口。我跟踪了所有的谷歌地图信息和信息窗口仍然没有出现

在我给你们的这段代码中，我只使用自己的函数“PintaMarker”创建了3个标记。此函数创建一个标记，并使用infowindow信息添加其侦听器，并将该标记推送到我的“标记数组”markers中

当我完成标记的创建时，我会生成一个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>


标记地图
var标记=[]；
var-map1=null；
var地理编码器；
var infowindow=new google.maps.infowindow（）；
函数pintaMarker（lat、lng、html）{
var mylatng=new google.maps.LatLng（lat，lng）；
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图1，
});
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setOptions（{
内容：html
});
打开（地图1，标记）；
console.log（infowindow）；
});
标记器。推（标记器）；
}
$（文档）.ready（函数（）{
//var center=new google.maps.LatLng（41.644183,1.620483）；
geocoder=新的google.maps.geocoder（）；
var center=new google.maps.LatLng（41.38257066,2.15659028）；
变量选项={
缩放：16，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map1=新的google.maps.Map（document.getElementById（“map1”），选项）；
平塔马克犬（41.385,2.154，'hola'）；
平塔马克犬（41.387,2.1529，'hola2'）；
平塔马克犬（41.38254,2.1562，'hola3'）；
var markerCluster=新的MarkerClusterer（map1，markers）；
});
谢谢大家!

问题是在函数
pintaMarker
中
map1
对象为空

解决方案：

将贴图对象作为参数传递给
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);
    }
现在地图对象可用了

谢谢大家!！我还找到了另一个解决方案。我两次声明var map1！一个作为全局变量，另一个在$（document）.ready函数中声明。我想这就是为什么这个对象是空的。