Vue3+Ts 浅浅实现一下百度地图的几个常用功能

最近, 有很多人问我百度地图的问题, 基本都是百度地图基础使用的问题

对于最基础的申请AK, 我就不在这里讲解了, 大家可以翻阅之前的文章

今天, 带大家做一个百度地图方法结合的小功能, 搜索城市名称, 显示当前城市的地图, 并展示经纬度, 听起来不是很难, 但是在很多项目中, 也有很多这样的场景, 比如通过定位, 来显示这个客户所在区域的地图, 只是今天我们改为了搜索, 一些项目中, 在获取用户经纬度的地方, 放一个坐标拾取器, 让用户自己跳转网页进行拾取, 我记着, 之前好像就是这么搞的

我们先来写一下模版部分, 在此之前, 我引用了element-plus这个ui组件库

定义了一些数据

数据定义好了, 我们就配置一下地图, 并初始化加载地图

这样, 我们的地图就出来了

地图, 出来之后, 我们慢慢去实现功能

我们先来加一些地图控件, 比如: 比例尺, 缩放, 定位等等

我们是不是还需要给map注册一个点击事件, 比如我们点击了地图, 需要实时更新经纬度信息

现在, 功能实现一大半了, 我们看看效果

接下来, 我们就全力写搜索功能

首先考虑的是, 我搜索点击之后, 先要判断用户有无输入

随后, 我们需要根据名称, 将地图展现出来

地图展示出来了, 但是经纬度并没有更新过来

我们需要创建地理编码实例, 调用getPoint方法, 就可以获取经纬度了, 实时赋值即可

现在, 搜索功能也就做好了, 另外, 再给大家加点功能, 比如根据ip地址定位, 切换地图类型, 右击菜单等等

我们先来实现一下ip地址定位, 需要我们在地图加载前, 先通过ip定位, 获取到经纬度, 直接赋值给reactive定义的响应式数据身上

既然拿到了名称, 干脆将上面写的创建地理编码实例那个抽离出来, 当成方法调用

这样, 通过ip地址定位也就做好了, 进来之后, 就会加载成西安市

接下来, 我们做一下切换地图类型, 主要有标准地图, 地球模式, 普通卫星地图

那既然是这样选择, 我就直接使用element-plus中的选项框组了

我们给该组件绑定一个change事件, 用于我们的切换初始化地图

但是呢, 这里百度地图提供的这几个常量, 不能当成字符串传递进去, 会失效的

我们, 在切换模式的时候, 也需要将地图级别进行设计

这样, 我们切换地图类型也实现了, 我给大家看看效果

但是呢, 上面有报红, 我们来解决一下

这样, 我们这个做的这个小功能才算做好了

我们接下来, 实现一下右击菜单的实现

需要我们获取ContextMenu实例, 再其遍历调用身上的addItem将每一项加进去, 再调用地图实例的addContextMenu方法将菜单添加到地图上

我们看一下效果

今天, 我们就实现到这里, 百度地图还有很多好玩的, 比如: 轨迹实现, 加载全景图, 骑行驾车或公交路线规划等等

后期会慢慢给大家更新

我们下期见