Openlayers顯示地理位置坐標(biāo)的方法
更新時(shí)間：2020年09月28日 10:54:36 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細(xì)介紹了Openlayers顯示地理位置坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Openlayers顯示地理位置坐標(biāo)的具體代碼，供大家參考，具體內(nèi)容如下
1、新建一個(gè)html頁(yè)面，引入ol.js和ol.css文件，然后在body中創(chuàng)建兩個(gè)div標(biāo)簽，分別用來(lái)作為地圖和鼠標(biāo)位置控件的容器；
2、代碼實(shí)現(xiàn)
<!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 () {
//初始化鼠標(biāo)位置控件
var mousePositionControl = new ol.control.MousePosition({
//樣式類(lèi)名稱(chēng)
className: 'mosuePosition',
//投影坐標(biāo)格式，顯示小數(shù)點(diǎn)后邊多少位
coordinateFormat: ol.coordinate.createStringXY(8),
//指定投影
projection: 'EPSG:4326',
//目標(biāo)容器
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
})
});
//將鼠標(biāo)位置坐標(biāo)控件加入到map中
map.addControl(mousePositionControl);
}
</script>
</head>
<body>
<div id="map">
<div id="myposition"></div>
</div>
</body>
</html>
3、結(jié)果展示
當(dāng)鼠標(biāo)在地圖上移動(dòng)時(shí)，會(huì)在左下角顯示當(dāng)前位置的地理坐標(biāo)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
layui實(shí)現(xiàn)三級(jí)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)三級(jí)導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了通過(guò)url查找a元素的實(shí)現(xiàn)思路，解決一些比較實(shí)際的問(wèn)題，感興趣的朋友可以參考下2014-04-04
javascript中關(guān)于類(lèi)型判斷的一些疑惑小結(jié)
這篇文章主要給大家介紹了關(guān)于javascript中關(guān)于類(lèi)型判斷的一些疑惑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
JavaScript實(shí)現(xiàn)定時(shí)頁(yè)面跳轉(zhuǎn)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)頁(yè)面跳轉(zhuǎn)功能,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)自定義函數(shù)功能操作技巧,需要的朋友可以參考下2017-02-02
node-http-proxy修改響應(yīng)結(jié)果實(shí)例代碼
這篇文章主要介紹了node-http-proxy修改響應(yīng)結(jié)果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JavaScript中的DSL元編程介紹,本文講解了JavaScript元編程、JavaScript eval、JavaScript new Function()等內(nèi)容,需要的朋友可以參考下2015-03-03
使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
最近做了一個(gè)用js實(shí)現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫(xiě)了一個(gè)小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下2022-05-05
JScript面向事件驅(qū)動(dòng)的編程...2007-01-01
這篇文章主要介紹了JS遍歷DOM文檔樹(shù)的方法,結(jié)合實(shí)例形式分析了javascript遍歷dom文檔樹(shù)的相關(guān)方法與使用技巧,需要的朋友可以參考下2018-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡(jiǎn)單講述了廣義表的原理與相關(guān)概念,并結(jié)合實(shí)例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04