如何从openstreetmap获取坐标

时间:2019-04-11 10:29:01

标签: javascript openlayers openstreetmap

当我点击地图以输入地址字段时,我试图获取坐标。我不知道要在函数中放入什么内容以获得有关位置的信息!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" 
src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script type="text/javascript" >
var myMap;

function loadOpenLayers(){  

myMap = new OpenLayers.Map("mymap", {});

var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: "basic"},
{});

myMap.addLayer(wms);

myMap.setCenter(new OpenLayers.LonLat(-122.349243, 47.651743));

myMap.zoomTo(6);   
myMap.on('click', function(event) {
 document.getElementById("demo").innerHTML = "Hello World";

});
} 

</script>
</head>
<body onload="loadOpenLayers();">
<div id="mymap" style="width: 620px; height: 460px; border: 1px solid;">
<p id="demo">
</div>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

事物应该已经返回Map事件,该事件在您的投影中具有坐标。试试这样的东西

myMap.on('click', function(event) {
   console.log(event.coordinate);
});

,然后检查控制台中的坐标是否正确。

https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getEventCoordinate

答案 1 :(得分:0)

您正在混合使用OpenLayers 2和OpenLayers 3+代码。 myMap.on('click', function(event) {是OL3 +。如果必须使用OpenLayers 2,则需要

document.getElementById("mymap").onclick = function(event) {
  var lonlat = myMap.getLonLatFromPixel(new OpenLayers.Pixel(event.clientX, event.clientY));
  document.getElementById("demo").innerHTML = lonlat.lon + ' ' + lonlat.lat;
};

但是如果您要开始一个新项目,最好使用最新的OpenLayers 5重新开始。