时间戳

首页 > 解决方案 > 尝试在点击事件上绑定 openlayers 地图时出错

javascript - 尝试在点击事件上绑定 openlayers 地图时出错

问题描述

单击地图时，我想从 openlayers 地图对象中获取纬度/经度。我试过用 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 的警报

标签： javascripthtmlopenlayers

解决方案

您分享的错误是访问函数等属性时发生的典型 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 文档站点中提供的鼠标位置演示提供相应的纬度/经度。他们的示例提供了如何在鼠标位置更改时定位元素，您可以在单击事件期间使用该信息。下面是我提供的一个示例，当添加到鼠标位置演示时，单击日志纬度/经度到控制台：

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

推荐阅读