使用OpenLayers动态添加自定义标记到地图

Question

使用OpenLayers动态添加自定义标记到地图

openlayers

13

我希望让用户在地图上添加自定义标记，并为每个标记添加描述。有什么提示或链接任何教程都会非常有用。

- Shreyas

2个回答

5

我尝试了@Fran的解决方案，但对我没用。所以我改编了这个来自OpenLayers的例子，以便我可以达到两个目标：

save latitude and longitude of marker position

place a marker by clicking on the openlayers map

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>MousePosition Control</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            var map = new OpenLayers.Map('map');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");
            map.addLayers([layerOSM]);
            if (!map.getCenter()) map.zoomToMaxExtent();
            map.events.register("mousemove", map, function(e) { 
                var position = this.events.getMousePosition(e);
                OpenLayers.Util.getElement("coords").innerHTML = 'MOUSE POSITION '+position;
                var lonlat = map.getLonLatFromPixel( this.events.getMousePosition(e) );
                OpenLayers.Util.getElement("lonlatTG").innerHTML = 'lonlat => '+lonlat;
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf;
                OpenLayers.Util.getElement("lonlatDouble").innerHTML = 'lonlat => '+lonlat;
            });

            map.events.register("click", map, function(e) {
                var position = this.events.getMousePosition(e);
                var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png');   
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                alert ('lonlatTrans=> lat='+lonlatTransf.lat+' lon='+lonlatTransf.lon+'\nlonlat=>'+lonlat+'\nposition=>'+position);
                var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
                markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon));
                map.addLayer(markerslayer);
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
    </script>
  </head>  

  <body onload="init()">
    <h1 id="title">MousePosition Control</h1>
    <div id="tags">coordinate</div>
    <p>Click on map and create marker</p>
    <div id="map" class="smallmap"></div>
    <div id="coords"></div>
    <div id="lonlatTG"></div>
    <div id="lonlatTrans"></div><br/>
    <p>
    see how, even though we did NOT transform [lonlat],
    <br/>it was nevertheless transformed
    </p>
    <div id="lonlatDouble"></div>

  </body>
</html>

关于在此简单示例中使用的LonLat的TRANSFORM方法，有一些需要注意的事项：当您将 [ .transform(projection1, projection2) ] 应用于任何LonLat时，所有LonLat对象都会被转换。

尝试调整某些命令的顺序，您就会明白我的意思。

对于可拖动标记，this example has it all。

- tony gil

2

你是否意识到在你的示例中，每添加一个新标记，都会创建一个新的“标记”图层？这并不是很好的做法。更好的解决方案是在上面的代码块中创建一次。否则，这是非常好的解决方案，谢谢你。 - Tomas Tomecek

你说得完全正确。这个好像被忽略了。谢谢提醒！ - tony gil

2

你好，能否解释一下你检索到的不同经纬度之间的区别？谢谢。 - rikket

@rikket，我不是很明白你的问题——你能否更具体一些？你是指经纬度对及其投影之间的区别吗？ - tony gil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fran Verona · Accepted Answer

您可以在地图上注册“click”事件的函数。当用户单击时，标记会自动添加。

尝试使用以下代码：

// 'map' is your map created using new OpenLayers.Map(options)

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

map.events.register("click", map, function(e) {
      //var position = this.events.getMousePosition(e);
      var position = map.getLonLatFromPixel(e.xy);
      var size = new OpenLayers.Size(21,25);
   var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
   var icon = new OpenLayers.Icon('images/mark.png', size, offset);   
   var markerslayer = map.getLayer('Markers');

   markerslayer.addMarker(new OpenLayers.Marker(position,icon));

   });

很简单，但我想你能理解它 :)