更新记录
1.0.3(2022-03-02) 下载此版本
解决了更新标记点数组后地图上的标记点不更新的问题
1.0.2(2022-02-25) 下载此版本
修改了自定义基座打包后高德地图出不来的问题,添加了标记点点击事件和气泡点击事件
1.0.1(2022-02-22) 下载此版本
修改了自定义基座打包后高德地图出不来的问题
查看更多平台兼容性
Android | iOS |
---|---|
× | 适用版本区间:9 - 15 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
高德地图插件
插件使用说明:
本插件实现了高德地图绘制点标记和设置中心坐标等功能,插件提供了一个API,调用这个方法可以设置中心坐标
示例代码:
1.通过jhfc-AMapComponent设置组件的各个属性,style设置组件的宽高,markerTap是标记点点击事件,calloutTap是气泡点击事件,markers设置每个点标记信息的数组
<jhfc-AMapComponent style="width:750rpx;height:1000px" ref='amapcomponent' @markerTap="markerTap" @calloutTap="calloutTap" :markers="coverslist"></jhfc-AMapComponent>
2.调用设置中心坐标的方法,第一个参数是纬度,第二个参数是经度
this.$refs.amapcomponent.setCenterCoordinate({'latitude':'22.53932733679034328','longitude':'113.95144253969192505'});
完整代码:
<template>
<div class="container">
<jhfc-AMapComponent style="width:750rpx;height:1000px" ref='amapcomponent' @markerTap="markerTap" @calloutTap="calloutTap" :markers="coverslist"></jhfc-AMapComponent>
<cover-view class="container-refresh">
<image class="location-refresh" @click="backLocation" src="/static/location.png" mode="aspectFill">
</image>
</cover-view>
</div>
</template>
<script>
export default {
data() {
return {
coverslist:[{"id":11,"latitude":"22.53932733679034328","longitude":"113.95144253969192505","width":30,"height":30,"iconPath":"https://qiniu.tangzhijiao.com/1631700608129?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p","callout":{"content":"嘿","fontSize":12,"color":"#ffffff","bgColor":"#313031","borderRadius":15,"display":"ALWAYS","borderColor":"#E971DB","borderWidth":1,"padding":8,"iconPath":"https://qiniu.tangzhijiao.com/1631700608129?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p"},"level":2,"acc_id":"yy_11","nickname":"人间理想","avatar":"https://qiniu.tangzhijiao.com/1631700608129?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p","mood":"嘿","gender":2,"birthday":"1996-06-24 00:00:00","is_online":0,"distance":4,"age":25,"fans_num":10,"follow_num":9},{"id":48,"latitude":"22.53931973262685773","longitude":"113.9513513445854187","width":30,"height":30,"iconPath":"https://qiniu.tangzhijiao.com/1636093959605?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p","callout":{"content":"二","fontSize":12,"color":"#ffffff","bgColor":"#313031","borderRadius":15,"display":"ALWAYS","borderColor":"#E971DB","borderWidth":1,"padding":8,"iconPath":"https://qiniu.tangzhijiao.com/1636093959605?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p"},"level":0,"acc_id":"yy_48","nickname":"用户3","avatar":"https://qiniu.tangzhijiao.com/1636093959605?imageMogr2/thumbnail/400x400!|roundPic/radius/!50p","mood":"二","gender":2,"birthday":"2002-09-19 00:00:00","is_online":0,"distance":6,"age":19,"fans_num":7,"follow_num":15}],
}
},
methods: {
backLocation() {
this.$refs.amapcomponent.setCenterCoordinate({'latitude':'22.53932733679034328','longitude':'113.95144253969192505'});
uni.showToast({
title:'success',
icon: "none"
})
},
markerTap:function(e) {
console.log("markerTap: "+JSON.stringify(e.detail))
uni.showToast({
title:"markerTap: "+JSON.stringify(e.detail),
icon: "none"
})
},
calloutTap:function(e) {
console.log("calloutTap: "+JSON.stringify(e.detail))
uni.showToast({
title:"calloutTap: "+JSON.stringify(e.detail),
icon: "none"
})
},
}
}
</script>
<style scoped>
.container-refresh {
position: absolute;
right: 0;
bottom: 320rpx;
z-index: 99999;
}
.location-refresh {
width: 80rpx;
height: 80rpx;
}
.container {
position: relative;
display: flex;
flex: 1;
z-index: 1
}
</style>