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

最新推荐文章于 2025-06-15 15:41:46 发布

原创

最新推荐文章于 2025-06-15 15:41:46 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #typescript

文章目录

前言
一、核心代码
二、可能遇到的问题
总结

前言

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

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