巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

html5定位并在百度舆图上显现的示例

0
一佰互联网站扶植(www.taishanly.com) 宣布时辰:2020-04-20 08:56:52 阅读数: 96

在开辟挪动端 web 或webapp时,利用百度舆图 API 的进程中,常常须要经由进程手机定位获得以后地位并在舆图上居中显现出来,这就须要用到html5的地舆定位功效。

复制代码代码以下:
navigator.geolocation.getCurrentPosition(callback);

在获得坐标胜利以后会履行回调函数 callback; callback 体例的参数便是获得到的坐标点;而后能够初始化舆图,设置控件、中间点、缩放品级,而后给舆图增加point的overlay:

复制代码代码以下:
var map = new BMap.Map("mapDiv");//mapDiv为放舆图的 div 的 id
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point为坐标点,15为舆图缩放级别,最大级别是 18
var pointMarker = new BMap.Marker(point);
map.addOverlay(pointMarker);

但是现实上如许还不够,显现出来的成果并不准,这是因为 getCurrentPosition 获得到的坐标是 GPS 经纬度坐标,而百度舆图的坐标是颠末特别转换的,以是,在获得定位坐标和初始化舆图之间须要停止一步坐标转换任务,该转换体例百度API外面已供给了,转换一个点或批量装换的体例均有供给:单个点转换需援用 http://developer.baidu.com/map/jsdemo/demo/convertor.js,批量转换需援用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js,这里只须要前者便可:

复制代码代码以下:
BMap.Convertor.translate(gpsPoint, 0, callback);
//gpsPoint:转换前坐标,第二个参数为转换体例,0表现gps坐标转换成百度坐标,callback回调函数,参数为新坐标点

例子的具体代码以下:(援用中的ak是请求的key)

复制代码代码以下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{
height: 100%; //设置高度,不然会显现不出来
}
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=··············"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint); //定位
});
function translatePoint(position){
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point){
//初始化舆图
map = new BMap.Map("map");
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point))
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

自己开辟进程中感觉电脑的定位速率有点慢,常常没法获得坐标致使舆图没法显现,倡议用手机测试,定位较快。

固然了,若是仅是开辟挪动真个网页,就不须要利用jQuery,框架太大,能够换用其余轻量级的挪动真个 js 框架。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:会走动的图形html5时钟示例
下一篇: HTML5中的autofocus(主动聚焦)属性先容
[前往消息列表]

相干消息more

05
04月
域名在网站扶植筹谋的时辰若何遴选

建造一个网站,网站内容品质和用户休会只是网站扶植的焦点身分,因为客户须要经由进程搜刮引擎拜候网站,杰出的排名对每一个网站都相当主要。,是从根基的... >>概况

20
04月
浅谈基于Canvas的手绘气概图形库Roug

媒介保举一个基于Canvas的手绘气概图形JS库。Rough.jsRough.js是一个轻量的(约莫8k),基于Canvas的能够绘制出大略... >>概况

07
04月
界面视觉设想与经营视觉设想有甚么差别? 这篇

互联网的产物视觉设想师又分为界面视觉设想师和经营视觉设想师,那末,这二者有何区分呢?跟着时期前进,互联网的成长让咱们的糊口愈来愈方便。用户在... >>概况

26
03月
法式员:天天三道口试题(MySQL视图、事件

简介:1、MySQL中事件是甚么?甚么是锁?事件便是被绑定在一路作为一个逻辑任务单位的SQL语句分组,若是任何一个语句操纵失利那末全部操纵就... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站