通过元素属性获取地址

Question

我有一些 div，每个数据 ID 都有一个特定的地址。然后，我尝试从单击的 div 中获取数据 ID 值，并设置 de geocode 以使地图在地址上居中。但是我不知道如何点击它。

到目前为止我的代码：

<div class="map">

  <div class="btn_mapa" id="1" data-id="San Diego, CA"></div>
  <div class="btn_mapa"  id="2" data-id="Belo Horizonte, MG"></div>
  <div class="btn_mapa"  id="3" data-id="New York, NY"></div>
  <!–– ... many others ... ––>
  <div class="btn_mapa"  id="259" data-id="Atlanta, GA"></div>

  <div id="map-canvas" style="width: 100%; height: 100%;"></div>

</div>


<script src="https://maps.googleapis.com/maps/api/js?key=MYAPI"></script>

<script>

var geocoder;
var map;
var div1 = document.getElementById("1");
var address = div1.getAttribute("data-id");

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  if (geocoder) {
    geocoder.geocode({
      address: address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

我没有测试这段代码，但它应该基本上可以工作。试一试。

<div class="btn_mapa" id="1" data-id="San Diego, CA" onclick='handleClick(this);'></div>

<script>
function handleClick(element) {
  console.log(element.getAttribute('data-id');

}
</scrip>

Answer 2

使用classbtn_mapa向所有<div>添加点击监听器，在那个点击监听器函数中（this是对被点击的<div>), 获取 <div> 的 data-id 属性并对其进行地理编码:

var btn_mapa = document.getElementsByClassName('btn_mapa');
for (var i=0; i<btn_mapa.length; i++) {
  google.maps.event.addDomListener(btn_mapa[i], 'click', function() {
  var address = this.getAttribute('data-id');
  console.log(address);
  geocodeAddress(address);
  });
}
function geocodeAddress(address) {
  if (geocoder) {
  geocoder.geocode({
    address: address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
        map.setCenter(results[0].geometry.location);

      } else {
        alert("No results found");
      }
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

}

proof of concept fiddle

代码片段：

#map-canvas {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="map">
  <div class="btn_mapa" id="1" data-id="San Diego, CA">San Diego</div>
  <div class="btn_mapa" id="2" data-id="Belo Horizonte, MG">Belo Horizonte</div>
  <div class="btn_mapa" id="3" data-id="New York, NY">New York, NY</div>
  <!–– ... many others ... ––>
  <div class="btn_mapa" id="259" data-id="Atlanta, GA">Atlanta, GA</div>
</div>
<div id="map-canvas"></div>
<script>
  var geocoder;
  var map;
  var div1 = document.getElementById("1");
  var address = div1.getAttribute("data-id");

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    var btn_mapa = document.getElementsByClassName('btn_mapa');
    for (var i = 0; i < btn_mapa.length; i++) {
      google.maps.event.addDomListener(btn_mapa[i], 'click', function() {
        var address = this.getAttribute('data-id');
        console.log(address);
        geocodeAddress(address);
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  function geocodeAddress(address) {
    if (geocoder) {
      geocoder.geocode({
        address: address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            map.setCenter(results[0].geometry.location);
          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>

通过元素属性获取地址

Get Address by Element Attribute

javascript

google-maps

google-geocoder

google-geolocation