更新记录
1.0.11(2025-04-21) 下载此版本
地图已经替换。这个地址 ---------》https://ext.dcloud.net.cn/plugin?id=23115 此插件已经不能使用
1.0.10(2025-04-21) 下载此版本
地图已经替换。这个地址 ---------》https://ext.dcloud.net.cn/plugin?id=23115
1.0.9(2025-04-21) 下载此版本
目前版本将不再维护。已经替换最新版本 版本地址如下 https://ext.dcloud.net.cn/plugin?id=23115
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
需要强调一下
由于新版本HBuilderX 4.25 版本开始manifest.json 不再支持百度地图 目前已经删掉了百度地图,腾讯地图的路线轨迹
uniapp前端代码
<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,记得配额");
// 这里填自己的百度地图应用中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>