Question

我希望有人可以帮助我。我没有足够的google api和jquery知识来实现我需要的东西。

我有一张谷歌地图，你可以在这里看到一个演示http://divinethemes.eu/map/ 该脚本适用于信息框，每个点都按类别等进行过滤。

我需要的是有可能从外部地图列表（来自HTML）提供一些操作：打开特定点的气泡（并关闭已打开+中心地图）或反弹气泡或突出显示特定标记。我的目的是创建一个类似（更简单）的谷歌地图位置列表，如Airbnb。如果在地图外的HTML列表中，每个点都可以是打开特定气泡通过和id或数据属性的href ...就像“name_point”一样。但我不知道怎么做......

这是地图的代码：

(function(A) {

    if (!Array.prototype.forEach)
        A.forEach = A.forEach || function(action, that) {
                for (var i = 0, l = this.length; i < l; i++)
                    if (i in this)
                        action.call(that, this[i], i, this);
            };

})(Array.prototype);

var
    mapObject,
    markers = [],
    markersData = {
        'Bars': [
            {
                type_point: 'Wine bar',
                location_latitude: 43.773781,
                location_longitude: 11.257206,
                map_image_url: 'img/thumb_map_2.jpg',
                rate: 'Superb 7.5',
                name_point: 'Astor Cafe',
                description_point: 'Piazza del Duomo, 20/R',
                get_directions_start_address: '43.773460, 11.255985',
                phone: '+3934245255',
                url_detail: 'single_tour.html'
            },
            {
                type_point: 'Pub - Wine bar',
                location_latitude: 43.772238,
                location_longitude: 11.252205,
                map_image_url: 'img/thumb_map_3.jpg',
                rate: 'Superb 7.5',
                name_point: 'Uncle Jimmy',
                description_point: 'Via dei Pescioni,10',
                get_directions_start_address: '43.773460, 11.255985',
                phone: '+3934245255',
                url_detail: 'single_tour.html'
            }
        ]

    };


var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(43.773460, 11.255985),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    mapTypeControl: false,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    panControl: false,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scrollwheel: false,
    scaleControl: false,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },

};

var marker;
mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
for (var key in markersData)
    markersData[key].forEach(function (item) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
            map: mapObject,
            icon: 'img/pins/' + key + '.png',
        });

        if ('undefined' === typeof markers[key])
            markers[key] = [];
        markers[key].push(marker);
        google.maps.event.addListener(marker, 'click', (function () {
            closeInfoBox();
            getInfoBox(item).open(mapObject, this);
            mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
        }));

    });

function hideAllMarkers () {
    for (var key in markers)
        markers[key].forEach(function (marker) {
            marker.setMap(null);
        });
};

function closeInfoBox() {
    $('div.infoBox').remove();
};

function getInfoBox(item) {
    return new InfoBox({
        content:
        '<div class="marker_info" id="marker_info">' +
        '<img src="' + item.map_image_url + '" alt=""/>' +
        '<span>'+
        '<span class="infobox_rate">'+ item.rate +'</span>' +
        '<h3>'+ item.name_point +'</h3>' +
        '<em>'+ item.type_point +'</em>' +
        '<strong>'+ item.description_point +'</strong>' +
        '<a href="'+ item.url_detail + '" class="btn_infobox_detail"></a>' +
        '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>' +
        '<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' +
        '</span>' +
        '</div>',
        disableAutoPan: true,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(35, -175),
        closeBoxMargin: '5px -28px 0 0',
        closeBoxURL: "img/close_infobox.png",
        isHidden: false,
        pane: 'floatPane',
        enableEventPropagation: true
    });
};

Answer 1

您似乎在markers数组中保留了所有标记的引用。您可以在任何标记上触发click事件，以模拟点击它。这样，信息框就会打开标记，地图会在那里居中。

所以，创建一个像：

这样的函数

function onHtmlClick(key){
     google.maps.event.trigger(markers[key], "click");
}

其中key是您要在markers数组中显示弹出窗口的标记的索引。

在您的html元素上，您只需调用该函数，例如：

<div onclick="onHtmlClick(1)">...</div>

修改<！/强>

在您的代码中，markers数组具有以下结构：

[ LOCATION_TYPE_1: [ MARKER, MARKER,..], LOCATION_TYPE_2: [ MARKER4, MARKER,..]

这意味着你必须更新onclick监听器和功能：

<div onclick="onHtmlClick('Bars', 1)">...</div> function onHtmlClick(location_type, key){ google.maps.event.trigger(markers[location_type][key], "click"); }

工作小提琴：https://jsfiddle.net/mow89utv/2/

谷歌地图上市类似于Airbnb

1 个答案: