谷歌地图的DOM事件没有响应

DOM event of Google Map does not responding

本文关键字：响应 事件 DOM 谷歌地图      更新时间：2023-09-26

Google提供了一些如何在地图上创建自定义图例的示例。这是代码。

var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3><b>View option</b></h3>');
content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>');
content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="faculty"></g><g><text x="26" y="10">Faculty</text></g></svg></div>');
content.push('<div id="sexDiv"><svg height="20" width="200"><g><rect width="15" height="12"class="sex"></g><g><text x="26" y="10">Sex</text></g></svg></div>');
content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="level"></g><g><text x="26" y="10">Level of education</text></g></svg></div>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);

我正试图使用同样来自谷歌的代码使该图例具有交互性（根据用户点击的图例显示数据）。

var sexOpt = document.getElementById("sexDiv");
google.maps.event.addDomListener(sexOpt, 'click', function() {
    window.alert('Sex was clicked!'); /*just to test*/
});

但是，它不听。以前，类和id名称相似，所以我认为这会是一个冲突（即使它显然没有），但它仍然不听。

运行document.getElementById("sexDiv")时，<div id="sex">不在DOM中。一种选择是等待map空闲事件，然后运行该代码。 
google.maps.event.addListenerOnce(map, 'idle', function() {
  var sexOpt = document.getElementById("sexDiv");
  google.maps.event.addDomListener(sexOpt, 'click', function() {
    window.alert('Sex was clicked!'); /*just to test*/
  });
});

概念验证小提琴

代码片段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var legend = document.createElement('div');
  legend.style.backgroundColor = 'white';
  legend.style.padding = '5px';
  legend.id = 'legend';
  var content = [];
  content.push('<h3><b>View option</b></h3>');
  content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>');
  content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="faculty"></g><g><text x="26" y="10">Faculty</text></g></svg></div>');
  content.push('<div id="sexDiv"><svg height="20" width="200"><g><rect width="15" height="12"class="sex"></g><g><text x="26" y="10">Sex</text></g></svg></div>');
  content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="level"></g><g><text x="26" y="10">Level of education</text></g></svg></div>');
  legend.innerHTML = content.join('');
  legend.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);
  google.maps.event.addListenerOnce(map, 'idle', function() {
    var sexOpt = document.getElementById("sexDiv");
    google.maps.event.addDomListener(sexOpt, 'click', function() {
      window.alert('Sex was clicked!'); /*just to test*/
    });
    var genOpt = document.getElementById("general");
    google.maps.event.addDomListener(genOpt, 'click', function() {
      window.alert('General was clicked!'); /*just to test*/
    });
    var facultyOpt = document.getElementById("faculty");
    google.maps.event.addDomListener(facultyOpt, 'click', function() {
      window.alert('Faculty was clicked!'); /*just to test*/
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

相关文章：