javascript - 谷歌地图列表类似于 Airbnb

Question

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

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

我需要的是能够从外部 map 列表(来自 HTML)提供一些操作:打开特定点的气泡(并关闭已打开的 + 使 map 居中)或弹起气泡或突出显示具体标记。我的目的是创建一个类似(更简单)的谷歌地图位置列表，如 Airbnb。如果在 map 外部的 HTML 列表中，每个点都可以是通过 id 或数据属性打开特定气泡的 href，比如“name_point”，那就太好了。但我不知道该怎么做...

这是 map 的代码:

(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 事件来模拟点击它。这样，信息框将打开以进行标记， map 将在那里居中。

因此，创建一个如下函数:

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");
}

工作 fiddle :https://jsfiddle.net/mow89utv/2/