在点击按钮时在谷歌地图周围移动

Move around GoogleMap on button click

本文关键字：周围 移动 谷歌地图 按钮      更新时间：2023-09-26

>我正在创建一个带有商店列表及其详细信息的商店定位器，此外，每个商店都有一个"在地图上查看"按钮，可让您移动到相应的标记并显示infowindow，就像在这个网站上一样 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进行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());
}
相关文章：