uniapp中使用高德地图,进行marker标点,点信息展示,支持app端

上次针对web端做了通常用到的地图信息整理。本次安卓移动端更新内容如下

位置定位、点标记、点击信息展示。

声明:uniapp安卓开发地图不支持腾讯地图,使用高德、百度、谷歌都可。建议使用高德,毕竟代码在下面。

知识点:renderjs、vue、renderjs和js数据交互

uniapp中使用高德地图,进行marker标点,点信息展示,支持app端_第1张图片

一、创建一个地图容器,class样式定义地图大小 

二、创建两个js标签、相当于使用了组件,一个正常写js语法,一个写renderjs使用高德地图。申请高德地图需要key值,因为涉及到jre包,可以让后端帮忙申请。重点在于数据交互。写了注释,直接上代码。






重点在于数据交互,在组件引用时通过:change:pointList="ModuleInstance.setParkList" 

将数据传给renderjs进行点渲染。点击点坐标的时候通过this.$ownerInstance.callMethod('serviceClick', this.markerId)将点的id信息给父组件

感谢支持,交流群入口:

 前端之家企鹅群:610408494

微信:https://s1.ax1x.com/2022/07/18/jo1LyF.png

你可能感兴趣的:(前端人,amap,高德地图,vue.js,前端,android,web,app)