[英]Move around GoogleMap on button click
I'm creating a store locator with a list of stores and their details, plus each store has a View on Map button which allows you to move to the correspondent marker and displays an infowindow
, like on this website http://www.poundland.co.uk/store-finder/searchResults/ 我正在创建一个包含商店及其详细信息列表的商店定位器,并且每个商店都有一个“在地图上查看”按钮,该按钮可让您移动到对应的标记并显示一个
infowindow
,例如在此网站上http://www.poundland .co.uk /存储取景器/ SearchResult所/
I've got this code to create markers: 我有以下代码来创建标记:
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;
}
I'm giving each button the ID of the store it is associated with it 我为每个按钮提供与其关联的商店的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>
After that I guess I will have to add an onclick
event listener but I'm not sure what to write in the onclick
function (as I'm very new to this). 在那之后,我想我将不得不添加一个
onclick
事件监听器,但是我不确定在onclick
函数中要写什么(因为我对此很onclick
)。
You can use google.maps.event.addListener
for click
. 您可以使用
google.maps.event.addListener
进行click
。 This is my example and i think it will be usefull for you. 这是我的示例,我认为它将对您有用。
In initMap add these codes: 在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);
}
});
}
EDIT: 编辑:
if you have marker you can just use pan function to move view area. 如果您有标记,则可以使用平移功能移动视图区域。
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.