javascript - OpenLayers 添加标记和弹出窗口

标签 javascript html popup openlayers markers

我在使用 OpenLayers 时遇到问题。 我的工作代码是:

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    //var results = new OpenLayers.Layer.Text("My Points", { location:"./checkIns_0_view.txt", projection: map.displayProjection});
    //map.addLayer(results);

    var query = new OpenLayers.LonLat(-122.2928337167, 37.5549570333).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('http://openlayers.org/dev/img/marker-blue.png', size, offset);
    marker = new OpenLayers.Marker(query, icon);
    markers.addMarker(marker);

    var zoom=16;
    map.setCenter (query, zoom);
  </script>
</body></html>

现在我想添加一个包含一些信息的弹出窗口。我尝试使用几个示例,例如 http://openlayers.org/dev/examples/osm-marker-popup.html 。我想添加这样的内容:

    var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", true);
    map.addPopup(popup);

第一行可以编译,但是当我添加第二行时,浏览器不显示我的 map 。 我认为这可能与查询 lonLat 有关,但我没有必要的 OpenLayers 技能来找出答案。

非常感谢您的回答。

问候

最佳答案

  1. 根据OpenLayers documentation ,您在弹出构造函数中缺少 "Text"true 之间的 anchor 参数。也许这就是你的问题的根源。在弹出窗口的示例中,此参数具有 null 值:

    var popup = new OpenLayers.Popup.FramedCloud("Popup", 
        myLocation.getBounds().getCenterLonLat(), null,
        'We ' +
        'could be here. Or elsewhere.', 
        null,
        true // true if we want a close (X) button, false otherwise
    );
    

    根据您的情况,您可以使用变量图标而不是空值。

  2. 在函数map.addPopup(popup)中,您还应该有第二个参数exclusive。 请参阅 OpenLayers 文档 dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.addPopup 或此方法的定义 here 。我认为使用所有定义的参数是一个很好的做法,因为它经常会产生问题。

希望在添加所有参数后它能够正常工作。 您的工作弹出窗口代码:

var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", null, true);
map.addPopup(popup, false);

关于javascript - OpenLayers 添加标记和弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17259555/

相关文章:

javascript - 如何从具有绝对路径的对象数组构建类似文件系统的 JSON

javascript - 在resolve中使用socket.io实现一次性监听

javascript - 弹出窗口和原始开启器之间的通信

php - 如何记住不同页面的表单值?

javascript - 如何在 JavaScript 中删除字符串中多余的空格?

javascript - 添加 CSS 类以更改 HTML 元素的样式

html - 使用 translateY 滚动元素

css - 元素或 div 之间的随机间隙

javascript - 使 jQuery 弹出关闭按钮延迟后出现

带有弹出式 LI 元素的 CSS、UL 菜单出现在上方横幅上