html百度地图导航起点默认定位位置,关于javascript:百度地图定位和导航
页面初始化时,加载百度地图JS,加载实现后执行回调函数开始定位,定位胜利后初始化地图对象,计算导航路线,而后展现。
反对IP定位须要在页面
标签引入的JS:
vue单文件组件:
mounted () {
this.loadBaiduMapAsync()
},
methods: {
/**
* 初始化百度地图并定位用户以后地位
*/
loadBaiduMapAsync() {
// 加载百度地图js
let script = document.createElement('script')
script.src = 'https://api.map.baidu.com/api?v=2.0&ak=申请的key&callback=initMap'
document.body.appendChild(script)
script.onload = (data) => { // 地图js加载胜利
console.log('百度地图JS加载胜利,开始定位')
window.initMap = this.startLocate
}
script.onerror = (data) => { // 地图js加载失败
console.log('百度地图JS加载失败,无奈定位')
common.showConfirm('舒适提醒','地图加载出错,请重试!', () => { this.loadBaiduMapAsync() }, null, '从新加载')
}
},
/**
* 获取用户以后定位 -- APP端端
*/
startLocate() {
if (this.isApp) { // APP端
this.getPositionByAPP().then(point => {
console.log('APP定位胜利--地位:', point);
this.currPos = point
this.showMapAndGuide() // 展现地图及导航
}).catch(msg => {
this.status = 0
console.log(msg);
// common.showToast(msg, CONSTANTS.ERR_TOAST_TIME)
this.showDestination() // 展现地图和目的地
})
} else { // 浏览器端
this.getPositionByH5().then(point => {
console.log('浏览器定位胜利--地位:', point);
this.currPos = point
this.showMapAndGuide() // 展现地图及导航
}).catch(msg => {
this.status = 0
console.log(msg);
// common.showToast(msg, CONSTANTS.ERR_TOAST_TIME)
this.showDestination() // 展现地图和目的地
})
}
},
/**
* 获取用户以后定位 -- APP端端
*/
getPositionByAPP() {
return new Promise(function(resolve, reject) {
const cb = (err, data) => {
if (err) {
if (err.code === '001') { // 未开启定位服务
reject('请查看您的定位服务是否开启')
} else if (err.code === '002') { // 未受权利用拜访定位性能
reject('请受权APP拜访您的地位信息')
} else {
console.warn(err);
reject('定位失败,地位信息不可用')
}
} else { // app定位胜利
let point = {
longitude: data.Longitude,
latitude: data.Latitude
}
if (this.isiOS) { // IOS坐标转换
console.log('IOS坐标转换')
const convertor = new BMap.Convertor()
convertor.translate([new BMap.Point(point.longitude, point.latitude)], 1, 5, res => { // 经纬度转换,否则会定位不准
if (res.status === 0) {
point.latitude = res.points[0].lat
point.longitude = res.points[0].lng
resolve(point)
}
})
} else { // Andorid坐标
resolve(point)
}
}
}
app.getCurrentLocation(cb)
})
},
/**
* 获取用户以后定位 -- 浏览器端
*/
getPositionByH5() {
return new Promise(function(resolve, reject) {
const locateByIP = function () {
if (window.returnCitySN && window.returnCitySN.cip) { // 依据IP,通过百度api取得经纬度
console.log('returnCitySN:', window.returnCitySN);
$.getJSON("https://api.map.baidu.com/location/ip?callback=?", {
'ak' : '申请的百度地图key',
'coor' : 'bd09ll', // 百度经纬度坐标
'ip' : window.returnCitySN.cip // {cip: "116.77.145.35", cid: "440300", cname: "广东省深圳市"}
}, function(data) {
if (data && data.content) {
resolve({
longitude: data.content.point.x,
latitude: data.content.point.y
})
} else {
reject('定位失败,地位信息不可用')
}
})
}
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
resolve({
longitude: pos.coords.longitude,
latitude: pos.coords.latitude
})
}, function(error) {
let msg = ''
switch(error.code) {
case error.PERMISSION_DENIED:
msg="用户回绝对获取地理位置的申请。"
break;
case error.POSITION_UNAVAILABLE:
msg="地位信息是不可用的。"
break;
case error.TIMEOUT:
msg="申请用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
msg="未知谬误。"
break;
}
reject(msg)
// console.warn('浏览器端(geolocation定位失败)-依据IP定位');
// locateByIP()
}, {
enableHighAccuracy: true, // 批示浏览器获取高精度的地位,默认为false
timeout: 5000, // 指定获取地理位置的超时工夫,默认不限时,单位为毫秒
maximumAge: 2000 // 最长有效期,在反复获取地理位置时,此参数指定多久再次获取地位。
})
} else {
reject('定位失败,以后浏览器不反对定位!')
// console.warn('浏览器端(geolocation定位不反对)-依据IP定位');
// locateByIP()
}
})
},
/**
* 展现指标地位
*/
showDestination() {
if (Number.isNaN(this.lng)|| Number.isNaN(this.lat)) {
common.showAlert('地址参数谬误!', CONSTANTS.ERR_TOAST_TIME)
return
}
// 展现地图
const map = new BMap.Map("allmap")
const endPos = new BMap.Point(this.urlParams.lng, this.urlParams.lat)
// 展现指标地位
this.status = 2
map.centerAndZoom(endPos, 16)
map.addOverlay(new BMap.Marker(endPos))
map.enableScrollWheelZoom(true)
// 在右上角增加缩放控件
const zoom = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
})
map.addControl(zoom)
},
/**
* 展现地图并导航
*/
showMapAndGuide() {
if (Number.isNaN(this.lng)|| Number.isNaN(this.lat)) {
common.showAlert('页面地址参数谬误!', CONSTANTS.ERR_TOAST_TIME)
return
}
// 展现地图
const map = new BMap.Map("allmap")
const startPos = new BMap.Point(this.currPos.longitude, this.currPos.latitude) // {lng: 114.02597366, lat: 22.54605355}
const endPos = new BMap.Point(this.lng, this.lat)
// 逆地址解析用户以后所在地址
const geoc = new BMap.Geocoder()
geoc.getLocation(startPos, res => {
const currCity = res.addressComponents.city // 用户以后定位所在城市
console.log(`定位城市:${currCity} -- 球场地址:${this.address}`);
if (this.cityName && this.cityName.indexOf(currCity) > -1) { // 用户和指标球场在同一城市
this.status = 1
map.centerAndZoom(startPos, 16)
this.driveRoute(map, startPos, endPos, true)
} else { // 用户和指标球场不在同一城市
this.status = 2
map.centerAndZoom(endPos, 16)
map.addOverlay(new BMap.Marker(endPos))
// this.driveRoute(map, startPos, endPos, true)
}
})
map.enableScrollWheelZoom(true)
// 在右上角增加缩放控件
const zoom = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
})
map.addControl(zoom)
},
/**
* 计算驾驶路线
* @param startPos BMap.Point 终点地位
* @param endPos BMap.Point 起点地位
* @param show Boolean
*/
driveRoute(map, startPos, endPos, show) {
const DRIVE = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: show,
},
onSearchComplete: res => {
let plan = res.getPlan(0)
console.warn('查问驾车计划后果:', plan);
if (plan) {
this.driveDistance = plan.getDistance(true)
this.driveTime = plan.getDuration(true)
}
},
onMarkersSet: routes => {
// map.removeOverlay(routes[0].marker)
// map.removeOverlay(routes[1].marker)
// 解决百度地图起始点图标重叠问题
const eles = $('.BMap_Marker img')
if (eles.length > 0) {
eles.forEach(v => {
v.style.maxWidth = 'none'
v.style.width = '94px'
})
}
}
})
DRIVE.search(startPos, endPos)
}
}
}
html百度地图导航起点默认定位位置,关于javascript:百度地图定位和导航相关推荐
- Android百度网盘下载位置,手机百度云客户端修改默认下载位置教程图解
手机百度云怎么修改默认下载位置?如果一直把文件下载百度云手机客户端默认的位置恐怕手机的内存条要变红了,所以更改百度云手机客户端的默认下载位置是很必要的,将百度云下载的文件放在内存大的地方.下面小编就来 ...
- 门店定位怎么在地图上显示_门店位置如何显示在地图上?
随着科技的发展,智能手机的普及,如今不管在哪里只要有一个手机在手基本就不会迷路,通过手机地图寻找位置非常方便,及时比较偏的地方也可以通过地图去找到,那么对于门店商家而言,如何将自己的门店显示在地图上呢 ...
- Android 集成高德地图——当前定位,添加图标,画路线,设置显示中心位置,比例,地图刷新位置监听,判断GPS开启,去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
- 在谷歌地图上显示您的位置
HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置 定位用户的位置 www.binblog.cn HTML5 Geolocation API 用于 ...
- java腾讯地图根据经纬度获取具体位置
腾讯地图 java腾讯地图根据经纬度获取具体位置 java腾讯地图根据经纬度获取具体位置 package com.fengdi.lianmeng.util.tencent;import com.fen ...
- 定位的简介和四种定位
目录 一.定位的简介 二.四种定位 Ⅰ 相对定位 Ⅱ 绝对定位 Ⅲ 固定定位 Ⅳ 粘滞定位 一.定位的简介 定位(position) 定位时一种更加高级的布局手段 通过定位可以将元素摆放到页面的任意位 ...
- 地图可视化 | 8月22日重庆山火分布地图及制作方法
前言 近日受高温天气影响,重庆多地山火引发关注,来看最新进展. 通过网上发布新闻,火灾发生地列表 使用小O地图EXCEL插件进行地图可视化,山火发生分布地图. 通过地图可视化,近日山火发生地主要集中在 ...
- html5 直接获取当前位置,HTML5调用百度地图API获取当前位置并直接导航目的地的方法...
//$ak=2051409c59b8d558c7e6bbd0c5c62ffd body, html,#allmap {width: 100%;height: 100%;overflow: hidden ...
- 基于百度地图和百度路书的行车轨迹回放(含途经点的多次导航)
目录 先来看看我做了个啥 我为什么要这件事 我用到的工具 正式开始 创建一张空地图 设置我的起点.终点.途经点 为上面几个关键点打上标签 绘制折线 绘制折线的方法 第一个难点 加一辆小车在路上跑 添加 ...
最新文章
- centos 学习日记 文件默认权限:umaks
- c++编写手机小游戏代码_只需22行代码,用python编写自己的小游戏
- [PLL][PM]锁相环模拟相位解调
- Socket模型详解
- 李宏毅机器学习课程4~~~分类:概率生成模型
- 《Java程序设计》学期总结
- springboot集成环信sdk报错
- 如何优雅的追到女神夕小瑶
- foreach 循环达到条件的第一次就停止_是否应该停止在JavaScript代码中使用forEach()?...
- java sftp 密钥_通过密钥 SFTP (二):启用没有 Shell 访问权限的 SFTP 账户
- 西班牙人:武磊身体无恙 可以出场比赛
- Java程序的开发步骤
- 计算机论文目录大全,毕业论文目录范文
- 鹿晗关晓彤公开恋情,是如何把新浪微博的服务器搞垮的?
- 工具善其事,必先被苦逼的其器所钝伤然后打磨之才能利其器
- 学习笔记(2):A110测试-测试课程申请1888
- BestMPRBaseVtk-003-修改工程,搬运官方代码并尝试理解-2
- 阿里的“无用”和“有用”
- python获取股票的市盈率_有没有一种方法可以自动获取许多股票的一般信息,比如市盈率、收益率等等?...
- 使用OpenConnect替代Cisco AnyConnect