【百度地图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"> <sgMapclass="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，显示二维地图（午夜蓝风格）

模板页可以查看百度个性化地图 - 模板列表http://lbsyun.baidu.com/custom/list.htm去这个位置编辑个性化地图登录百度帐号百度帐号是登录所有百度系产品的通行证，登录后还可以在帐户管理页管理/修改您的个人信息，包括修改密码、绑定手机、身份认证等http://lbsyun.baidu.com/apiconsole/custommap

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

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

访问路径的时候带参数?type=2，显示实景地图（带有地名）

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

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

vue项目中图片地址生成二维码
前言一.图片地址生成二维码二.使用步骤 1.安装插件 2.执行方法(点击图片之后,弹框显示并且显示二维码) 总结前言 vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入 ...
Vue项目中使用Echarts（二）
1. 安装: 通过 npm 获取 echarts,npm install echarts --save 2. 最终页面展示效果如下: 三.代码实现 map-demo.vue: <template ...
vue项目中使用mock（二）
一,安装: npm install mockjs --save-dev 目录: src 同级目录下新建 mock 文件夹下新建 mock.js 和 tags.js 文件二,main.js 中导入 ...
vue项目中批量打印二维码
前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
前几天vue项目中需要使用百度地图的路数功能制作历史轨迹,为了离线时也可以正常计算路程等,所以这里选择使用原生离线去实现路书这里放出百度的官方示例:地图JS API示例 | 百度地图开放平台我先用 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...

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

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

最新文章

热门文章