通过事件获取坐标值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../../lib/include-openlayers-local.js"></script>
  9.     <script src="../../js/Tian.js"></script>
  10. </head>
  11. <body>
  12.     <div id="map_container"></div>
  13.     <script>
  14.         const map = new ol.Map({
  15.             target:"map_container",
  16.             layers:[TianDiMap_vec,TianDiMap_cva],
  17.             view:new ol.View({
  18.                 center:[114,30],
  19.                 projection:'EPSG:4326',
  20.                 zoom:4
  21.             })
  22.         })
  23.         map.on("singleclick",function(e){
  24.             console.log(e.coordinate)
  25.         })
  26.     </script>
  27. </body>
  28. </html>

地图事件的激活和移除

  1. <body>
  2.     <button onclick="active()">激活地图事件</button>
  3.     <button onclick="remove()">移除地图事件</button>
  4.     <div id="map_container">
  5.     </div>
  6. <script>
  7.     var map = new ol.Map({
  8.         target:"map_container",
  9.         layers:[gaode],
  10.         view:new ol.View({
  11.             projection:'EPSG:4326',
  12.             center:[114.30,30.50],
  13.             zoom:4
  14.         })
  15.     })
  16.     function active(){
  17.         map.on("click",handleMap)
  18.     }
  19.     function remove(){
  20.         map.un("click",handleMap)
  21.     }
  22.     function handleMap(e){
  23.         console.log(e.coordinate)
  24.     }
  25. </script>