![](/img/trans.png)
[英]Angular.js googlemap info window button click is not passing the value?
[英]Move around GoogleMap on button click
我正在创建一个包含商店及其详细信息列表的商店定位器,并且每个商店都有一个“在地图上查看”按钮,该按钮可让您移动到对应的标记并显示一个infowindow
,例如在此网站上http://www.poundland .co.uk /存储取景器/ SearchResult所/
我有以下代码来创建标记:
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
函数中要写什么(因为我对此很onclick
)。
您可以使用google.maps.event.addListener
进行click
。 这是我的示例,我认为它将对您有用。
在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);
}
});
}
编辑:
如果您有标记,则可以使用平移功能移动视图区域。
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.