IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue 项目中百度地图 API 使用流程 -> 正文阅读

[JavaScript知识库]vue 项目中百度地图 API 使用流程

一、在百度地图开放平台注册账号并登录、认证

1、网址:http://lbsyun.baidu.com/index.php?title=jspopularGL
2、认证:认证方式分为个人认证和企业认证,这个需要根据自己的需要按照流程填写认证信息;

二、创建 ak

控制台 -> 应用管理 -> 我的应用 点击 创建应用 填写相关申请信息:
在这里插入图片描述
创建成功之后可以在应用列表查看自己申请的应用 ak
在这里插入图片描述
这个 ak 在开发过程中是必须的;

三、项目使用

1、在 index.html 中引入

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

这里 ak 是第二步申请的应用 ak,必填;

2、调用

<template>
	<div id="BDMap" stype="height:500px; overflow:hidden"></div>
</template>
<script>
export default {
	mounted(){
		this.map();
	},
	methods:{
		map(){
			//创建MAP实例,enableMapClick:false :禁用地图默认点击弹框
			let map = new Bmap.Map("BDMap", { enableMapClick: false }); 
			//创建点坐标
			let point = new Point(116.404, 39.915);
			// 初始化地图,设置中心点坐标和地图级别
			map.centerAndZoom(point, 11); 
			// 添加地图类型控件
	      	map.addControl(new BMap.MapTypeControl({ 
		    	mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
		    }));
		    // 设置地图显示的城市 此项是必须设置的
		    map.setCurrentCity('北京'); 
		    // 开启鼠标滚轮缩放,不要的话注释掉着一行
		    map.enableScrollWheelZoom();
		}
	}
}
</script>

这里样式必须设置高度和 overflow:hidden,宽度根据自己需要设置;具体的需要根据自己的需求来添加不同的功能;

3、效果图
在这里插入图片描述

四、丰富的功能

百度地图提供了非常丰富的功能空间供我们使用:

1、常规功能

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类你可以自定义控件;
NavigationControl:地图平移缩放控件,PC 端默认位于地图左上方,它包含控制地图的平移和缩放的功能;移动端提供缩放控件,默认位于地图右下方;
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图;
ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系;
MapTypeControl:地图类型控件,默认位于地图右上方(地图,卫星,三维)。
CopyrightControl:版权控件,默认位于地图左下方。
GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。
在这里插入图片描述

2、地图事件
百度地图大部分 api 对象都含有 addEvemtListener 方法,我们可以用这个方法来自定义添加事件;同时也提供了 removeEventListener 事件来移除自定义的监听事件;

map.addEventListener('click',function(e){
	console.log(e)})
map.removeEventListener('click', 函数名)

3、地图覆盖物

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法;
Marker:标注表示地图上的点,可自定义标注的图标;
Label:表示地图上的文本标注,您可以自定义标注的文本内容;
Polyline:表示地图上的折线;
Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外你也可以为其添加填充颜色;
Circle: 表示地图上的圆;
InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息;注意:同一时刻只能有一个信息窗口在地图上打开;

具体的功能可以直接参考百度地图 api 实例中心;

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-04 15:27:11  更:2022-03-04 15:27:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:44:56-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码