OpenLayers 标记图标问题

2024-04-02

我正在我的网站中创建 OSM 地图,并使用 openlayer 添加一些标记。我的问题是我总是得到相同的标记图标。

 <script type="text/javascript">

 var map = new OpenLayers.Map("heatMap");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    map.setCenter(new OpenLayers.LonLat(-4.0575942987957,54.390175926091) // Center of the map
      .transform(
        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
      ), 6 // Zoom level
    );

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

    var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
    var icon2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset);
    var icon3 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset);

    var lonLat1 = new OpenLayers.LonLat(-4.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var lonLat2 = new OpenLayers.LonLat(-3.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var lonLat3 = new OpenLayers.LonLat(-5.0575942987957,54.390175926091).transform(
                            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                            map.getProjectionObject() // to Spherical Mercator Projection
                            );

    var marker1 = new OpenLayers.Marker(lonLat1);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker1<p>';
    feature.data.overflow = "hidden";

    marker1.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker1.events.register("mousedown", feature, markerClick);

    var marker2 = new OpenLayers.Marker(lonLat2);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker2<p>';
    feature.data.overflow = "hidden";

    marker2.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker2.events.register("mousedown", feature, markerClick);

    var marker3 = new OpenLayers.Marker(lonLat3);
    var feature = new OpenLayers.Feature(markers, lonLat);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
    feature.data.popupContentHTML = '<p>Marker 3<p>';
    feature.data.overflow = "hidden";

    marker3.feature = feature;

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker3.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker1, icon1);

    markers.addMarker(marker2, icon2);

    markers.addMarker(marker3, icon3);

现在的问题是所有三个标记都有相同的图标...有人可以帮助我..


创建标记实例后更改图标。

marker = new ....
var size = new OpenLayers.Size(25, 12);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
marker.icon = new OpenLayers.Icon("marker.png", size, offset);
//UPDATE AGAIN
marker.icon.size = size;
marker.icon.offset = offset;
marker.draw();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

OpenLayers 标记图标问题 的相关文章

  • 快速写出png

    Summary 我想尽快编写一个 png 文件 而不用担心压缩 也就是说 我不太关心文件大小 但我确实关心写入尽可能快地发生 动机 我正在客户端使用 OpenLayers 并在后端使用 python C 制作一个基于 Web 的地图应用程序
  • OpenLayers 动画 getView().fit()

    我一直在研究 openlayers 的动画功能 我可以看到使用缩放到给定点和分辨率是多么简单 view animate center position zoom 11 但我不知道如何制作动画 map getView fit extent m
  • 如何根据缩放级别加载图层?

    我想控制 OpenLayers 中的缩放 当缩放为 3 时 我想加载 KML1 当缩放为 4 时 我想加载 KML2 您能告诉我如何控制缩放事件吗 正如 j freyre 提到的 您应该注册一个函数 该函数会更改 KML 图层的可见性到 z
  • 使用 osmdroid 在 OpenStreet Maps 上制作动画标记

    我正在使用给出的谷歌地图标记动画逻辑here https gist github com broady 6314689 我的标记变得动画 但每次之后marker setPosition newPosition 我需要打电话mapView i
  • 使用 OSMnx 提取约束多边形

    我正在使用 OSMnx 包来解决以下任务 地图上有一个由纬度和经度定义的点 X 我们需要检测包含该点 X 并受到相邻道路约束的多边形 所以基本上点 X 位于多边形内部 相邻道路将是该多边形的边界 到目前为止 我只设法在地图上绘制图形的可视化
  • 如何使用openlayers在浏览器中显示高分辨率图像

    我正在尝试使用 openlayers 5 在浏览器中显示高分辨率图像 我找到了一个有关如何使用 Zoomify 创建图像图块并使用 openlayers 地图渲染它的示例 但我无法将它用于我自己的形象 我对此完全陌生 我问的问题可能很琐碎
  • Overpass api 来查找坐标的速度限制?

    我收到车辆的坐标 我需要找出该车辆所在道路的速度限制 我知道你可以找到某个有界框的最大速度 如下所示 www overpass api de api xapi 最大速度 bbox 5 6283473 50 5348043 5 6285261
  • 使用 osmosis 将 POSTGIS 表转换为 .OSM

    我正在使用 osmosis 0 42 和 PostGIS 2 0 1 并且我正在尝试将一些 postGIS 表导出到 OSM xml 文件 我使用 read pgsql 命令从 postgis 读取 而不是 read apidb 因为它在连
  • 请推荐一个好的 OpenStreetMap 组件 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 在 Openlayers 中单击地图外部时如何激活功能 + 弹出窗口?

    我正在重新解析已加载到地图上的 KML 类似于此处的示例 http openlayers org dev examples sundials html http openlayers org dev examples sundials ht
  • 打开街道地图 (osmdroid) 在 PC 中显示灰色瓷砖而不是地图

    我正在使用 osmdroid 在我的应用程序中获取开放的街道地图 我已经使用所需的 jar osmdroid 构建了我的项目 并在清单中添加了所有需要的权限 但是当我尝试在 android 模拟器 adt eclipse 中调试我的应用程序
  • 使用 Ordnance Survey/Openlayers api 拖动标记

    我创建了一个网站使用 Ordnance Survey 我认为这称为 OpenSpace 生成的基于 OpenLayers 的 api 我已经有了它 因此您可以单击地图来添加标记 然后我希望能够单击标记并将其拖动到地图周围 有没有一种简单的方
  • 如何将距离从度转换为米?

    我将 OpenLayers 与普通墨卡托地图一起使用 并尝试通过查找经纬度中的点网格来对边界框进行采样 bbox 以 latlon 表示 例如 48 1388 15 3616 55 2057 3 9359 我可以定义一个距离degrees
  • 如何在本机 Android 应用程序开发中使用 OpenStreetMap [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 您好 我的 Android 手机中有默认的 Android 虚拟内容 本机应用程序构建 现在我需要使用
  • openlayers 地图未在 vuejs 中显示

    以下代码片段是一个 vue 文件 它不会生成任何错误 但 openlayers 地图不会显示 我尝试了 openlayers 的两个 vue 插件 但似乎没有按照我的需要工作 在 vue 之外 代码可以工作 我使用 npm install
  • 如何以编程方式移动 OpenLayers Vector?

    API 文档为OpenLayers Feature Vector http dev openlayers org apidocs files OpenLayers Feature Vector js html说 Vector 本身根本没有方
  • 使用 OpenLayers 动态添加自定义标记到地图

    我想让用户在地图上添加自定义标记以及每个标记的描述 任何提示 任何教程的链接都会非常有用 您可以注册一个函数来在地图上 点击 事件 当用户单击它时 会自动添加该标记 尝试这样的事情 map is your map created using
  • Flutter 和 Openlayers - 包括 flutter 中的 js 库

    来自基于 js cordova 的跨平台领域 我最近正在深入研究 flutter 所以我想知道直接使用 flutter 中的各种 js 库的选项 更具体地说 我有兴趣在 flutter 中使用 openlayers 库来创建具有各种绘图和编
  • 使用 XAML 地图控件在基于 C# VS2013 WPF 的 OpenStreetMap 的地图上添加热图图层

    我正在尝试使用 XAML MAP 控件 https xamlmapcontrol codeplex com https xamlmapcontrol codeplex com 在基于 C VS2013 WPF 的 OpenStreetMap
  • 如何从 OpenStreetMap 道路中去除水?

    我想从 OpenStreetMap 获取旧金山的轮廓 有一个SF 的关系 http www openstreetmap org relation 111968 但它含有大量的水 这使得城市居民无法识别 OSM 中是否有更好的旧金山多边形 有

随机推荐

  • MongoDB C# 连接/断开(官方驱动程序)

    请告诉我如何通过官方 C 驱动程序连接 断开到 MongoDB 问题很简单 乍一看问题很微不足道 但是 1 我是否需要自己调用Disconnect方法 或者它会被诸如Dispose之类的方法关闭 2 每次需要向Mongo发出请求时都需要连接
  • statsmodel 预测开始和结束索引

    我正在尝试实现 statsmodel 包中的预测功能 prediction results predict start 1 end len test exog test 输入 测试和输出预测的日期不一致 前者为2012年1月4日至2012年
  • getter 和 setter 的 Google 样式指南属性

    我对其中的一项建议感到好奇有关属性的 Google Python 风格指南 https google github io styleguide pyguide html Properties 他们在其中给出了以下示例 class Squar
  • SQLite 与 Android NDK

    是否可以在 Android 手机上将 SQLite 与 C 结合使用 我还没有找到任何关于如何实现这一点的文档 只需从以下位置下载 SQLite3 合并源文件 http www sqlite org download html http w
  • 如何将 Xcode 项目转换为使用 ARC(自动引用计数)?

    当我运行 Convert to Obj C 时 它首先运行预检查 我希望预检查忽略一些文件 并且我认为可以在这些文件上设置编译器标志 fno objc arc 但预检查阶段似乎忽略了该标志 并重置了它 所以我真的不知道如何超越预检查 预检查
  • 按名称调用 Django celery 任务

    我需要从models py调用一个celery任务 在tasks py中 唯一的问题是 tasks py导入models py 所以我无法从models py导入tasks py 有没有什么方法可以仅使用名称来调用 celery 任务 而无
  • 将多个数组作为参数传递给 Bash 脚本?

    我看过 但只看到了脚本中传递的一个数组的答案 我想将多个数组传递给 bash 脚本 该脚本将它们分配为单独的变量 如下所示 myScript sh array1 array2 array3 这样 var1 array1 and var2 a
  • Java 和 C++ 中的简单变量

    我在一些资料中看到这样一句话 在 Java 中 简单数据类型 例如 int 和 char 的运行方式与 C 中一样 我想知道 Java 和 C 中它们实际上是不同的 在C 中 像Java中的基元这样的简单变量也被分配了一个内存地址 因此C
  • 使用 SQL 获取每小时统计信息

    我们有一张桌子 名字 员工注册 有字段 employeeNo employeeName Registered on Here 注册日期是一个时间戳 我们要求在几天内按小时进行注册 例如 08 年 1 月 1 日 12 点 下午 1 点 15
  • C# 为 ++ 运算符生成 IL - 前缀/后缀表示法何时以及为何更快

    由于这个问题是关于增量运算符和前缀 后缀表示法的速度差异 我将非常仔细地描述这个问题 以免 Eric Lippert 发现它并激怒我 有关我为什么要问的更多信息和更多详细信息 请访问http www codeproject com KB c
  • Silverlight:拉伸到 StackPanel 中的剩余空间

    我有一个带有两个元素的垂直 StackPanel 一个按钮和一个列表框 如何让列表框拉伸到剩余页面高度
  • 将一个 Artifactory 连接到另一个 Artifactory

    我们的设置包括一个全公司范围的 Artifactory 它保存内部构建的工件 并出去获取公开可用的工件 我正在尝试在我们的位置建立一个本地 Artifactory 它将通过常规互联网获取公开可用的工件 但会连接到公司范围内的 Artifac
  • Python open("x", "r") 函数,我如何知道或控制文件应该具有哪种编码?

    如果 python 脚本使用open filename r 函数打开并随后读取文本文件的内容 我如何知道该文件应该具有哪种编码 请注意 由于我是从自己的程序执行此脚本 因此如果有任何方法可以通过环境变量来控制它 那么这对我来说就足够了 顺便
  • Python 中子类化 string.Template 的示例?

    尽管我在文档中看到了多次这样做的参考 但我还没有找到在 Python 中子类化 string Template 的好例子 网上有这方面的例子吗 我想将 更改为不同的字符 并且可能更改标识符的正则表达式 来自蟒蛇docs http docs
  • 谷歌应用程序引擎中的 OAuth

    我正在尝试在 python 上的谷歌应用程序引擎中实现 Oauth 对于我的应用程序 我使用 gae 会话和我的模型来验证用户身份 这对我来说会更有帮助 如果你能提供一些例子 您可能想查看以下资源 The App Engine OAuth
  • 如何测量 Spark 上查询的执行时间

    我需要测量 Apache Spark Bluemix 上查询的执行时间 我尝试过的 import time startTimeQuery time clock df sqlContext sql query df show endTimeQ
  • iOS:跨viewControllers在导航栏下方添加视图

    我有一个这样的项目 但我试图弄清楚如何在整个导航栏的导航栏下方添加横幅 以便在需要时可以将其隐藏 你们中有人知道我该怎么做吗 在主视图控制器中实现协议UINavigationControllerDelegate并在选择器中navigatio
  • in_array() 无法按预期工作[重复]

    这个问题在这里已经有答案了 对于这个数组 options Array 0 gt 0 1 gt 1 2 gt 2 PHP 返回 TRUE this gt assertTrue in array Bug options TRUE this gt
  • .NET 的 SFTP 库 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • OpenLayers 标记图标问题

    我正在我的网站中创建 OSM 地图 并使用 openlayer 添加一些标记 我的问题是我总是得到相同的标记图标