【问题标题】:jquery ui map v3: programmatically open infowindowjquery ui map v3:以编程方式打开信息窗口
【发布时间】:2023-03-28 09:23:02
【问题描述】:

好的,我有一个动态生成的谷歌地图(使用 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();


    });
}

上述功能将在页面上生成可供用户交互的可用标记/链接列表(单击以在信息窗口上显示详细信息)。

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

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

此函数将获取链接/标记的 id 并打开正确的信息窗口。 我设法获得了 id 部分,但到目前为止我无法理解如何打开信息窗口。

任何帮助表示赞赏。

【问题讨论】:

    标签: google-maps-api-3


    【解决方案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);
    });
    

    这是一个基本示例,如果可能的话,请自己制作并提供链接。

    希望你明白我的意思。

    【讨论】:

    • 是的,我在另一篇文章中找到了这个例子,但我无法让它在我的代码上工作。
    • @andrew 制作一个 jsfiddle 并提供链接。这样我就可以检查您的代码。同时让我试着为你创造一个小提琴。
    猜你喜欢
    • 1970-01-01
    • 2013-05-04
    • 2018-04-06
    • 2017-09-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-06
    • 1970-01-01
    相关资源
    最近更新 更多