OpenLayers adding markers with popups as features.
2008-09-19 15:38
302 查看
I need to be able to dynamically create and add markers to my
map, each with it's own pop up. Had some trouble getting it to work.
I could create markers and remove them and I could handle an event for
a marker but the examples really directly associated contents of a popup[/b]
with one method that was tied to one marker. So adding several
markers with their own pop up details dynamically from a function was
not as easy or as obvious as I thought.
The
examples were not really helping me with what I needed. There are
examples to create markers and examples to manually create markers with
popups[/b] but with hard-coded content in the pop
ups. Some of the examples I found based on xml files didn't really
apply either, though in the future they may.
I came up with this and it works.. so here it is for anyone else needing the same kind of thing.
function addMarker(pLon, pLat, pPopUpText) {
// setup the icon
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var theIcon = theIcon = new OpenLayers.Icon('img/marker.png', size, offset);
// set the popup[/b] size.. static for now. var theSize = new OpenLayers.Size(350, 200);
// create a feature.
var feature = new OpenLayers.Feature( featureLayer, new OpenLayers.LonLat(pLon, pLat),
{icon: theIcon, popupSize[/b]: theSize, popupContentHTML[/b]: pPopUpText});
// create the marker and popup[/b]
feature.createMarker();
feature.createPopup(true);
// hide the popup[/b] to start.
feature.popup[/b].hide();
// add the popup[/b] and marker to the map. theMap.addPopup(feature.popup[/b]);
markerLayer.addMarker(feature.marker);
// toggle the popup[/b].
feature.marker.events.register("mousedown", feature, function (evt) {
feature.popup[/b].toggle();
OpenLayers.Event.stop(evt);
});
}
When you want to remove a marker you have to remove the marker from the marker layer, destroy the pop up and then the feature.
Thoughts on this?
Works really well for me but is there a more appropriate way to use the Feature for creating markers and associated popups[/b]?
Looks like Vector will become the way to do it in the future but
right now the createMarker and createPopup methods for vector are just
stubbed out functions that return null.
As I said you use OpenLayers.Layer.Vector so you don't use
OpenLayers.Feature but OpenLayers.Feature.Vector, which has a move()
method, at least in trunk. Eric
map, each with it's own pop up. Had some trouble getting it to work.
I could create markers and remove them and I could handle an event for
a marker but the examples really directly associated contents of a popup[/b]
with one method that was tied to one marker. So adding several
markers with their own pop up details dynamically from a function was
not as easy or as obvious as I thought.
The
examples were not really helping me with what I needed. There are
examples to create markers and examples to manually create markers with
popups[/b] but with hard-coded content in the pop
ups. Some of the examples I found based on xml files didn't really
apply either, though in the future they may.
I came up with this and it works.. so here it is for anyone else needing the same kind of thing.
function addMarker(pLon, pLat, pPopUpText) {
// setup the icon
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var theIcon = theIcon = new OpenLayers.Icon('img/marker.png', size, offset);
// set the popup[/b] size.. static for now. var theSize = new OpenLayers.Size(350, 200);
// create a feature.
var feature = new OpenLayers.Feature( featureLayer, new OpenLayers.LonLat(pLon, pLat),
{icon: theIcon, popupSize[/b]: theSize, popupContentHTML[/b]: pPopUpText});
// create the marker and popup[/b]
feature.createMarker();
feature.createPopup(true);
// hide the popup[/b] to start.
feature.popup[/b].hide();
// add the popup[/b] and marker to the map. theMap.addPopup(feature.popup[/b]);
markerLayer.addMarker(feature.marker);
// toggle the popup[/b].
feature.marker.events.register("mousedown", feature, function (evt) {
feature.popup[/b].toggle();
OpenLayers.Event.stop(evt);
});
}
When you want to remove a marker you have to remove the marker from the marker layer, destroy the pop up and then the feature.
Thoughts on this?
Works really well for me but is there a more appropriate way to use the Feature for creating markers and associated popups[/b]?
Looks like Vector will become the way to do it in the future but
right now the createMarker and createPopup methods for vector are just
stubbed out functions that return null.
As I said you use OpenLayers.Layer.Vector so you don't use
OpenLayers.Feature but OpenLayers.Feature.Vector, which has a move()
method, at least in trunk. Eric
相关文章推荐
- openwrt/LEDE打印信息: br-lan: received packet on eth0 with own address as source address
- openlayers features 无法拖动
- python文本读写,with open as
- OpenLayers Labeled Features Example
- python中with open as结构最好不要嵌套使用
- Python--使用json.dumps 将 json 格式的数据写到文件里--with open as f
- python的with open as f
- Working With OpenLayers(Section 1: Creating a Basic Map)
- Python文件操作,with open as追加文本内容实例
- openlayers with Google maps 简单教程
- python之with open as
- 用stringByAddingPercentEncodingWithAllowedCharacters取代CFURLCreateStringByAddingPercentEscapes
- How to contribute to open source with idea
- sql with as用法详解
- With temp as---sql语句用法 转
- Failed to resolve: com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+
- odoo 错误 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:
- Using Apache Web Server with Jboss AS 7
- XMPP(二)-基于asmack+openfire的安卓客户端(仿QQ)的介绍以及个人心得
- 报错android.util.AndroidRuntimeException: You cannot combine custom titles with other title features