Vue使用百度地图

是小张啊喂

发布于 2023-02-21 13:02:58

5950

发布于 2023-02-21 13:02:58

文章被收录于专栏：软件软件

百度地图大家肯定都用过，但是如何将它嵌入到自己的项目当中，经验丰富的小聪明肯定都知道，那我来给各位不知道，想了解的讲解一下

首先需要注册一个百度地图开放平台的账号，个人企业都可以，在控制台中添加一个应用，这里我演示的是浏览器端

百度地图开放平台:https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

浏览器端有很多基础的服务，基本上一些简单的开发都是可以完成的。例如：静态图、坐标转换、Javascript API、JS地点检索、JS驾车路线规划、JS步行路线规划、JS骑行路线规划、JS公交路线规划、JS地理编码、JS逆地理编码、JS坐标转换、JS定位等等

这里推荐使用vue-baidu-map这个工具，这个工具是由第三方个人开发者开源，必须要给他点个赞。GitHub：https://github.com/Dafrok/vue-baidu-map/blob/master/README.zh.md

在线文档：https://dafrok.github.io/vue-baidu-map

安装依赖

$ npm install vue-baidu-map

初始化百度地图

<baidu-map class="map" 
    style="width: 100%; height: 66vh;flex-direction: column" 
    ak="你自己的应用ak" 
    center="北京">
</baidu-map>


<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  components: {
    BaiduMap,
  },
}
</script

到这里一切都很正常，接下来介绍几个组件，在使用的过程中会遇到的问题，举例一个

BmNavigation地图缩放控件

<baidu-map class="map" 
    style="width: 100%; height: 66vh;flex-direction: column" 
    ak="你自己的应用ak" 
    center="北京">
</baidu-map>


<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import Navigation from 'vue-baidu-map/components/controls/Scale'

export default {
  components: {
    BaiduMap,
    Navigation
  },
}
</script

这里看的时候地图缩放控件BmNavigation是不能生效的，替换一下另一种写法就可以生效

<baidu-map class="map" 
    style="width: 100%; height: 66vh;flex-direction: column" 
    ak="你自己的应用ak" 
    center="北京">
</baidu-map>


<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {BmNavigation} from 'vue-baidu-map'

export default {
  components: {
    BaiduMap,
    BmNavigation
  },
}
</script

在vue-baidu-map中地图缩放控件就是叫BmNavigation但是却不生效，知道原因的可以给我科普一下。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js