文章目录

前言
一、核心代码
二、可能遇到的问题
- 1、关于百度地图相关变量报错的问题
- - 报错: TS2552: Cannot find name 'BMap'. Did you mean 'Map'? `或` TS2551: Property 'BMap' does not exist on type 'Window & typeof globalThis'. Did you mean 'Map'?
  - 解决方法：
- 2、处理地图script标签异步插入完成前获取不到地图相关对象报错问题
- - 问题：使用window.BMap、Map时报错undefined
  - 解决方法:
- 3、使用Ant-design-vue 想要使 <a-input />标签处于只读状态
- - 解决方法：`给标签加上readOnly属性即可`
总结

前言

Hello大家好啊，写文章是一个比较好的习惯，但我却有点喜欢偷懒，导致这一篇文章在周一的时候就写了，到了周末才开始着手。之前写文章有的时候不知道题材是什么，但自从实习之后会遇到很多值得记录的业务场景。最近也在读一本书《下班后开始新的一天》，通过这本书我了解到了，可以把一天分成两天过，上班的时候工作如果能够享受这个过程是最佳的，下班之后应该享受属于自己的4个小时，可以找自己喜欢的事情、找到自己的副业。目前对我而言，写博客是蛮享受的一个过程。

最近在开发地图相关项目的时候，突然有这么一个需求：需要在添加设备的表单选择位置时弹出百度地图的组件，点击地图上的某一处返回对应的经纬度信息。且右上角需要有一个省份城市切换的控制器用来返回相应的省市信息给表单对象（对用户直接缩小地图切换省份的操作不做出省份切换）。
这一次的业务其实是在基于vue2.0的项目，但我最近在研究vue3.0 + typescript + hooks，因此就决定将这次的demo以v3+ts的形式编写，事实证明，这一波操作确实是将复杂度提升了一个档次，本来非常简单的逻辑现在需要考虑到地图异步加载拿不到全局对象BMap、地图组件难取得hooks中的Geocoder等问题，有点没事找事的意思哈哈。不过核心函数代码是不区分v2、v3的，核心函数的部分其实也就是本文的中心，并且，这个核心函数的部分还非常简单易懂。
因为完整的代码越写越觉得自己有点多此一举，因此就不在文章上分享了，更多的还是想找点vue3+typescript+hooks搭建项目的感觉。源码地址：vue3-ts-baidu-map。

一、核心代码

那么我们直接开始，这样一个业务其实是比较简单的，实现省市选择器可以使用自定义组件 + 地图api提供的添加自定义组件，也可以使用地图自带的城市列表控件。相对来说使用地图自带的控件会更加容易一些且更有兼容性一些。

以下是地图api官网提供的城市列表控件Demo中的添加控件的部分代码，可以看到其中只配置了 anchor、offset两个属性。

但其实cityControl还可以配置对应的响应函数，如onChangeBefore、onChangeAfter、以及最为重要onChangeSuccess配置项。

通过日志打印，我们可以拿到onChangeSuccess回调函数中ev的结构。其中我们关心的数据有point中的lng、lat，细心的你也许发现了ev结构中的city并不符合我们的要求，因为如果选择城市则就只有城市信息、选择省份则就只有省份信息。所以需要我们的二次处理。
这里我选择的是用经纬度逆解析Geocoder将城市列表选择得到的经纬度逆地址解析为详细地址，取得需要的省份、城市信息。

而获取经纬度信息就比较简单了，只要用到百度地图中的marker以及给地图添加点击事件获取经纬度赋值给位置信息对象即可。

二、可能遇到的问题

还是想跟大家分享一下在做这个demo项目中我遇到的一些问题，以及目前我解决它们的办法

1、关于百度地图相关变量报错的问题

报错: TS2552: Cannot find name ‘BMap’. Did you mean ‘Map’? `或` TS2551: Property ‘BMap’ does not exist on type ‘Window & typeof globalThis’. Did you mean ‘Map’?

解决方法：

这是因为我们没有对BMap等地图相关变量进行注册，这里我解决的方法是：在src目录下创建global.d.ts文件，并对window进行接口定义：

2、处理地图script标签异步插入完成前获取不到地图相关对象报错问题

问题：使用window.BMap、Map时报错undefined

下方图片中展示的是我将百度地图javascript标签插入body的方式，不同于直接在public/index.html中直接插入，这里我选择了异步插入，当组件调用地图hooks中的initMap函数就会调用createMap方法进而将js标签插入到body中。同时我将对地图添加事件函数、地图控件的方法也抽离了出来，这样就会造成一个问题：因为相关添加的函数都是同步的，当执行时非常大可能地图script还未添加至body中，也就是window全局对象中没有地图相关变量。

解决方法:

在这里我在外层分别定义了处理异步问题的事件栈与组件栈，并在onload的末尾加入判断异步栈中是否存在元素，存在则执行。也就是说我将添加的逻辑先缓存在了对应的栈中，当地图完成添加之后将缓存的函数拿出执行。

3、使用Ant-design-vue 想要使 <a-input />标签处于只读状态

解决方法：`给标签加上readOnly属性即可`

总结

以上便是本篇文章的全部内容啦，这一篇文章写了比较长的一段时间。主要是因为对于vue3 + typescript一些写法、api的不熟悉，以及异步加载百度地图可能造成的一系列问题的解决。（吐槽：还有隔壁情侣大晚上动静比较大，好几天没有休息好再加上这周工作量的增加，比较没有心思去完整的写完这篇文章）总的来说这一次的demo对自己学习新知识还是很有帮助的，就得多写写demo，多遇到一些bug，在视频、文章中看到的知识点才能被更加深刻的吸收进脑海中。
说一个题外话，如果是在v2.x下要使用百度地图的话还是比较推荐使用 vue-baidu-map 这个插件的，大佬封装的非常完整了，只要把控件以组件的方式往template中一放，就完成了控件的添加，还是相当方便的！就是在城市列表这个组件封装的时候并没有写到onChangeSuccess，因此没办法在标签上以@onChangeSuccess的方式实现组件切换位置信息的返回。

百度地图api使用城市列表组件选择城市、省份获取对应城市信息（省市经纬度）相关推荐

Android通过百度地图API用Service和Alarm在后台定时获取地理位置信息
本文主要介绍了Android项目集成百度地图API,使用AlarmManager定时调用Service,在Service中请求坐标更新,并通过坐标得到省.市和县三级地理位置信息的方法. 程序结构很简单 ...
利用百度地图API进行车辆查询并用鼠标拾点获取经纬度
利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度先从官网申请秘钥http://lbsyun.baidu.com/ 2. 如果是用jsp写动态web项目,在jsp页面中引入js库,并且引入 ...
通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
目录一.前言: 二.正文: 1.注册高德地图开发者.创建应用 2.借助官方的示例开发 3.对官方的开发示例进行修改 4.获取详细位置信息 5.详细代码三.结尾:小周接触编程时间不长,刚起步,有更好 ...
百度地图api实现渐变色轨迹线
使用百度地图api实现的渐变色轨迹线,效果如下: 实现方法: 1.百度地图api使用首先引入百度地图api的依赖文件 <script type="text/javascript&qu ...
（更新源码）AndroidStudio新手开发：天气app（百度地图api+和风天气api+城市查询+折线展示）
AndroidStudio新手开发:天气app(百度地图api+和风天气api+城市查询+折线展示) 1.内容简介 2.环境配置 3.导入他人demo 4.AS项目分析 5.天气项目流程 6.数据探寻 ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
api 定位微信小程序精度_微信小程序城市定位(借助百度地图API判断城市)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
api 定位微信小程序精度_微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

百度地图api使用城市列表组件选择城市、省份获取对应城市信息（省市经纬度）

文章目录

前言

一、核心代码

二、可能遇到的问题

1、关于百度地图相关变量报错的问题