一.百度地图介绍

百度地图API是一套为开发者提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地
图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码等功能。
百度地图API的官网是百度地图
使用之前需要注册成为开发者，根据提示进行实名认证，注册成功即可。
注册成功之后，打开控制台，进入应用管理，输入应用名称，类型，白名单写英文半角的*。
创建成功，显示下图，会显示密钥AK

二.百度地图的使用

1. 百度地图的使用步骤

获取刚才创建应用的密钥AK,引入百度地图的js，把你自己的AK替换为你自己的密钥AK,如下图所示
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>
创建地图的容器
<div id="container"></div>
初始化地图
var map=new BMap.Map("container")
创建一个地图中心点
var point new BMap.point(经度，纬度）
设置中心点和滚轮缩放
map.centerAndzoom(point, 1 5); //鼠标滚轮缩放 map.enableScrollWheelZoom(true);
经过以上步骤就创建了一个地图

2. 添加控件

创建一个地图之后，添加比例尺控件，缩放控件，城市列表控件

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

3.地图上绘制内容（覆盖物）

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。

在地图上绘制点

var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var  m = new BMapGL.Marker(p);

在地图上绘制折线

var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

在地图上绘制面，即多边形

var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

在地图上绘制圆

  // 绘制圆圈
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);

添加标注

var label = new BMapGL.Label("中国前端学习基地", {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量})
// 添加标签
map.addOverlay(label);                        // 将标注添加到地图中
// 设置标签的样式
label.setStyle({fontSize:"32px",color:"red"})

添加信息窗口

var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

移除覆盖物
map.removeOverlay(覆盖物);

4.地图事件

marker.addEventListener地图覆盖物都可以添加事件
addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。
通过removeEventListener方法移除对事件的监听

map.addEventListener('click', handleClick);
function handleClick (e) {alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);

5.百度地图的搜索功能

1.通过local.search 搜索关键字

var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map}})

6.如何在Vue项目中使用百度地图

方法一

public/index.html script引入百度地图
在组件中定义data
map: null, point: null, marker: null, keyword: "", local: null,
mounted初始化项目

// 初始化地图this.map = new window.BMapGL.Map(this.$refs.map);// 准备一个中心点（经度，纬度）this.point = new window.BMapGL.Point(116.404, 39.915);// 设置中心点和缩放级别this.map.centerAndZoom(this.point, 15);// 鼠标滚轮缩放this.map.enableScrollWheelZoom(true);//添加一个点this.marker = new window.BMapGL.Marker(this.point);//添加覆盖物this.map.addOverlay(this.marker);// 百度地图API功能this.local = new window.BMapGL.LocalSearch(this.map, {renderOptions: {map: this.map}});},

监听数据变化，更新地图

watch: {keyword:{handler() {if (this.keyword === "") {this.local.clearResults()this.map.centerAndZoom(this.point, 15);} else {this.local.search(this.keyword)}}}}

方法二

可以通过vue地图插件，vue-baidu-map 170-基于Vue2的百度地图组件库。官网是dafork

3.百度地图的案例

基础的地图案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=KHp5uI3NGByiMP20lWf2dEMCWUbYuS6c"></script></head><body><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(116.404, 39.915);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 不要去记忆，要去官网粘贴复制</script></body>
</html>

地图控件案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script></head><body><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(116.404, 39.915);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 不要去记忆，要去官网粘贴复制var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件map.addControl(cityCtrl);</script></body>
</html>

3. 添加点案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script></head><body><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(113.665,34.784);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 添加一个点var marker =new BMapGL.Marker(point);// 添加覆盖物map.addOverlay(marker); // 存储多个点var line = [];// 存储标记var markers = [];// 监听事件map.addEventListener("click",e=>{// 创建点var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);// 创建标记var  m = new BMapGL.Marker(p);markers.push(m);// 添加标记map.addOverlay(m);// 存储点line.push(p);})map.addEventListener("dblclick",e=>{// 把第0个点放入到最后面line.push(line[0]);// 创建多边形先var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})// var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});// 添加线// map.addOverlay(polyline);map.addOverlay(polygone);// 清空点的列表line = [];// stroke线，Color颜色，Weight粗细，OPacity透明度// 清空点markers.forEach(item=>map.removeOverlay(item));// 清空点markers = [];})var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});map.addOverlay(circle);</script></body>
</html>

添加标注案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script></head><body><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(113.665,34.784);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 添加一个点var marker =new BMapGL.Marker(point);// 添加覆盖物map.addOverlay(marker); // 创建标签var label = new BMapGL.Label("中国前端学习基地", {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量})  // 添加标签map.addOverlay(label);                        // 将标注添加到地图中// 设置标签的样式label.setStyle({fontSize:"32px",color:"red"})</script></body>
</html>

信息窗口案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script></head><body><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(113.665,34.784);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 添加一个点var marker =new BMapGL.Marker(point);// 添加覆盖物map.addOverlay(marker); var opts = {width: 250,     // 信息窗口宽度height: 200,    // 信息窗口高度title: "学好前端，月薪过万"  // 信息窗口标题}// 信息窗口var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单只有<strong>js</strong></p><img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F37d12f2eb9389b50d7a9ec85016fcad6e6116e7c.jpeg%40f_auto%3Ftoken%3Db6954495aabfec6648f5a7b29905e75e&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1667322000&t=622767397570980eb03b5acecd03756a" width="200">`, opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow,point);        // 打开信息窗口//  map.getCenter() 获取到地图的中心位置marker.addEventListener("click",e=>{// 单击显示map.openInfoWindow(infoWindow,point);    })</script></body>
</html>

添加搜索功能

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#container{width: 800px;height: 600px;}</style><!-- 01 导入js --><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script></head><body><input type=""  value="" onchange="search(this)" /><!-- 准备容器 --><div id="container"></div><script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(113.665,34.784);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 添加一个点var marker =new BMapGL.Marker(point);// 添加覆盖物map.addOverlay(marker); // 创建一个本地搜索var local = new BMapGL.LocalSearch(map, {renderOptions:{map: map}});function search(e){// 表单值发生变化时候进行搜索local.search(e.value);}</script></body>
</html>

以上就是关于百度地图的知识点啦，不积跬步无以至千里，能耐心看完这篇博客，说明你是一个有潜力的人，想了解更多，建议多翻看官方文档。

百度地图使用的详细教程相关推荐

web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
百度地图API的使用教程以及案例
百度地图API的使用教程以及案例一.注册百度地图:掌握当前的位置在网页显示位置,插入地图拖拽,点击事件. 注意:定位距离公交不关心官网: 点我进入百度地图官网应用场景:网页插入百度地图 ...
百度地图api根据详细地址反查坐标
用百度地图api根据详细地址反查坐标 /*** 根据详细地址反查坐标* @param args*/public static void main(String[] args) {String addr ...
百度地图安卓版详细接入流程解读（获取密钥详解）
百度地图安卓版详细接入流程解读一.接入Android地图SDK 1.1 功能介绍: 1.2 接入百度地图前的准备 1.1.1 访问官网,并下载开发包 1.1.2 获取开发密钥 1.1.3 项目环境搭 ...
Android之百度地图定位最详细使用总结
Android之百度定位如果项目里面有定位功能的话,一般还是觉得蛮高大上的,我们项目用的百度定位,到网上找了很多资料,很多都不全面,很多博客都没有小伙 ...
百度地图截图java_[Java教程]百度地图API 简单使用
[Java教程]百度地图API 简单使用 0 2015-08-24 19:00:12 最近项目上需要用到百度地图进行导航,参考百度地图API完成一个例子.API地址:http://developer. ...
用百度地图sdk返回详细地址描述
入职新公司之后,需要对现有的手机项目进行改版第一个改版就是在应用中添加定位的功能,可以用百度地图和高德地图sdk实现. 要求:gps或者网络定位到当前位置,取精度高的位置并返回详细地址描述先来看看 ...
cms是什么意思啊_织梦CMS网站如何自动提交百度快速收录（详细教程）
前不久,站长们发现百度搜索资源平台把链接提交"的功能改为"普通收录",同时新增了"快速收录"的功能.普通收录,我相信很多站长们都知道怎么去提交,但是快 ...
点击百度地图获取位置详细信息（点击获取当前点击位置信息）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

百度地图使用的详细教程

一.百度地图介绍

二.百度地图的使用

1. 百度地图的使用步骤

2. 添加控件

3.地图上绘制内容（覆盖物）

4.地图事件

5.百度地图的搜索功能

6.如何在Vue项目中使用百度地图

3.百度地图的案例

百度地图使用的详细教程相关推荐

最新文章

热门文章