OpenLayers 学习（五）根据经纬度用Marker在地图上添加标记

最新推荐文章于 2025-06-22 11:51:27 发布

Stonesk

最新推荐文章于 2025-06-22 11:51:27 发布

阅读量1.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： openlayers学习

本文链接：https://blog.youkuaiyun.com/Stonesk/article/details/51616730

这篇博客介绍了如何使用OpenLayers库根据经纬度在地图上添加标记。通过加载OpenLayers库，设置地图选项，创建WMTS图层作为底图，然后利用`OpenLayers.Layer.Markers`创建标记层，并结合JSON数据在指定位置添加标记。示例中展示了在北京位置添加一个名为'分站'的标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <!DOCTYPE html>  
    <html>  
     <head>  
    <title>  
    根据经纬度在地图上添加标记  
    </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <!-- 加载OpenLayers 类库 -->  
    <script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">  
    </script>  
    <style>  
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }  
    </style>  
      
    <script type="text/javascript">  
	var basePath = '198.165.26.54';
	var jsonStr='{"MMSI":"432855000","Long":"116.412","Lat":"39.956"}';
	var shipInfo = eval('(' + (jsonStr == "" ? "[]" : jsonStr) + ')');

function init() {
    var option = { 
    controls: [new OpenLayers.Control.Navigation(), //导航
                new OpenLayers.Control.PanZoomBar(), //放大缩小
    			new OpenLayers.Control.Scale(),
    			new OpenLayers.Control.ScaleLine(),
    			new OpenLayers.Control.Over