我想讓用戶在地圖上添加自定義標記,併爲每個標記添加描述。任何提示,任何教程的鏈接將非常有用。使用OpenLayers動態添加自定義標記到地圖
12
A
回答
19
您可以在地圖上註冊一個函數以'點擊'事件。當用戶點擊它時,標記會自動添加。
嘗試是這樣的:
// '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));
});
很簡單,但我認爲你可以把它理解:)
5
我試圖@Fran的解決方案,但它沒有爲我工作。所以我適應this example from openlayers,這樣我可以做到兩兩件事:
- 保存的標記位置的經度和緯度
地方標記通過點擊的OpenLayers地圖
<!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
相關問題
- 1. 如何使用JSON座標將標記添加到OPENLAYERS地圖?
- 2. Android - 動態自定義地圖標記
- 3. 使用API v2將自定義標記添加到Google地圖
- 4. 添加動態標記到地圖
- 5. 如何將自定義標記圖標添加到Google地圖?
- 6. Openlayers自定義標記
- 7. 如何使用自定義src動態添加腳本標記?
- 8. 將自定義標記添加到Google地圖
- 9. 添加自定義標記到地圖 - Android
- 10. 無法將標記添加到自定義瓷磚地圖
- 11. 無法將自定義標記添加到Google地圖(JS)
- 12. 使用Leaflet.js創建自定義標記在地圖上添加多個標記
- 13. 谷歌地圖動態添加標記
- 14. 向Google地圖動態添加標記
- 15. Openlayers放大到自定義地圖
- 16. 使用自定義標記而不是默認標記(Openlayers)
- 17. 自定義地圖標記
- 18. 圖像動態地添加到自定義的吐司
- 19. OpenLayers不添加標記到我的地圖
- 20. 將自定義圖像(或標記顏色)添加到標記(使用markerCluster)
- 21. 如何將自定義HTML地圖標記添加到諾基亞HERE地圖?
- 22. 使用Mapbox添加自定義圖標和標記數據
- 23. 將地圖添加到地圖時使用自定義註釋
- 24. 在openlayers地圖上水平添加兩個自定義按鈕
- 25. Openlayers在地圖上添加自定義div
- 26. (React ES6)動態添加模態觸發器到地圖標記
- 27. Netsuite - 將動態記錄數添加到自定義記錄中?
- 28. 如何添加自定義標記圖像谷歌靜態地圖
- 29. 自定義Google地圖標記圖標
- 30. 如何動態地將視圖添加到自定義光標適配器..?
你知道的事實是,在你的榜樣,你正在創建每個新增標誌新的圖層「標誌」的?那不太好。更好的解決方案是在上面的塊中創建一次。否則,這是非常好的解決方案,謝謝你。 – SummerBreeze 2013-04-15 19:06:43