写在最前面

开发这个组件,仅因为公司业务需要,并不会频繁的维护(不维护也有可能),下载请慎重,有 bug 是正常的! 搜索结果可能不那么符合你想的那样,用的是天地图的普通搜索,跟市面上的那种导航软件搜索出来的肯定有很大的差别,勿喷,感谢理解!

天地图地址搜索组件

使用环境

vue2

描述

此地址选择组件是依托天地图进行开发的。使用者能够直接点击地图上相应位置来完成选择操作，亦可借助搜索功能，从搜索所得的结果里挑选期望的地址（需注意，搜索结果会在地图上进行打点标注，同样可通过点击地图上的这些点位来实现选择）。该组件不仅会返回天地图对应的经纬度以及地址名称，还会提供适用于高德地图、腾讯地图的经纬度。

安装命令

npm install tianditu_search

使用

在自己的 vue 页面,像引用自定义组件一样引入注册即可

import TiantiMap from "tianditu_search";

相关传参

| 键值 | 是否必填 | 默认值 | 数据类型 | 备注 | | :----------: | :------: | :-----------------: | -------- | --------------------------------------------------------------------------------- | | ifHttps | false | true | Boolean | 请求的相关天地图 API 前缀是否是 HTTPS 开头的 | | apiKey | true | - | String | 自行申请的天地图应用 KEY(浏览器端),需要配置基本的功能和 administrative 相关的功能 | | center | false | [116.4074, 39.9042] | Array | 地图中心点,默认点位北京 | | GCJ02 | false | false | Boolean | 传入的中心点位置是否是 GCJ-02 标准的 | | boxHeight | false | 500px | String | 组件所展示的高度,css 支持的值均可 | | boxWidth | false | 100% | String | 组件所展示的宽度,css 支持的值均可 | | zoom | false | 15 | Number | 地图缩放程度,仅在初始化地图时用到,选择点位后的地图缩放值固定为 18 | | resultCount | false | 50 | Number | 搜索结果最大返回数量,不建议过大,以免影响速度 | | markerLonLat | false | [] | Array | 传入的点位经纬度，如果传值，将在地图渲染后在地图上打点 |

返回数据

通过监听自定义事件@select,能获得所选点位的天地图经纬度、地址以及基于 GCJ-02 标准的经纬度的对象数据 { lat: String, lng: String, address: String, GCJ02LngLat: Array, }

其他

组件中的样式文件格式为 css

感谢

• 我无敌最俊朗 提供的经纬度转换方法。
• 网络上无数的网友(不是不列,是我太菜查的太多记不住了,万分感谢广大网友!)