uniapp使用高德定位
1.注册账号并申请Key首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」 页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」2.准备页面先建个js文件,加载jsAPIexport default function MapLoader() {return new Promise((resolve, reject) => {
·
1.注册账号并申请Key
-
首先,注册开发者账号,成为高德开放平台开发者
-
登陆之后,在进入「应用管理」 页面「创建新应用」
-
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
2.准备页面
先建个js文件,加载jsAPI
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = "https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxxx&callback=callAMap";
script.onerror = reject;
document.head.appendChild(script);
}
window.callAMap= () => {
resolve(window.AMap);
};
})
}
JSAPI 1.3 开始完全支持 HTTPS 协议,如需使用安全协议,替换 JS API 的入口脚本URL中的http为https即可。随着
Chrome、iOS 等相继限制非安全域的定位请求,我们建议您升级网站到HTTPS协议,并使用HTTPS协议加载 JS API。
3.创建地图
需要先导入才能使用,我这是做了两个地方的路线,想要怎么做按照文档来就行
<template>
<view class="content">
<view id="container">
</view>
</view>
</template>
<script>
import AMap from "../../util/utils.js"
export default {
data() {
return {
resAmap:null,
startlng:116.397428,
startlat:39.90923,
endlng:116.407428,
endlat:39.10923,
zoom: 11,
}
},
onLoad() {
this.initAMap();
},
methods: {
async initAMap() {
try {
//console.log(this.resAmap);
this.resAmap = await AMap();
this.$nextTick(function() {
let self=this;
let map = new self.resAmap.Map('container', {
mapStyle:'amap://styles/whitesmoke', //设置地图的显示样式
zoom: 5,
center: [self.startlng,self.startlat],
showBuildingBlock:true,
resizeEnable: true,
viewMode: '3D',
zoom: self.zoom,
zooms: [3, 20],
});
this.resAmap.plugin(['AMap.DrivingPolicy', 'AMap.Driving'], function () {
})
let marker = new self.resAmap.Marker({
position: new self.resAmap.LngLat(self.startlng,self.startlat), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
offset: new self.resAmap.Pixel(-13, -20),
content: '<img src="../static/image/icon.png" style="width:26px;height:26px"/>',
map: self.map
});
map.add(marker);
let InfoWindow = new self.resAmap.InfoWindow({
autoMove:true,
content:'这个屯',
offset:new self.resAmap.Pixel(-13, -20),
})
InfoWindow.open(map,[self.endlng, self.endlat]);
const drivingOption = {
// policy: AMap.DrivingPolicy.LEAST_DISTANCE, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
province: '浙' // 车牌省份的汉字缩写
}
//构造路线导航类
const driving = new self.resAmap.Driving(drivingOption);
console.log(self.startlat)
// 根据起终点经纬度规划驾车导航路线
driving.search(new self.resAmap.LngLat(self.startlng,self.startlat), new self.resAmap.LngLat(self.endlng,self.endlat,), function (status, result) {
// result即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log(result);
drawRoute(result.routes[0]);
} else {
console.log('获取驾车数据失败:' + result);
}
});
//
function drawRoute (route) {
var path = self.parseRouteToPath(route)
var startMarker = new self.resAmap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map:map
})
var endMarker = new self.resAmap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map:map
})
var routeLine = new self.resAmap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(map)
// 调整视野达到最佳显示区域
map.setFitView([startMarker, endMarker, routeLine])
}
})
}catch(e){
console.log(e)
}
},
parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
}
}
</script>
<style>
#container {
z-index: 99;
width: 100%;
height:calc(100vh - 500rpx);
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)