qq_51055690的博客

临时加了个功能，需要查询公交线路。类似下图，我会做的简单一点，本篇教程就不加下拉触底加载和上拉刷新了。只查询一遍，一次返回20条数据即可、顺便加一个搜索框官方文档入口提示：以下是本篇文章正文内容，下面案例可供参考如果没看过我之前的文章，可能对于初始化map中的会报错。这个在main.js中配置就好了安全密钥和mapJsKey都不能少建议从系列文章01开始看。

本篇要实现的功能，看下图提示：以下是本篇文章正文内容，下面案例可供参考看了我之前的教程，肯定不会出错。因为我也是建了个新项目一步步来的。

我的需求getList获取数据，然后把经纬度，写入到页面中，点击marker标记 可以获得该项数据，例如name或者id之类的。页面已经展示，只看加marker标记点，跳过一、二

实现样式效果如图，比较复杂，内容较多。会在api文件夹创建接口，会在components写一个组件，阅读大概10分钟挂载了计算距离方法后，发现页面不报错了，正常运行了为什么不用webJs的poi查询？那个查询可以直接在地图上标点出来。因为没有我所需要的评分，我需要根据评分来排序，如果需要地图显示点，可以用mark批量添加，看到这里相信你已经会基本操作了。mark加标记点我在后面会有一片教程，不过不是批量，不过都差不多，反正都是给经纬度然后整个循环。如果看到这里还是没有正常运行。请检查data变量。

如果没有现成的脚手架，可以用我的，教程需要看上中下三篇。传送门【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，设置axios，utils工具包，vue.fonfig.js配置项也可以直接拿现成的vue-app我按照我上面gitee中的包来操作参考教程Vue+高德地图API的使用需要用什么，用addControl方法添加传送门地图js 插件的使用。

拥有自己的key，高德地图api，怕内容过长过多，在vue2项目中实现丢到下一期。

【高德地图api】vue2中poi搜索效果视频实现的效果视频，手机录制视频转gif太麻烦了，我直接上传视频了。教程主要针对视频效果所呈现，一步步保姆教程以及代码块，如果后续修改功能需求，以最终为主。