如何將函數與Google Maps API中的自定義控件相關聯？

在下面的代碼中，我使用Google Maps API V3在地圖上添加了自定義控件。如何將函數與Google Maps API中的自定義控件相關聯？

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

，但我想激活/在我的自定義控件停用此功能，點擊。

建議/例子？

來源

2017-06-15 Cesare

<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

來源

2017-06-15 17:51:58 Murali

這是很好的去除聽衆使用「清除」按鈕，但是當我點擊「點擊」按鈕時，如何激活監聽器？ – Cesare

我已經更新了我的答案。 – Murali

合併@Murali的答案，這個答案https://gis.stackexchange.com/questions/244132/how-to-associate-function-to-custom-controls-in-google-maps-api/244141#244141，我以這種方式解決了進一步的參考....

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

     var listenerHandle; 

     //Enable-Disable the functionality 
     function show_XY(e){ 
      listenerHandle = google.maps.event.addListener(map, 'click', alert_XY); 
     } 

     function alert_XY(e){ 
     alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng()); 
     } 

     function removeListener(e){ 
      google.maps.event.removeListener(listenerHandle); 
     } 

     function initMap() { 
     var myOptions = { 
      zoom: 8, 
      center: {lat: -34.397, lng: 150.644}, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("map"), myOptions); 

     //### Add a button on Google Maps ... 
     var controlEditUI = document.createElement('DIV'); 
     controlEditUI.id = "controlEditUI"; 
     controlEditUI.style.cursor = 'pointer'; 
     controlMarkerUI.style.backgroundColor = 'blue'; 
     controlEditUI.style.height = '28px'; 
     controlEditUI.style.width = '25px'; 
     controlEditUI.style.top = '11px'; 
     controlEditUI.style.left = '120px'; 
     controlEditUI.title = 'Click to get the coordinates'; 
     map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlEditUI); 

     controlEditUI.addEventListener('click', show_XY); 

     //### Add a button on Google Maps ... 
     var controlTrashUI = document.createElement('DIV'); 
     controlTrashUI.id = 'controlTrashUI'; 
     controlTrashUI.style.cursor = 'pointer'; 
     controlMarkerUI.style.backgroundColor = 'black'; 
     controlTrashUI.style.height = '28px'; 
     controlTrashUI.style.width = '25px'; 
     controlTrashUI.style.top = '11px'; 
     controlTrashUI.style.left = '150px'; 
     controlTrashUI.title = 'Click to set the map to Home'; 
     map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlTrashUI); 

     controlTrashUI.addEventListener('click', removeListener); 

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

來源

2017-06-15 19:33:13 Cesare

如何將函數與Google Maps API中的自定義控件相關聯？

回答

相關問題