在以下代码中,我使用Google Maps API V3在地图上添加了自定义控件。

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {

      var myOptions = {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644},
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      //### Add a button on Google Maps ...
      var controlMarkerUI = document.createElement('DIV');
      controlMarkerUI.style.cursor = 'pointer';
      controlMarkerUI.style.backgroundColor = 'blue';
      controlMarkerUI.style.height = '28px';
      controlMarkerUI.style.width = '25px';
      controlMarkerUI.style.top = '11px';
      controlMarkerUI.style.left = '120px';
      controlMarkerUI.title = 'Click to get the coordinates';

   map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlMarkerUI);

}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_KEY_HERE>&callback=initMap"
    async defer></script>
  </body>
</html>


现在,我想在自定义控件上关联一个函数,只需在用户单击地图时返回单击坐标即可。

我可以这样做(无需将功能关联到customcontrol ...)

  google.maps.event.addListener(map, 'click', function (e) {
                  alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
              });


但我想点击我的自定义控件来启用/停用此功能。

建议/例子?

最佳答案

<html>
<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 70%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="map"></div>
<button id="start">Start</button>
<button id="clearClick">Clear</button>
<script>
  var map;
  var listener1;



  function initMap() {

    var myOptions = {
      zoom: 8,
      center: {lat: -34.397, lng: 150.644},
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    //### Add a button on Google Maps ...
    var controlMarkerUI = document.createElement('DIV');
    controlMarkerUI.style.cursor = 'pointer';
    controlMarkerUI.style.backgroundColor = 'blue';
    controlMarkerUI.style.height = '28px';
    controlMarkerUI.style.width = '25px';
    controlMarkerUI.style.top = '11px';
    controlMarkerUI.style.left = '120px';
    controlMarkerUI.title = 'Click to get the coordinates';

    listener1= google.maps.event.addListener(map, 'click', function

      (e) {
      alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
    });
    document.getElementById("clearClick").onclick = function(){
      google.maps.event.removeListener(listener1);
    }
    document.getElementById("start").onclick = function(){
      listener1= google.maps.event.addListener(map, 'click', function

        (e) {
        alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
      });
    }
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlMarkerUI);

  }

</script>

<script>

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"
        async defer></script>
</body>
</html>


有关以下链接的更多参考

https://developers.google.com/maps/documentation/javascript/events

关于javascript - 如何将功能与Google Maps API中的自定义控件相关联?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44573770/

10-11 11:10