csdn spring boot+vue 汽车导航功能实现 vue地图导航

转载

游侠小影 2023-10-07 23:20:53

文章标签 百度地图缩放 html 文章分类 spring boot 后端开发

前言

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

目录结构

准备工作
1.创建脚手架
2.安装地图
3.在main中引入
4.简单使用百度地图
5.地图缩放
6.自定义地图样式
7.地图标注

准备工作

注册百度地图并且创建

ak

先进入 http://lbsyun.baidu.com/ 官网注册账号
然后去控制台 -> 我的应用 -> 创建应用
复制访问应用中 ak

vue-cliclinpm

安装

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

<baidu-map
    id="allmap"
    @ready="mapReady">
</baidu-map>

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"

<baidu-map
    id="allmap"
    :scroll-wheel-zoom="true"
    @ready="mapReady">
</baidu-map>

再看看效果吧

6.自定义地图样式

MapStyle

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

html

<baidu-map
   id="allmap"
   @ready="mapReady"
   :scroll-wheel-zoom="true"
   :mapStyle="mapStyle"
 >
</baidu-map>

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

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

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

7.地图标注

我们虽然做到了地图展示效果，但是没有标注的地图总感觉差那么一点点 soul

<baidu-map
  id="allmap"
  @ready="mapReady"
  :scroll-wheel-zoom="true"
>
  <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
  <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE">
  </bm-marker>
</baidu-map>

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

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