嘗試在單擊事件上綁定openlayers映射時出錯

Question

我想在點擊地圖時從openlayers地圖對象中獲取lat / long。 我試過用Map.on（'click'，function（e）{}）來做

但是會發生錯誤。 從控制台我捕獲了以下內容：

“未捕獲的TypeError：map.on不是函數”

---

碼：

  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>

    var map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( 114.5931866, -3.3171685 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));
    map.setCenter (lonLat, zoom);


    map.on('click',function(evt){
      var coords = ol.proj.toLonLat(evt.coordinate);
      var lat = coords[1];
      var lon = coords[0];
      var loctxt = "latitude : " + lat + " Longitude: "+ lon;
      alert(loctxt);
    });


  </script>

</body></html>

我預計它會在點擊地圖上顯示latlong的警報

Answer 1

您共享的錯誤是訪問類似函數的屬性時發生的典型js錯誤。 兩件事情：

1. 拉出與您復制代碼的map.on方法對應的openlayers版本。 否則，除非故意使用舊版本，否則請嘗試引用最新的OpenLayers庫 。 似乎<script src="http://www.openlayers.org/api/OpenLayers.js"></script>加載的資產是來自2013年的OpenLayers 2.13.1。

2. 在5.3.0中，使用MousePosition控件將根據OpenLayers文檔站點中提供的鼠標位置演示提供相應的緯度/經度。 他們的示例提供了如何在鼠標位置更改時定位元素，您可以在單擊事件期間使用該信息。 下面是我提供的示例，當添加到鼠標位置演示時，單擊log lat / long到控制台：

   document.getElementById("map").addEventListener('click', function(e) { console.log(document.getElementById("mouse-position").childNodes[0].innerHTML) });