gpt4 book ai didi

javascript - 单击按钮在 GoogleMap 中移动

转载 作者:行者123 更新时间:2023-11-28 06:22:10 26 4
gpt4 key购买 nike

我正在创建一个商店定位器,其中包含商店列表及其详细信息,此外每个商店都有一个“在 map 上查看”按钮,可让您移动到相应标记并显示一个信息窗口,例如在这个网站上http://www.poundland.co.uk/store-finder/searchResults/

我有这个代码来创建标记:

function createMarker(point, name, address, urladdress, locationNumber,id) {

var image = {
url: "/i/markers/MapIcon.png",
size: new google.maps.Size(48, 55),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(24, 0)
};

var marker = new google.maps.Marker({
position: point,
map: map,
/*shadow: shadow,*/
icon: image,
title: address,
// id:id
});

var infowindow = new google.maps.InfoWindow({
content: name + '<br>' + address + '<br>' + '<a target="_blank" href="http://maps.google.co.uk/maps?f=q&hl=en&q=from:' + homeSpatialInfo.fromAddress + '+to:' + urladdress + '">Directions</a>'
});

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

return marker;
}

我为每个按钮提供与其关联的商店的 ID

<div style="text-align: right; margin-top: 5px;">
<asp:Button ID="viewStoreBtn-133"class="btn btn-default btn-sm viewStoreBtn" runat="server" Text="view on map" style="border-radius: 10px;"/>view on map
</div>

之后我想我将不得不添加一个 onclick 事件监听器,但我不确定在 onclick 函数中编写什么(因为我是新手至此)。

最佳答案

您可以使用 google.maps.event.addListener 进行点击。这是我的例子,我认为它对你有用。

在 initMap 中添加以下代码:

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event);
});

function placeMarker(event) {
var geocoder = new google.maps.Geocoder;
console.log(event.latLng);
var infowindow = new google.maps.InfoWindow();
geocoder.geocode({'location': event.latLng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow.setContent('<div><strong>' + results[0].name + '</strong><br>' +
'<br>' +
results[0].formatted_address + '</div>');
console.log(results[0].geometry.location);
console.log(results[0].geometry.location.lat());
console.log(results[0].name + results[0].formatted_address + results[0].geometry.location.lat() + results[0].geometry.location.lng());
infowindow.open(map, this);
});
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

编辑:

如果你有标记,你可以使用平移功能来移动 View 区域。

google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
}

关于javascript - 单击按钮在 GoogleMap 中移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35429110/

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