uniapp中使用百度地图(初学者保姆式教学,持续更新)

uniapp中使用百度地图(保姆式教学,从零开始)

最近在写一个移动端的地图项目,也是首次完整的去了解百度地图api,这篇博客会手把手的教你如何使用百度地图api和一些常见问题,后续我也会继续更新完善此博客

1、百度地图api,获取密钥

为什么选择这个呢,作为顶级大厂,百度地图开放平台功能非常完善而且简单明了

请添加图片描述

这篇博客主要是以javascriptAPI为主

首先登入控制台左侧应用管理→我的应用→创建应用

请添加图片描述

请添加图片描述

完成这些后可以看到我的应用中多了个刚才创建的,里面的访问应用(AK)就是我们需要的AK。

2、uniapp中使用百度地图api

看了很多博客,有的博客说npm下载对应的然后全局挂载之类的,这里我按照官网所说的来写。

2.1web-view(第一个小重点!)

百度地图api与我们之前使用的过的其他组件不同,初学者看官网中写的是在html页面中使用,然后uniapp项目里我们的页面却是.vue的文件,所以很懵逼。所以在这里呢,我们用到了uniapp中一个组件,名字叫web-view请添加图片描述

官网这句话什么意思呢,简单的来说就是类似一个iframe标签,也就是我们常说的在一个页面中嵌套另一个页面,并且我们嵌套的这个页面呢会自动铺满整个页面(除非我们给它设置宽高)

也就是说我们在要显示的.vue文件里加上标签来引入我们的.html文件,从而实现在页面中使用百度地图

2.2实例(h5端测试)

首先我们创一个map.html的文件(这里建议把文件放在static目录下,不然在vue中引入的时候会发现没反应)

请添加图片描述

层级目录这个有几个都无所谓,反正根目录得在static下,然后我们编辑下map.html文件

//这个文件里面就是我们对百度地图进行一系列操作和更改的地方
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%
			}
 
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
 
			#mapPage {
				height: 100%;
				position: relative;
			}
 
			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
		</div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
 
	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=这里填刚才我们在百度地图控制台中得到的AK"></script>
  
  
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
 			var map = new BMapGL.Map("container");          // 创建地图实例 
			var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
			map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			map.setHeading(64.5);   //设置地图旋转角度
			map.setTilt(73);       //设置地图的倾斜角度		
		});
	</script>
</html>

然后我们打开我们要用地图的那个vue文件

<template>
	<view class="map">
      	//在web-view标签中引入我们map.html文件的地址,如果没显示出来,按照上面说的把map.html文件放到static目录下
      //不设置宽高的话地图就会默认的铺满整个页面
		<web-view src="/static/html/map.html" style="width: 100%;height: 500px;"></web-view>
      
	</view>
	
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {

		}
		
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 300px;
	}
</style>

最后让我们运行一下项目

请添加图片描述

可以看到地图已经加载出来了

3、百度地图api基本参数和使用介绍

基本使用讲解

var map = new BMapGL.Map("container");//创建地图实例,与id匹配
var point = new BMapGL.Point(116.404, 39.915);//创建中心点的坐标(经纬度),百度地图在坐标上有个转换,百度对外接口用的是BD09坐标系,这个下一个博客会细说
map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

部分参数

map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件,地图左下方
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件,地图右下方
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件,左上方
map.addControl(cityCtrl);
var copyrightCtrl = new BMapGL.CopyrightControl();  // 添加版权控件,左下方
map.addControl(copyrightCtrl);					

切换成2d地图

map.setHeading(0);  
map.setTilt(0); 
//上面这两个值不要或者像我一样设置成0,然后添加地图类型为默认
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,

]}));

关于地图交互功能和坐标转换功能在下一篇博客里

关于百度地图的简单使用,就写到这里,谢谢大家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/3348.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实验九 TSP问题

《算法设计与分析》实验报告 所在院系 计算机与信息工程学院 学生学号 学生姓名 年级专业 2020级计算机科学与技术 授课教师 彭绪富 学 期 2022-2023学年第一学期 提交时间 2022年10月26日 目 录 实验九-1&#xff1a;TSP问题 一、实验目的与要求 二…

html+css制作

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>校园官网</title><style type"text/css">*{padding: 0;margin: 0;}#logo{width:30%;float: left;}.nav{width: 100%;height: 100px;background-color…

mybatis如何解析常用的标签

通过这三行就解析好了一个mybatis配置文件&#xff0c;我们看看如何工作的&#xff1f; String resource "mybatis-config.xml"; Reader reader Resources.getResourceAsReader(resource); SqlSessionFactory sqlSessionFactory new SqlSessionFactoryBuilder().b…

【进阶C语言】qsort库函数(详解)

qsort库函数1. qsort到底是什么&#xff1f;2. qsort库函数的功能3. qosrt函数详解4. 冒泡排序的实现5. qsort库函数如何实现冒泡排序6. qsort库函数排序结构体数据7. 使用冒泡排序的思想来实现类似于qsort1. qsort到底是什么&#xff1f; qsort是C语言库函数里面的一种&#x…

【Flutter·学习实践·配置】认识配置文件pubspec.yaml

目录 简介 pubspec.yaml 添加Pub仓库 其他依赖方式 依赖本地包 依赖Git 简介 简单说就是包管理工具&#xff0c;类似于Android 提供了 Gradle 来管理依赖&#xff0c;iOS 用 Cocoapods 或 Carthage 来管理依赖&#xff0c;Node 中通过 npm 等。 让我们能很好的管理第三…

固定优先级仲裁器设计

前言仲裁器Arbiter是数字设计中非常常见的模块&#xff0c;应用也非常广泛。定义就是当有两个或两个以上的模块需要占用同一个资源的时候&#xff0c;我们需要由仲裁器arbiter来决定哪一个模块来占有这个资源。一般来说&#xff0c;提出占有资源的模块要产生一个请求(request)&…

电脑硬盘文件数据误删除/格式化为什么可以恢复? 怎么恢复?谈谈文件删除与恢复背后的原理

Hello 大家好&#xff0c; 我是元存储~ 主页&#xff1a;元存储的博客_CSDN博客 1. 硬盘数据丢失场景 我们在每天办公还是记录数据的时候&#xff0c;文件存储大多数都是通过硬盘进行存储的&#xff0c;因此&#xff0c;使用多了&#xff0c;各种问题就会出现&#xff0c;比如…

【C++初阶】五、内存管理

文章目录1. C/C内存分布2. C语言中动态内存管理3. C中动态内存管理方式new/delete操作内置类型new和delete操作自定义类型4.C和C在内存申请失败时处理方式的区别5. operator new与operator delete函数6. new和delete的实现原理内置类型自定义类型7. 定位new表达式(placement-ne…

【 Spark编程基础 】实验1

文章目录第1部分&#xff1a;虚拟机的准备工作1.1 下载安装虚拟机1.2 修改主机名1.3 主机ip映射安装SSH服务端SFTP连接&#xff0c;传输安装包安装Java环境第2部分 Hadoop安装2.1 安装Hadoop第3部分 配置集群环境第4部分 Spark安装第1部分&#xff1a;虚拟机的准备工作 1.1 下…

【设计模式-工厂方法】想象力和创造力:你考虑过自动化实现工厂吗?

无限思维-想象力和创造力&#xff1a;自动化实现工厂方法前言一、《大话设计模式》对应的Java版本工厂方法类图先行&#xff1a;代码实现&#xff1a;思考升华&#xff1a;二、想象力&#xff1a;创新型思维解决思路战略上&#xff1a;以无限思维的角度去想问题&#xff1a;部署…

SpringBoot整合数据可视化大屏使用

1 前言 DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。DataV旨让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求, 访问地址:h…

文件上传的多种利用方式

文件上传的多种利用方式 文件上传漏洞除了可以通过绕过检测进行webshell的上传之外&#xff0c;还有多种其它的漏洞可以进行测试。 XSS漏洞 文件名造成的XSS 当上传任何文件时&#xff0c;文件名肯定是会反显示在网页上&#xff0c;可以使用 XSS Payload做文件名尝试将其上传到…

upload—labs(9-12)

pass9直接查看的源码&#xff0c;得知是黑名单过滤&#xff0c;而且过滤也都很全通过查看wp&#xff0c;得知我们可以使用. .(点空格点)进行绕过利用bp抓包进行更改trim删除文件名末尾的点&#xff0c;得到shell.php.空格&#xff0c;然后进行首尾去空得到shell.php.,黑名单过滤…

Java并发高频面试题

分享50道Java并发高频面试题。 线程池 线程池&#xff1a;一个管理线程的池子。 为什么平时都是使用线程池创建线程&#xff0c;直接new一个线程不好吗&#xff1f; 嗯&#xff0c;手动创建线程有两个缺点 不受控风险频繁创建开销大 为什么不受控&#xff1f; 系统资源有…

【机器学习基础 3】 sklearn库

目录 一、sklearn库简介 二、sklearn库安装 三、关于机器学习 四、sklearn库在机器学习中的应用 1、数据预处理 2、特征提取 3、模型选择与评估 五、常用的sklearn函数 1、数据集划分 2、特征选择 3、特征缩放 4、模型训练 5、模型预测 一、sklearn库简介 Scikit-l…

基于卷积神经网络进行股价预测(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 CNN是一种人工神经网络&#xff0c;CNN的结构可以分为3层&#xff1a; 卷积层(Convolutional Layer) - 主要作用是提取特征。 …

C语言基础——流程控制语句

文章目录一、流程控制语句 -- 控制程序的运行过程 9条&#xff08;一&#xff09;、条件选择流程控制语句&#xff1a;if语句if……else……语句if……else if……语句switch语句&#xff08;二&#xff09;、循环流程控制语句&#xff1a;for语句while语句do while……语句co…

Linux学习之端口、网络协议及查看端口占用情况

端口&#xff1a;设备与外界通讯交流的出口 网络协议&#xff1a;   网络协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则。 HTTP协议&#xff1a;   HTTP协议&#xff08;超文本传输协议&#xff09;是一种网络通信协议&#xff0c;它允许将超…

Mac和Linux安装Mongodb教程

Mac教程 在mongodb的官网中有mac环境的安装配置说明 在mac上安装mongodb有两种方式&#xff1a; &#xff08;1&#xff09;使用Homebrew来安装&#xff0c;如果电脑中有Homebrew&#xff0c;安装起来就比较简单&#xff0c;如果没有可以安装一个&#xff0c;以后安装其他的…

【C++学习】多态

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 多态&#x1f355;多态&#x1f35f;构成多态的条件&#x1f35f;C11 final override&#x1f35f;重…