百度地图

介绍： 百度地图智能定位开放服务正式升级为北斗定位开放平台，助力百万开发者轻松实现安全、精准、稳定的定位功能。

官网：百度地图入口

使用百度地图的前提你要有百度地图的账号！

一，注册账号

傻瓜式注册！跟着教程走就行

二，创建应用

密钥所在

三，使用百度地图

1，引入

<script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=21OlRDn0qp1jQlFPctUCDtPdtvj8KEjk">
</script>

2，创建一个盛放地图的容器（容器要设置大小不然地图出不来）

container 里什么也不写

<style>
#container{width: 800px;height: 600px;}
</style>
<div id="container"></div>

3，实例化地图和添加控件

<script>// 初始化地图var map = new BMapGL.Map("container")// 准备一个中心点（经度，纬度）var point = new BMapGL.Point(116.404, 39.915);// 设置中心点和缩放级别map.centerAndZoom(point, 15); // 鼠标滚轮缩放map.enableScrollWheelZoom(true);// 不要去记忆，要去官网粘贴复制
</script>

效果图

4，添加地图控制器

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

效果图

5，添加点

全部代码

<!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>

效果图

6，添加标签

<!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>

效果图

7，添加信息窗口

<!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>

效果图

8，添加搜索功能

<!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>

效果图

四，在 Vue 中使用 百度地图

1，在views 里创建一个BaiduView文件

2，在 router文件夹中的index.js里

 // 百度地图页面{path: '/baidu',name: 'baidu',component: () => import('../views/BaiduView.vue')},

3，在public文件夹中的index.html 里引入 百度地图

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>

BaiduView文件 代码：

<template><div><h1>百度地图</h1><input type="text" v-model.lazy="keyword" ><div id="map" ref="map"></div></div>
</template><script>export default {data() {return {map: null,point: null,marker: null,keyword:"",local:null,}},mounted() {// 为什么第三方api需要加window// echarts 还是BMapGL都是挂载到window上面的// 如果直接使用在当前的组件里面没有导入这个BMapGL 会报错？（效果也会出来，js会向上查找到）// 基本上第三方组件，都需要在 mounted组件渲染完毕后再执行初始化（确保js已经加载完毕）this.map = new window.BMapGL.Map(this.$refs.map);this.point = new window.BMapGL.Point(113.665, 34.784);this.map.centerAndZoom(this.point, 15);// 鼠标滚轮缩放this.map.enableScrollWheelZoom(true);// 添加一个点this.marker = new window.BMapGL.Marker(this.point);// 添加覆盖物this.map.addOverlay(this.marker);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)}}}}}
</script><style>#map {width: 100%;height: 70vh;}
</style>

最终效果图

详细教程可以区官方网站去查找！

百度地图使用（保姆式教学）相关推荐

  1. (保姆式教学) Win10 + Ubuntu 20.04——双系统安装方法 + 配置显卡 + root权限 + flash调配

    目录标题 Win10 + Ubuntu 20.04--双系统安装方法 + 配置显卡 + root权限 + flash调配(保姆式教学) 请同学们提前准备: 第一步:准备U盘 第二步:确定自己电脑的类型 ...

  2. 家庭如何实现外网映射?--最全的保姆式教学

    家庭如何实现外网映射?–最全的保姆式教学 0.背景 外网映射可以实现那些功能:个人网站搭建.访问家庭硬件设备(树莓派.服务器)等 有了上述功能需求以后家用服务的外网映射问题问题就会暴露出来,本文既解决 ...

  3. Python进程和线程保姆式教学，1个台机子多只手干活的秘籍

    进程线程有多重要?刚开始学Python的时候你可能还没有感觉到,因为你写的代码从上到下执行一遍就可以了,但实际上这很初级,实际开发写项目的时候,为了充分利用电脑配置来加快程序进度,我们往往会用到多进程 ...

  4. 一看就会！一篇全搞定！权限处理专家--Shiro保姆式教学，超详细！

    轻量级权限处理框架--Shiro 前言 Shiro三大对象 Subject SecurityManager Realm Authentication和Authorization Authenticat ...

  5. 保姆式教学--教室友从买服务器到怎么搭建内网隧道

    一.购买云服务器 怎么购买? 三个主流厂商:华为云.腾讯云.阿里云 --------拿阿里云举例. 首先第一步.我们要百度搜索 阿里云→进入官网→选择最便宜的服务器(新用户或学生优惠). 这里首先轻量 ...

  6. 【React+ts】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd（保姆式教学）

    前提 你需要准备好node.js版本不低于6.14.8 和 git 文章内容比较长(保姆级别教程),全是干货,请耐心看完 通过create-react-app脚手架搭建项目 1.第一步 注: 项目名称 ...

  7. nginx本地服务器的搭建(保姆式教学)

    一. 为什么要使用Nginx 1.1 静态资源访问(功能1) 前端项目在进行服务器部署的时候,如果基于tomcat则不能满足并发的需求,因此我们需要一种能够处理更高并发的适用于静态资源的服务器 1.2 ...

  8. 4万字【Python高级编程】保姆式教学，进阶感觉到吃力？学完这些就轻松了

    前几天和一个小伙子聊天时,发现了一个问题,他从零开始学Python,学完列表.字典和函数等基础之后,就开始往爬虫方向进阶学习,结果又花了一个多月的时间,啥也没学成,反而寸步难行. 其实这个问题的主要原 ...

  9. Python【进程和线程】保姆式教学，1个台机子多只手干活的秘籍

    进程线程有多重要?刚开始学Python的时候你可能还没有感觉到,因为你写的代码从上到下执行一遍就可以了,但实际上这很初级,实际开发写项目的时候,为了充分利用电脑配置来加快程序进度,我们往往会用到多进程 ...

最新文章

  1. VBScript 之文件 IO 篇
  2. Cisco和H3C的两种不同动态***解决方案
  3. 【BZOJ1492】[NOI2007]货币兑换Cash 斜率优化+cdq分治
  4. 使用 Android 实现联网
  5. ipsec ip替换_点到多点ipsec-vpn NAT穿透和固定IP共存
  6. R语言空间数据处理(part2)--空间数据读写
  7. redis常见面试题有哪些?redis集群面试题及答案整理
  8. 一. JVM发展史，运行时数据区域，四大引用
  9. 版本控制-代码和文档等用SVN管理
  10. Windows Azure HandBook (8) Azure性能测试(1)
  11. 流密码：lfsr（线性反馈移位寄存器）
  12. QOS概述（一）服务模型
  13. 项目经理的岗位职责和要求
  14. python快递费用计算_Python实现快递查询
  15. 阿里云视频云正式支持AV1编码格式 为视频编码服务降本提效
  16. AI笔记: 数学基础之正交矩阵与矩阵的QR分解
  17. win10 docker 容器修改端口映射
  18. 分享一个latex的beamer模板
  19. 23种设计模式 单例 （整理摘抄优秀的博文） 记住
  20. 基于树莓派的Azure物联网实践（一）

热门文章

  1. 对ElasticSearch主副分片的理解
  2. FCKeditor简介
  3. Seq2Seq实战——机器翻译
  4. 屏幕小于6英寸的手机_6英寸以内的小屏旗舰手机推荐，纯手感无敌！
  5. 互联网校招（入门向）
  6. 湖北公安机关出台10条措施服务民营经济发展
  7. C#，图像二值化（22）——局部阈值的伯恩森算法（Bernsen Thresholding）及源程序
  8. Jquery(二)之高级用法
  9. wordpress优化插件_专为移动设备优化的社交共享WordPress插件
  10. 用OpenGL码一艘战舰~哈哈