Openlayers显示地理位置坐标的方法


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers显示地理位置坐标的具体代码,供大家参考,具体内容如下

1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和鼠标位置控件的容器;

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="../lib/ol/ol.js"></script>
 <link href="../css/ol.css" rel="stylesheet" />
 <style type="text/css">
  #myposition
  {
   float:left;
   position:absolute;
   bottom:10px;
   width:400px;
   height:20px;
   z-index:2000;
  }
  .mosuePosition
  {
   color:blue;
   font-size:20px;
   font-family:'微软雅黑';
  }
 </style>
 <script type="text/javascript">
  window.onload = function () {
   //初始化鼠标位置控件
   var mousePositionControl = new ol.control.MousePosition({
    //样式类名称
    className: 'mosuePosition',
    //投影坐标格式,显示小数点后边多少位
    coordinateFormat: ol.coordinate.createStringXY(8),
    //指定投影
    projection: 'EPSG:4326',
    //目标容器
    target:document.getElementById('myposition')
   });
 
   //初始化地图容器
   var map = new ol.Map({
    target:'map',
    layers:[
     new ol.layer.Tile({
      source:new ol.source.OSM()
     }),
    ],
    view:new ol.View({
     center:[0,0],
     zoom:3
    })
   });
 
   //将鼠标位置坐标控件加入到map中
   map.addControl(mousePositionControl);
  }
 </script>
</head>
<body>
 <div id="map">
  <div id="myposition"></div>
 </div>
</body>
</html>

3、结果展示

当鼠标在地图上移动时,会在左下角显示当前位置的地理坐标

Openlayers显示地理位置坐标的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中链式调用之研习
Apr 07 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
You might like
星际实力自我测试
2020/03/04 星际争霸
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
js实现微信分享代码
2020/10/11 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Django 返回json数据的实现示例
2020/03/05 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书