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

最新推荐文章于 2024-04-28 16:52:10 发布
最新推荐文章于 2024-04-28 16:52:10 发布
阅读量1.3w 收藏 10
点赞数 3
分类专栏： openlayers学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stonesk/article/details/51616730
版权 
    <!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.Nav
最低0.47元/天 解锁文章
Stonesk
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
117：vue+openlayers: 实时显示zoom，并显示左下、左上、右上、右下的坐标 （ 示例代码 ）
大剑师兰特的GIS世界
09-03 718
本示例的目的是介绍演示如何在vue+openlayers中显示窗口中地图的左上、左下、右上、右下的坐标信息，并实时显示zoom的值。这里用到了moveend的事件。
【Vue3】openlayers加载瓦片地图并手动标记坐标点
最新发布
qq_38196449的博客
04-29 907
我们这里用vue/cli创建，我用的node版本是18.12.1。 创建前可以先配置下镜像源：npm config set registry https://registry.npmmirror.com
webgis原理剖析系列-以openlayers为例 -03以 canvas来绘制地图，并绘制到固定的区域
A873054267的博客
04-04 783
上一节写到用canvas来绘制地图，但是没有画成与demo一致的效果。起初观察感觉是用的padding或者margin什么的。后来看代码发现canvas的宽高与map承载元素的宽高相同。因此学习了如何用js来获取元素的宽高，并赋值给canvas。为了让元素居中，动态计算canvas的绘制点，并实现了在横轴方向上的重复。（这里即可开放一个参数，是否重叠绘制，也就是warpX） <!DOCT...
openlayers加载瓦片地图并手动标记坐标点
qq_38196449的博客
04-28 563
这里面有个注释掉的方法，读者可以打开试试，其实就是标记的时候打印经纬度，一般这个值我们都用来存储数据库中。将ol.js、ol.css放在根目录下，当然还有你的瓦片地图也放在根目录下。创建一个项目，普通原生前端项目就行。marker.png是标记坐标点的。
vue框架用OpenLayers实现地图裁剪，定位
qq_35371821的博客
07-24 2531
由于做大屏，公司想简单的做一个地图显示只想显示湖北省的地图 于是就有了下面的骚操作 个人记录 html <!-- 地图显示容器--> <div id="map" class="amap-page-container"></div> <!-- maker点击显示坐标信息--> <div id="makerAlert" class="makerAlert"> <div class="maker-t"> &
OpenLayers 点击显示经纬度Demo
林恒的博客
06-17 1358
这里给大家分享我在OpenLayers地图开发工作中总结出的一下代码和注意点，希望对大家有所帮助 效果如下： 核心代码展示：附带讲解注释 var map = new ol.Map({ // 初始化地图 target: 'map',// 选择地图对象 layers: [ new ol.layer.Tile(...
GIS地图瓦片、坐标转换基本概念
unit666的博客
07-09 6525
什么是地图瓦片？ 地图瓦片是包含了一系列比例尺、一定地图范围内的地图切片文件。地图瓦片按照金字塔结构组织，每张瓦片都可通过级别、行列号唯一标记。在平移、缩放地图时，浏览器根据金字塔规则，计算出所需的瓦片，从瓦片服务器获取并拼接。地图瓦片，是一种改善地图浏览用户体验的优化策略。 随着测绘技术的发展，地图数据的体量越来越大，一般情况下，电子地图生成地图瓦片（以下简称切图）少则需要几天，多则一个月乃至更长时间。如何才能高效地生成地图瓦片，是众多技术人员共同关心的问题。 瓦片地图和缩放级别 一幅精确到街
openlayers实现本地图片作为背景，添加marker标记
06-09
这个例子展示了如何使用OpenLayers创建一个简单的地图应用，将本地图片作为背景，并在地图上添加marker标记。你可以根据自己的需求修改这些代码，例如更改图片和标记的URL，或者调整地图的视图和标记的位置。同时，...
根据经纬度对离线地图进行标点示例（未从后台返回数据）
04-15
在本案例中，JavaScript代码会读取预先设定的经纬度，并在地图上创建标记。这些经纬度可能以数组或其他数据结构的形式存储，用来确定标记的位置。 HTML是构建网页的基础，用于定义页面结构。在这个示例中，HTML将...
Openlayers绘制地图标注
10-14
在OpenLayers中绘制地图标注是将特定的信息或者兴趣点（POI）以图标或文字的形式在地图上清晰呈现的关键操作。这有助于用户更好地理解和解析地图上的数据。以下是对OpenLayers中绘制地图标注的详细说明： 1. **标注...
pin-mapper:在地图上显示图钉
06-09
在本项目中，JavaScript被用来在地图上添加和操作图钉，提供用户友好的交互体验。 【描述】尽管描述中提到“TODO：写一个自述文件”，这意味着项目可能还未包含详细的说明文档，但我们可以通过通常的JavaScript地图...
js-map:在地图上显示您的IP国家/地区名称的位置
03-30
5. 在地图上创建一个标记（marker）并在该坐标位置显示。 6. 应用CSS样式使地图与页面其他元素协调，并确保地图交互友好。 在实际项目中，还可能需要考虑用户隐私问题，确保合规获取和使用IP信息。此外，对于动态...
openlayers 添加天地图经纬度、墨卡托矢量底图瓦片
qq_34870529的博客
07-02 1618
1：经纬度底图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>
OpenLayers自适应设置地图缩放级别 - 根据一系列的多边形
热门推荐
qq_33048657的博客
07-15 1万+
注：本文章致力于解决openlayers的地图范围自适应设置，根据多幅遥感影像的经纬度坐标范围。预计阅读时间：5min所谓地图范围自适应设置，也就是自动设置地图的view center以及zoom level。前言：最近开发网页端的数据查询系统，使用到openlayers作为地图框架开发。前端开发语言：HTML + CSS + JS; 使用openlayers 版本: 4.6.5关于openlay...
根据经纬度画区域python_OpenLayers实现根据经纬度范围在地图上定位并画出区域...
weixin_39819661的博客
12-08 2646
昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。尝试1：在得到经纬度(四个点，分别是东经，西经，南纬，北纬)，根据上述的经纬度取区域中心点的经纬度，然后根据这个中心...
openlayers通过坐标点画出一块区域
weixin_42476786的博客
11-23 3089
直接上代码： 其中的文件是json格式的本地文件，本地文件里坐标太多了，所以将里面的所需要的坐标匹配出来，然后写成json格式， 这样就通过坐标画出面了。 $.getJSON('../../scripts/shanxi-city.geo.json', function (city) { angular.forEach(city.features, function ...
Vue+Openlayer实现点击地图添加图标要素信息，编辑点位信息
08-31 2508
效果图： 实现代码： <template> <div> <div id="map" ref="map" style="width: 100vw; height: 100vh" /> <div id="overlay-box" /> </div> </template> <script> import "ol/ol.css"; import TileLayer from "ol/layer/.
搭建基于瓦片的离线地图应用
抱朴守拙
05-15 4527
https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames 本文会介绍瓦片地图应用中有关瓦片文件的命名约定。 瓦片是一个个精度为 256x256 像素的 PNG 文件； 瓦片文件存储路径的格式为：/zoom-level/x/y.png； 提供瓦片的服务称为瓦片服务器，不同的瓦片服务器，获取瓦片文件的 url 会有些差异，但整体相似，例如： 瓦片服务 URL 格式 zoom 等级 OSM ‘standard’ style http://
BaiduMap 右键一个marker获得其经纬度
banan4805的博客
12-30 115
var marker = new BMap.Marker(point); var playVideo = function(e,ee,marker){ //alert(marker.point.lng + "," + marker.point.lat); var x=marker.point.lng; var y= marker.point.lat...
openlayers百度地图根据经纬度拿到实际地址
03-29
可以使用百度地图的API来实现根据经纬度拿到实际地址的功能。具体步骤如下： 1. 引入百度地图API文件 ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> ``` 2. 创建地图对象并添加控件 ```javascript var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(lon, lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 ``` 3. 使用逆地址解析获取实际地址 ```javascript var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(result){ if (result){ var address = result.address; // 获取解析后的地址 console.log(address); } }); ``` 完整代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图</title> <style type="text/css"> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript"> var lon = 116.404; var lat = 39.915; var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(lon, lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(result){ if (result){ var address = result.address; // 获取解析后的地址 console.log(address); } }); </script> </body> </html> ``` 其中，`您的密钥`需要替换成自己的百度地图密钥。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值