Question

我正在尝试创建多标记贴图。每个标记都有他的infoWindow。我跟踪了所有dev GoogleMaps信息，而infoWindow仍然没有出现。

在我给你的代码中，我只创建了3个带有我自己的功能的标记＆＃34; PintaMarker＆＃34;。此函数创建一个标记并向其监听器添加infowindow信息，并将标记推送到我的标记数组＆＃34;称为标记。

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

谢谢！

Answer 1

问题在于你的函数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);
    }

现在地图对象可用了！

Google地图上未显示带有信息窗的多个标记

1 个答案: