在一个google map javascript中点击多个按钮加载标记的函数

Question

我想要实现的是一个带有几个(在本例中是三个)按钮的地图，当你点击一个按钮时，地图会加载一个带有该按钮位置的标记。所以你可以从一个地方“跳”到下一个地方。

我使用三个独立的函数和事件侦听器来工作，但我认为有一种方法可以将所有这些都连接到一个函数中。工作解决方案在下面的代码示例中被注释掉了...

<div id="floating-panel">
<input id="address-1" class="address" value="Paris" type="button">
<input id="address-2" class="address" value="London"  type="button">
<input id="address-3" class="address"  value="New York" type="button">

​

​

var address = null;

function initMap() {    

        var geocoder = new google.maps.Geocoder();

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: @MapZoom,
            center: { lat: @MapCenterLat, lng: @MapCenterLng}
    });

    document.getElementByClassName('address').addEventListener('click', function () {
            address = this.value();
            geocodeAddress(geocoder, map);
    });

        //document.getElementById('address-1').addEventListener('click', function () {
        //    geocodeAddress1(geocoder, map);
        //});
        //document.getElementById('address-2').addEventListener('click', function () {
        //    geocodeAddress2(geocoder, map);
        //});
        //document.getElementById('address-2').addEventListener('click', function () {
        //    geocodeAddress3(geocoder, map);
        //});

 }

function geocodeAddress(geocoder, resultsMap) {

    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

//function geocodeAddress1(geocoder, resultsMap) {

//    geocoder.geocode({ 'address': address }, function (results, status) {
//        if (status === 'OK') {
//            resultsMap.setCenter(results[0].geometry.location);
//            var marker = new google.maps.Marker({
//                map: resultsMap,
//                position: results[0].geometry.location
//            });
//        } else {
//            alert('Geocode was not successful for the following reason: ' + status);
//        }
//    });
//}
//function geocodeAddress2(geocoder, resultsMap) {

//    geocoder.geocode({ 'address': address }, function (results, status) {
//        if (status === 'OK') {
//            resultsMap.setCenter(results[0].geometry.location);
//            var marker = new google.maps.Marker({
//                map: resultsMap,
//                position: results[0].geometry.location
//            });
//        } else {
//            alert('Geocode was not successful for the following reason: ' + status);
//        }
//    });
//}
//function geocodeAddress3(geocoder, resultsMap) {

//    geocoder.geocode({ 'address': address }, function (results, status) {
//        if (status === 'OK') {
//            resultsMap.setCenter(results[0].geometry.location);
//            var marker = new google.maps.Marker({
//                map: resultsMap,
//                position: results[0].geometry.location
//            });
//        } else {
//            alert('Geocode was not successful for the following reason: ' + status);
//        }
//    });
//}

Answer 1

我在你的代码中得到了一个javascript错误：Uncaught TypeError: document.getElementByClassName is not a function。document.getElementByClassName不存在。该函数的名称是document.getElementsByClassName (复数)，它返回一个DOM元素数组。通过数组添加单击侦听器的过程(或使用带有适当选择器的jQuery )。此外，this.value也不是一个函数(将this.value()更改为this.value)。

var elems = document.getElementsByClassName('address');
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', function() {
    geocodeAddress(this.value, geocoder, map);
  });
};

function geocodeAddress(address, geocoder, resultsMap) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

proof of concept fiddle

代码片段：

​

var geocoder;

function initMap() {
  geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 37.4419,
      lng: -122.1419
    }
  });

  var elems = document.getElementsByClassName('address');
  for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', function() {
      geocodeAddress(this.value, geocoder, map);
    });
  };
}

function geocodeAddress(address, geocoder, resultsMap) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <input id="address-1" class="address" value="Paris" type="button" />
  <input id="address-2" class="address" value="London" type="button" />
  <input id="address-3" class="address" value="New York" type="button" />
</div>
<div id="map"></div>

​