更新记录
1.0.2(2024-07-09) 下载此版本
处理了一下高德地图 和百度地图的方式
1.0.1(2024-07-09) 下载此版本
更新了一下百度地图渲染问题
1.0.0(2024-06-20) 下载此版本
无
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.97 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
···
<template>
<view>
<view class="uni-common-mt">
<view>
<map :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale">
</map>
</view>
</view>
<view class="dinweidizhi"></view>
</view>
</template>
<script>
import route from '@/js_sdk/heimao-map/heimao-map/heimaodinwei-map/heimao-map.js'
export default {
data() {
return {
latitude: 37.851913,
longitude: 112.604064,
markers: [],
polyline: [],
scale: 15,
origin: {
latitude: 37.851913,
longitude: 112.604064,
//起点的icon
iconPath: '../../static/qd.png',
},
destination: {
latitude: 37.851616,
longitude: 112.64174,
//终点的icon
iconPath: '../../static/zd.png',
}
}
},
methods: {
dinweilist() {
var that = this
uni.getLocation({
type: 'gcj02', // 返回坐标类型,可选值为 'wgs84'、'gcj02'、'bd09ll'
success: (res) => {
console.log('定位成功', res.latitude, res.longitude)
this.latitude = res.latitude
this.longitude = res.longitude
this.origin.latitude = res.latitude
this.origin.longitude = res.longitude
},
fail: (err) => {
console.log('定位失败', err)
// 根据具体情况进行错误处理
}
})
},
},
onLoad() {
// this.dinweilist()
// 这里填自己的高德地图应用中key 没有的话自己注册一个 这里高德web服务的key
// route.setKey("你替换你的key,记得配额");
// 这里填自己的百度地图应用中key 没有的话自己注册一个 这里百度web服务的key
route.setKey("你替换你的key,记得配额");
// const origin ={
// latitude: 37.923396,
// longitude: 112.478823,
// //起点的icon
// iconPath: '../../static/qd.png',
// };
// const destination = {
// latitude: 37.923396,
// longitude: 112.478823,
// //终点的icon
// iconPath: '../../static/zd.png',
// };
route.drawRoute(this, this.origin, this.destination);
}
}
</script>
<style>
map {
width: 100%;
height: 100vh;
}
.cover {
display: flex;
text-align: center;
background: #999;
}
.dinweidizhi {
width: 100%;
height: 100rpx;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}
</style>
····