uniapp+高德地图开发APP自定义marker弹出框教程

需求背景

uniapp+nvue+高德地图开发APP，不是小程序，效果图如下，该效果图是教程二实现的。

-----------------------自定义marker请直接看教程二

-----------------------自定义marker请直接看教程二

-----------------------自定义marker请直接看教程二

前期准备

// 高德key申请和hbuilder的manifest.json配置教程
https://blog.csdn.net/pleasantsheep_/article/details/132469712

教程一

使用uniapp的map内置组件，适合标记比较少，可以一次性加载完的情况。在自己的VUE页面中增加map标签就可以了。

// 官方参照地址
https://uniapp.dcloud.net.cn/component/map.html

教程二

适合marker点比较多，每次点击marker然后调用后台接口获取新的数据赋值的那种。这种技术的关键字是renderjs。

renderjs数据交互

renderjs如何与uniapp数据交互，请看下面教程

https://blog.csdn.net/weixin_43907110/article/details/127827179
https://blog.csdn.net/Smile_ping/article/details/131991041

吐槽一下

hbuilder的map官方封装的真的是一坨 S H I，没见过这么烂的开发。本人也是第一次接触uniapp。最简单的封装就是用户传递一个html标签给你，你直接显示就完了。非在那里封装一堆没有用的标签，结果功能还没实现。不知道招的都是些什么牛鬼蛇神。

备注

凡是在网上看到slot="callout"，那就是小程序的写法，不要浪费时间。就像下面的写法