gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 22:55:54 24 4
gpt4 key购买 nike

希望有好心人可以帮助我。我没有足够的 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
});
};

最佳答案

看来您在 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/

关于javascript - 谷歌地图列表类似于 Airbnb,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37616274/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com