Question

我正在开发一个WordPress插件，我需要启用该选项，以便用户将多个地图添加到同一页面。这本身就可以正常工作，但有一个问题我不确定如何解决（如果可能的话）。

会发生的是，有三个地图，每个地图在不同的位置都有一个标记。如果单击标记，则会打开信息窗口，该窗口也适用于每个地图。

但是我注意到你是否例如点击顶部地图上的标记，并打开信息窗口。然后单击中间地图上的标记，关闭第一个地图的信息窗口。这不是我想要的，因为用户没有点击顶部地图中的任何内容。

用户点击了不同地图中的标记，因此我宁愿不关闭其他地图上的其他信息窗口。如果有一个包含大量标记的地图，那么这将是正常行为。

var map, infoWindow;

if ( $( ".gmap-canvas" ).length ) {
    $( ".gmap-canvas" ).each( function( i ) {
        var mapId = $( this ).attr( "id" );

        initializeGmap( mapId, i );
    });
}

function initializeGmap( mapId, i ) {
    infoWindow = new google.maps.InfoWindow();

    var markers = [
        ["-0.803689,11.609444", "map 1"],
        ["7.369721,12.354722", "map 2"],
        ["-4.267778,15.291944", "map 3"]
    ];

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng( 0,0 ),
        mapTypeId: "terrain",
        mapTypeControl: false,
        panControl: false,
        scrollwheel: true,
        streetViewControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    };

    map = new google.maps.Map( document.getElementById( mapId ), mapOptions );

    addMarker( markers[i] );
}

function addMarker( latLng  ) {
    var latLngTmp    = latLng.toString().split( "," );
    var markerLatlng = new google.maps.LatLng( latLngTmp[0], latLngTmp[1] );
    var marker       = new google.maps.Marker({
        position: markerLatlng,
        map: map,
        draggable: false
    }); 

    map.setCenter( markerLatlng );

    google.maps.event.addListener( marker, "click", ( function( m ) {
        return function() {
            console.log( "marker click" );

            setInfoWindowContent( marker, latLng[1], m );
        };
    }( map ) ) );
}

function setInfoWindowContent( marker, InfoWindowContent, m ) { 
    infoWindow.setContent( InfoWindowContent );
    infoWindow.open( m, marker );
}

任何想法或建议如何解决这个问题？因此，如果您单击标记并打开信息窗口，它将不会关闭同一页面上其他地图上的信息窗口？

Answer 1

好的，这是固定版本：http://jsfiddle.net/76doay4o/1/

您的问题是，您将infowindow定义为全局变量（对于其余函数），并且直接在函数中使用该实例。我只是将它移到构造函数中，并根据需要将其传递给addMarker和setInfoWindowContent。

单击标记会关闭同一页面上其他地图上的信息窗口吗？

1 个答案: