javascript - 单击按钮在 GoogleMap 中移动

Question

我正在创建一个商店定位器，其中包含商店列表及其详细信息，此外每个商店都有一个“在 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 函数中编写什么(因为我是新手至此)。

Answer 1

您可以使用 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());
}