Question

我想要实现的是一个地图，有几个（在本例中为三个）按钮，当您单击按钮时，地图会加载带有该按钮位置的标记。所以你可以从一个位置“跳”到另一个位置。

我使用三个独立的函数和eventlisteners但是我认为有一种方法可以将它连接到一个函数吗？工作解决方案在下面的代码示例中被注释掉了......

<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

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

点击多个按钮的功能加载标记在一个谷歌地图javascript

1 个答案: