Vue结合百度地图实现三维地球

小的在网上看了很多教程后，一些参数已经改变了，无法实现，因此写下本篇笔记做记录，大人多多见谅。哈哈哈~

1.环境准备

申请一个百度地图的AK用于调用百度地图的API（教程网上查找）

1.1 vue整合百度地图组件

vue有整合过百度地图的组件，但是不支持三维地球模式三维地球模型在最新的百度地图api中才有，Vue还没有整合最新的三维地球模式，React支持。

此处附上：

百度地图API（最新）地址：https://lbs.baidu.com/index.php?title=jspopularGL

VUE整合百度地图的组件地址：https://dafrok.github.io/vue-baidu-map/#/zh/index

import BaiduMap from 'vue-baidu-map'
// 引入第三方平台百度api
Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: '你申请的AK'
})

1.2 vue结合百度API实现

在vue项目中public文件夹下index.html中全局引入百度地图API

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AK"></script>

2.实际代码

2.1 部分代码如下

2.1.1 卫星图的加载

// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map('allmap')    // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 5)  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP)  // BMAP_EARTH_MAP这个就是地球模式（三维的），也可以替换成其他的

2.1.2 卫星的窗口

 // 卫星站窗口var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: object.stationName,  // 信息窗口标题}// 设置窗口的点击事件展示信息marker.addEventListener("click",function (event) {var infoWindow = new BMapGL.InfoWindow(object.status, opts);map.openInfoWindow(infoWindow, point);})

2.1.3 标记点

地图上创建标记点，可以点击展示信息窗口

 // 创建点 str[0], str[1] 是点的经纬度var point = new BMapGL.Point(str[0], str[1])// 地图上创建marker点var marker = new BMapGL.Marker(point)// 地图上添加点map.addOverlay(marker)

2.2 完整代码

我这里数据是从后端查询出来放到里面的，也可以使用假数据或者换成你们的数据。

如下：

<template><div><div id="allmap" style="width: 100%; height: 900px;"></div></div>
</template>
<script>import {getAction} from '@/api/manage'export default {data() {return {mapLocationObjs: {},locations: []}},created() {// 默认加载show方法this.show();this.putLocations();},mounted() {// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map('allmap')    // 创建Map实例map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 5)  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP)window.map = map;// 创建信息窗口对象/*  var marker = new BMapGL.Marker(new BMapGL.Point(116.280190, 40.049191)) // 创建点map.addOverlay(marker)             // 将标注添加到地图中*/},methods: {// 获取后端的数据show() {getAction("/sate/showMap").then((res) => {if (res.success) {this.mapLocationObjs = res;this.locations = res.result;console.log(this.locations);for(var i = 0; i < this.locations.length; i++){// 单个卫星站对象var locationObject = this.locations[i];// 根据逗号分隔坐标var str = this.locations[i].lla.split(',')// 创建点var point = new BMapGL.Point(str[0], str[1])var marker = new BMapGL.Marker(point)// 信息窗口展示this.putWindow(marker,point,locationObject);// 地图上创建点map.addOverlay(marker)}}})},// 标注弹框putWindow(marker, point, object) {// 卫星站对象var windowInfo = object;// 卫星站窗口var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: object.stationName,  // 信息窗口标题}marker.addEventListener("click",function (event) {var infoWindow = new BMapGL.InfoWindow(object.status, opts);map.openInfoWindow(infoWindow, point);})}}}
</script>
<style scoped>
</style>

VUE使用百度地图API实现三维地球相关推荐

Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
qml调用百度地图api实现卫星地球模式画路书轨迹
qml调用百度地图api实现卫星地球模式画路书轨迹总结下类型转换: pro文件中加入依赖的模块引入头文件 websockettransport.h main文件加入 qml index.html ...
vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
vue调用百度地图API
安装 $ npm install vue-baidu-map --save 全局注册在main.js 里面引入以下代码 import BaiduMap from 'vue-baidu-map'Vue ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
百度地图api卫星地球模式的调用
百度地图api卫星地球模式的调用调用百度地图api 注意事项调用百度地图api 下面是百度地图官方给的调用实例 <!DOCTYPE html> <html> <hea ...
百度地图API根据经纬度绘制轨迹图（Vue附源码）
目录导入百度地图绘制轨迹左侧点击事件添加窗口页面完整代码有用可以点个关注,收藏!! vue版本百度地图官方组件:https://dafrok.github.io/vue-baidu-map/ ...
基于vue+springboot的校园疫情健康打卡和离校审批系统的设计（百度地图API对接）
这个系统是本人近期的一个项目,开发周期大约是5天,是近年来非常有代表性的一个项目系统简介开发背景:在疫情防控的背景下,提升校园对于各类人员的健康管理,可以实时获取最新的疫情信息,并且对学生和教职工 ...

VUE使用百度地图API实现三维地球