Question

好的，我有一个动态生成的谷歌地图（使用jquery ui map v3插件）要显示的地图数据取决于用户输入/选择
我这样打开地图：

    map_lat = parseFloat(xxxxxxxxxx);
    map_long = parseFloat(xxxxxxxxxxxx);
    map_zoom = parseInt(xxxxxxxxxxxx);

    myCenter = map_lat+","+map_long;
    myCenter = myCenter.toString(); 

    $("#my_map").width(600).height(620);

    $("#my_map").gmap({
        "center": myCenter, 
        "zoom": map_zoom,
        "disableDefaultUI": false
    });
    populateMap( *varius options here* );

使用标记和数据填充地图的功能是：

function populateMap( *varius options here* );
{
    var htmlData = "", // will hold a list of links for user to interact. Each link must open appropriate marker info window
        htmlDataShow = '' // will hold some html data along with the link list
    ;   


    $("#my_map").gmap("clear", "markers");
    $("#point-view").hide();

    $.getJSON( "path_to_json_file", function(data) 
    { 
        $.each( data.markers, function(i, marker) 
        {
            htmlData += '<a href="javascript:void(0)" onClick=\'openGMarker("'+marker.id+'")\'>'+marker.title+'</a>&nbsp;&nbsp;';

            $("#my_map").gmap("addMarker", 
            { 
                "position": new google.maps.LatLng(marker.latitude, marker.longitude), 
                "bounds": true ,
                "icon": marker.icon,
                "id":marker.id,
            }).click(function() 
            {
                $("#my_map").gmap("openInfoWindow", { "content": marker.content }, this);
            });
        });



        htmlDataShow = '<h2 class="fut20 white lightStripTitleFull">Select a point to view on map</h2><div class="graystrip"><p>'+htmlData+'</p></div>';
        $("#point-view").empty().html(htmlDataShow).show();


    });
}

上述功能将在页面上生成用户可以进行交互的可用标记/链接列表（单击以显示infowindow上的详细信息）。

为了让用户能够与链接进行交互我有这个功能：

function openGMarker(id)
{
    $('#my_map').gmap('closeInfoWindow');
    var marker = $('#my_map').gmap('get', 'markers')[id];
    //console.log(marker);
}

此函数将获取链接/标记的ID并打开正确的信息窗口。我设法获得了id部分，但到目前为止我无法理解如何打开infowindow
任何帮助表示赞赏。

Answer 1

通过提供一个工作示例，我认为您可以解决您的问题。

这是JSFiddle，你可以更好地理解它。

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Food Waste and Organics workshop'
});
infowindow.open(map, marker);

要以专业方式打开infoWindow，请添加点击监听器，

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

这是一个基本样本，如果可能的话，可以自己动摇并提供链接。

希望你明白我的意思。

jquery ui map v3：以编程方式打开infowindow

1 个答案: