0

実際、私はMapsv2からv3に移行しています。しかし、私は本当に奇妙なエラーに直面しています。これが私のコードです

function createMarker(arrayPos,title,posn) {
    var size = {width:15,height:15};
    var iconSize = new google.maps.Size(size.width,size.height);
    var iconAnchor = new google.maps.Point(9, 34);
    var marker = new google.maps.Marker({
        icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
        title: title,
        animation: google.maps.Animation.DROP,
        position: posn
    });
    marker.html = getMarkerHtml(arrayPos);
    var infowindow = new google.maps.InfoWindow();  
    infowindow.setContent(marker.html);
    infowindow.open(map,marker);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(marker.html);
        infowindow.open(map,marker);
    });
    return marker;
}

これでは、マーカーが追加されるとすぐに、またクリックリスナーで情報ウィンドウを開くことを実験していました。これですべての情報ウィンドウが開きますが、リスターナーは常に最初のマーカーに登録されているわけではありません。これにポインタはありますか？

4

1 に答える 1

1

次のようにコードを変更しましたが、機能します。問題が解決するかどうかを確認しますか？

マーカークリックをシミュレートするには、以下を追加する必要があります。google.maps.event.trigger(marker, 'click');

function createMarker(arrayPos,title,posn) {
    var size = {width:15,height:15};
    var iconSize = new google.maps.Size(size.width,size.height);
    var iconAnchor = new google.maps.Point(9, 34);
    var marker = new google.maps.Marker({
        icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
        title: title,
        animation: google.maps.Animation.DROP,
        position: posn
    });
    //marker.html = getMarkerHtml(arrayPos);
    var infowindow = new google.maps.InfoWindow();  
    //infowindow.setContent(marker.html);
    //infowindow.open(map,marker);

    var markersHTML = getMarkerHtml(arrayPos);

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

    return marker;
}

例：

<!doctype html>
<html lang="en">
   <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177,-89.406738, 2]
                ],
                demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

                    var markersHTML = ["<div><a href=\"test\">",cityList[i][0],"</a></div>"].join("");

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

            $(document).ready(function() {
                initialize();
            });

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
            <a href="#" class="add-markers">Add Some Markers</a>
        </div>      
    </body>
</html>

これがお役に立てば幸いです。

于 2013-03-02T13:18:55.230 に答える