【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图

简介: 【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图

rc\js\main.js

...
 
 
//  引入普通百度地图----------------------------------------npm install vue-baidu-map --save
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, { ak: 'DvSp7Of3aqrGbjIsGqebqdPAmjhGDndf' });//这个百度APIkey密钥是用百度ID:16*******61注册的,如果要更改密钥权限找强哥!
 
// 引入3D百度地图----------------------------------------npm install vue-bmap-gl --save
import VueBMap from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css';
Vue.use(VueBMap);
VueBMap.initBMapApiLoader({
  ak: '***DvSp7Of3aqrGbjIsGqebqdPAmjhGDndf***',//这个密钥请使用自己注册的
  v: '1.0'
});
 
 
...

src\vue\components\sgMap.vue

<template>
  <div class="sgMap-body">
    <!-- 引入百度地图 -->
    <div id="SGbaidu3Dmap" v-show="data.type == 3"></div>
    <baidu-map id="SGbaidumap" v-if="data.type != 3" @ready="initBaiduMap">
    </baidu-map>
  </div>
</template>
 
<script>
import custom_map_config from "@/json/custom_map_config";
export default {
  components: {},
  data() {
    return {
      map: null, // 百度地图对象
      // _MyMap: null,//瓦片图对象
    };
  },
  props: ["data"],
  mounted() {
    this.data.type == 3 &&
      setTimeout(() => {
        this.initBaidu3DMap();
      }, 2000);
  },
 
  methods: {
    initBaidu3DMap() {
      this.map = new BMapGL.Map("SGbaidu3Dmap");
      this.map.centerAndZoom(
        new BMapGL.Point(this.data.coordinate[0], this.data.coordinate[1]),
        this.data.zoom || 19
      );
      this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小
      //设置3D角度----------------------------------------
      this.map.setHeading(64.5);
      this.map.setTilt(73);
 
      // 设置自定义mark点位________________________
      this.map.addOverlay(
        new BMapGL.Marker(
          new BMapGL.Point(this.data.coordinate[0], this.data.coordinate[1]),
          {
            icon: new BMapGL.Icon(
              require("@/assets/sgMap/mark.svg"),
              new BMapGL.Size(32, 32) //图标的宽高
            ),
          }
        )
      ); // 将标注添加到地图中
    },
    // 初始化百度地图
    initBaiduMap({ BMap, map }) {
      this.map = map;
      this.map.setMapStyle({ style: this.data.style || "googlelite" }); //默认:精简风格(googlelite),模板页可以查看http://lbsyun.baidu.com/custom/list.htm
 
      // 去这个位置编辑http://lbsyun.baidu.com/apiconsole/custommap个性化地图
 
      // this.map.setMapStyle({ styleJson: custom_map_config });
      // this._MyMap = new BMap.MapType('MyMap', this._tileLayer, {minZoom: minZoom || 1, maxZoom: maxZoom || window.maxZoom});
      // 设置地图显示类型----------------------------------------
      const mapTypes = [
        BMAP_NORMAL_MAP, //此地图类型展示普通街道视图
        BMAP_SATELLITE_MAP, //此地图类型展示卫星视图
        BMAP_HYBRID_MAP, //此地图类型展示卫星和路网的混合视图
      ];
      if (this.data.type == 3) {
        this.map.setHeading(64.5), this.map.setTilt(73);
        //3D地图
      } else this.map.setMapType(mapTypes[this.data.type]);
 
      // ----------------------------------------
      this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小
      this.map.centerAndZoom(
        new BMap.Point(this.data.coordinate[0], this.data.coordinate[1]),
        this.data.zoom || 14
      ); // 初始化地图,设置中心点坐标和地图级别
 
      // 设置自定义mark点位________________________
      this.map.addOverlay(
        new BMap.Marker(
          new BMap.Point(this.data.coordinate[0], this.data.coordinate[1]),
          {
            icon: new BMap.Icon(
              require("@/assets/sgMap/mark.svg"),
              new BMap.Size(32, 32) //图标的宽高
            ),
          }
        )
      ); // 将标注添加到地图中
    },
  },
};
</script>
 
<style lang='scss' scoped>
@import "~@/css/sg";
// ----------------------------------------
.sgMap-body {
  transition: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  >>> #SGbaidumap,
  >>> #SGbaidu3Dmap {
    width: 100%;
    height: 100%;
    & > div {
      background-color: transparent !important;
    }
  }
}
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
>>> .anchorBL,
>>> .anchorTR,
>>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
</style>

src\vue\screen\index.vue

<template>
  <div class="index-body"> 
    <sgMap
      class="sg-map"
      :data="{
        coordinate: [118.869472, 28.975293],
        style: $route.query.style || 'midnight',
        type: $route.query.type || 0,
        zoom: $route.query.zoom || 16,
      }"
    />
  </div>
</template>
 
<script>
import sgMap from "@/vue/components/sgMap";
export default {
  components: {
    sgMap,
  }, 
};
</script>
 
<style lang='scss' scoped>
  .sg-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
</style>

访问路径的时候带参数?type=0&style=midnight,显示二维地图 (午夜蓝风格)

模板页可以查看 去这个位置编辑个性化地图


image.png

访问路径的时候带参数?type=0&style=grayscale,显示二维地图 (高端灰风格)

 访问路径的时候带参数?type=1,显示实景地图

访问路径的时候带参数?type=2,显示实景地图(带有地名)

访问路径的时候带参数?type=3,显示三维3D地图

相关文章
|
9天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
105 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10天前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
|
1月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
86 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
1月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
131 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
99 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
1月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
101 12
|
1月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
107 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
2月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
220 8
|
2月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
287 1
|
4月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。

热门文章

最新文章