快速上手Vue+百度地图

前言

“

地图也是很常见的一些需求了，今天老严带大家使用一个简单的地图

目录结构

• 准备工作

• 1.创建脚手架

• 2.安装地图

• 3.在main中引入

• 4.简单使用百度地图

• 5.地图缩放

• 6.自定义地图样式

• 7.地图标注

准备工作

• 注册百度地图并且创建 ak

• 先进入 http://lbsyun.baidu.com/ 官网注册账号

• 然后去控制台 -> 我的应用 -> 创建应用

• 复制访问应用中 ak

• vue-cli

• cli 就自行创建吧

• npm

• 安装 node 环境自带

1.创建脚手架

vue create baidumap
&&
cd baidumap
&&
yarn serve

2.安装地图

npm install vue-baidu-map

3.在main中引入

ak是在百度地图开发者平台申请的密钥 详见      http://lbsyun.baidu.com/apiconsole/key

我们刚刚在前面的准备工作已经做完了这个 ak 直接复制粘贴到下面

import BaiduMap from'vue-baidu-map'
Vue.use(BaiduMap,{ak:'此处粘贴你的百度地图ak'})

4.简单使用百度地图

• 在home页面中

html

js

data(){
  return{
    point: "",
  }
},
methods:{
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
    },
}

css

/* 设定地图的大小 */
#allmap{
  height: 600px;
  width: 600px;
  margin: 0 auto;
}

5.地图缩放

刚刚写完这个简单的地图已经出来了，但是呢好像还不可以缩放

那让我们加上 :scroll-wheel-zoom="true"

再看看效果吧

6.自定义地图样式

MapStyle

属性	类型	描述
style	String	个性化模板
styleJson	Object	个性化Json样式

html

js

  data(){
    return{
      point: "",
      // 自定义样式
      mapStyle:{
        styleJson: [
          {
            featureType: "water",
            elementType: "geometry",
            stylers: {
              color: "#20ab6a",
            },
          },
        ],
      },
    }
  },

在下图中，我们不难发现这个河流、水流以及变成了#20ab6a

额... 这个河流颜色好像有点奇怪，还是换回来吧

7.地图标注

我们虽然已经看到了地图，但是没有标注的地图总感觉差那么一点点 soul

也是简单的讲一讲，因为官网API挺详细的，我也就带大家入个门哈哈

参考文献

api地址：http://lbsyun.baidu.com/cms/jsapi/reference/lite.html

控制台：http://lbsyun.baidu.com/apiconsole/key#/home

JavaScript api：http://lbsyun.baidu.com/index.php?title=jspopularGL

最后

1. 如果你喜欢这篇文章，可以给我点个赞和  在看   ，这将是读者对我创作最大的激励~

2. 如果你想持续收到好文章的推送，可以关注  悲伤日记 ，我们周一至周五，每天早上八点钟准时推送好文章给您