【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图(超详细)

news/2024/3/29 13:18:51/文章来源:https://blog.csdn.net/qq_59012240/article/details/127624631

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图(超详细)


1- 介绍

百度地图功能强大,本篇文章只是对百度地图JavaScript API 进行一个介绍~

  • 官方网址 百度地图开放平台
  • LBS:LocationBusinessServer 基于定义位置的商业服务

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。

2- 使用

2-1注册

在使用百度地图之前,要拥有一个自己的百度账号,申请注册成为百度开发者,然后创建一个应用,就可以获取到一个唯一的服务秘钥(AK)

  • 具体流程

在这里插入图片描述

2-2创建应用

在这里插入图片描述

2-3获取AK

在这里插入图片描述

经过以上三步,就创建好属于自己的一个AK

3- helloword (入门指南)

  • 首先,我们看着官方文档操作一下,如何使用?
  • step1 : 在官方网址下,找到开发文档下的JavaScript API

在这里插入图片描述

  • 点击进入,找到Hello World
    在这里插入图片描述
  • 按照下列步骤进行

在这里插入图片描述

  • 代码部分

01 引入js

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

02 准备容器

 <style type="text/css">html {height: 100%;}body {height: 100%;margin: 0px;padding: 0px;}#container {height: 100%;}</style></head><body><!-- 准备容器 --><div id="container"></div></body>

03 初始化地图

 // 初始化地图var map = new BMapGL.Map("container")

04 创建一个地图中心点

 // 准备一个中心点(经度和纬度)var point = new BMapGL.Point(116.404, 39.915);

05 设置中心点和滚轮缩放

//鼠标滚轮播放
map.enableScrollWheelZoom(true);

在这里插入图片描述

  • 运行代码

在这里插入图片描述

3- 添加控件(创建地图)

我们给地图添加控件,控件是负责与地图交互的UI元素,百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。

  • 控件介绍

在这里插入图片描述

在这里插入图片描述

  • 向地图添加控件

使用Map.addControl()方法向地图添加控件。

  • 声明控件并添加到地图中(复制此段代码到案例中)
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

在这里插入图片描述

  • 运行结果

在这里插入图片描述

4- 添加点、面、线(覆盖物)

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

  • 提供的覆盖物

可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物。

在这里插入图片描述

4.1 添加标注点

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。

API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为PointMarkerOptions(可选)。

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

4-2 添加折线

Polyline表示地图上的折线覆盖物,它包含一组点,并将这些点连接起来形成折线。

var polyline = new BMapGL.Polyline([new BMapGL.Point(116.399, 39.910),new BMapGL.Point(116.405, 39.920),new BMapGL.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

4-3 添加多边形(面)

Polygon表示地图上的多边形覆盖物,它包含一组点。多边形将这组点按顺序首尾相连,最终围成一个封闭图形。

var polygon = new BMapGL.Polygon([new BMapGL.Point(116.387112,39.920977),new BMapGL.Point(116.385243,39.913063),new BMapGL.Point(116.394226,39.917988),new BMapGL.Point(116.401772,39.921364),new BMapGL.Point(116.41248,39.927893)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

4-4 综合使用

  • 01- 点击创建点、线,双击连接在一起(且点消失)
    <script>// 初始化地图var map = new BMapGL.Map("container");// 准备一个中心店(经度和纬度)// var point = new BMapGL.Point(116.404, 39.915);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);// console.log(e);//存储点line.push(p);});map.addEventListener("dblclick", (e) => {//把第0个点放入到最后面line.push(line[0]);//创建多边形var polyline = new BMapGL.Polyline(line, {strokeColor: "blue",strokeStyle: "dashed",strokeWeight: 2,strokeOpacity: 0.5,enableEditing: "true",});//添加线map.addOverlay(polyline);//清空点的列表line = [];//markers.forEach((item) => {map.removeOverlay(item);});//清空点markers = [];});</script>
  • 02- 运行结果

在这里插入图片描述

4-5 绘制圆圈

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

在这里插入图片描述

 运行结果如下:

在这里插入图片描述

4-6 添加地图的标注

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

在这里插入图片描述

  • 运行结果

在这里插入图片描述

5- 信息窗口

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

  • 提供的信息窗口

InfoWindow:信息窗口。也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

  • 添加信息窗口

信息窗口是地图上方浮动显示的HTML内容,可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。

var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
  • 扩展代码
//添加一个点var marker = new BMapGL.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中var opts = {width: 250, // 信息窗口宽度height: 150, // 信息窗口高度title: "下楼做核酸了", // 信息窗口标题};var infoWindow = new BMapGL.InfoWindow(`<p>快点的吧,还有再做三天</p><img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wB6C?ver=dddf" width="50%">`,opts); // 创建信息窗口对象// map.openInfoWindow(infoWindow, point); //打开信息窗口//监听事件map.addEventListener("click", function (e) {map.openInfoWindow(infoWindow, point);});
  • 样式实现

在这里插入图片描述

6- 搜索

在这里插入图片描述

  • 代码
        <style type="text/css">html {height: 100%;}body {height: 100%;margin: 0px;padding: 0px;}#container {height: 90%;width: 50%;}</style></head><body><!-- 准备容器 --><input type="text" onchange="search(this)" /><div id="container"></div></body>
<!-- 01导入js -->
<script  type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script><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); // 将标注添加到地图中// 百度地图API功能var local = new BMapGL.LocalSearch(map, {renderOptions: { map: map },});function search(e) {//表单值发生变化时候进行搜索local.search(e.value);}</script>

在这里插入图片描述

  • 运行结果

在这里插入图片描述

7- vue中使用百度地图

7.1 引入百度地图

public/index.js 中引入script ,引入百度地图

在这里插入图片描述

7.2 新建容器

新建容器,一定要设置宽高

在这里插入图片描述

7.3 定义data

在组件中定义data

data() {
return {
map: null,
point: null,
marker: null,
keyword: "",
local: null,};},

在这里插入图片描述

7.4 初始化项目

mounted 初始化项目

mounted() {
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 },});},

在这里插入图片描述

7.5 监听数据变化

监听数据变化,更新地图

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

在这里插入图片描述

7.6 完整代码

  • 在自己的项目里,新建BaiduView.vue ,到router/index.js 配置一下

在这里插入图片描述

  • 完整代码(带搜索功能的地图)
<template><div><h1>百度地图</h1><input type="text" v-model.lazy="keyword" /><div id="map" ref="map"></div></div>
</template>
<style scoped lang="scss">
#map {height: 90vh;width: 100%;
}
</style>
<script>
export default {data() {return {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(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>
  • 运行结果

在这里插入图片描述

7.7 可以使用vue地图插件

当然,如果不想在vue里使用百度地图的话,还可以使用vue插件,以下这个是推荐

vue-baidu-map 基于Vue.2 的百度地图组件库


往期传送门

【ECharts】echarts数据化图表入门级教程(附10个案例)

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

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

相关文章

Spark 离线开发框架设计与实现

一、背景 随着 Spark 以及其社区的不断发展&#xff0c;Spark 本身技术也在不断成熟&#xff0c;Spark 在技术架构和性能上的优势越来越明显&#xff0c;目前大多数公司在大数据处理中都倾向使用 Spark。Spark 支持多种语言的开发&#xff0c;如 Scala、Java、Sql、Python 等。…

Matlab神经网络函数newff()新旧用法差异

在Matlab R2010a版中,如果要创建一个具有两个隐含层、且神经元数分别为5、3的前向BP网络,使用旧的语法可以这样写:net1 = newff(minmax(P), [5 3 1]); 注意minmax()函数的使用,还有对输出层神经元数(1)的指定。当然也可以采用新的语法,更简洁(请留意差异):net2 = new…

形态分类行为中的气泡佯谬

“假设光归根结底是波&#xff0c;只是给我们以粒子的印象&#xff0c;因为粒子吸收光波的能量是以离散的包的方式。波从源头传播出去像一个越来越大正在膨胀的气泡&#xff0c;到达一个原子时&#xff0c;气泡破裂&#xff0c;波坍缩并把所有的能量集中在一个地方&#xff0c;…

【数字式时间继电器】TR-23 DC110V

系列型号 TR-20数字式时间继电器&#xff1b;TR-21数字式时间继电器&#xff1b; TR-22数字式时间继电器&#xff1b;TR-23数字式时间继电器&#xff1b; TR-24数字式时间继电器&#xff1b;TR-25数字式时间继电器&#xff1b; TR-20D数字式时间继电器&#xff1b;TR-21D数字式…

无刷电机控制基础(3)——FOC矢量控制入门

本节我们讲一些无刷电机FOC矢量控制的入门知识。 1&#xff09;FOC矢量控制的作用 我们前两节讲的无刷电机&#xff08;BLDC&#xff09;&#xff0c;是最简单的结构&#xff0c;当转子匀速转动时&#xff0c;定子内产生的反电动势是梯形波&#xff1b;在驱动无刷电机转动时&a…

你不知道的JavaScript-----强制类型转换

目录 值类型转换 抽象值的操作 JSON 字符串化 ToNumber&#xff1a; 非数字值到数字值 Number(value) ToBoolean: 转换为布尔类型 Boolean(value) 强制类型转换 字符串和数字之间的显式强制类型转换 奇特的~运算符 字位截除 显式解析数字字符串 显式转换为布尔值 隐…

Mybatis查询返回结果类型专题

文章目录一、返回一条信息二、返回List集合三、返回Map集合四、返回多个Map集合五、返回List集合一、返回一条信息 Student selectById(Long id); 不再赘述 二、返回List集合 List< Student> selectAll(); 不再赘述 三、返回Map集合 用map集合去接收返回来的结果 字…

Python-- list(列表)的使用

目录 1.合并两个有序序列构成一个有序列表 2.编写程序判断列表是否为升序 3.输入一个十进制转换为二进制输出 4.将列表中的前p个元素到尾列表 1.合并两个有序序列构成一个有序列表 代码如下&#xff1a; list1 list(eval(input("请输入有序列表list1:"))) list…

【飞桨PaddleSpeech语音技术课程】— 一句话语音合成全流程实践

(以下内容搬运自飞桨PaddleSpeech语音技术课程&#xff0c;点击链接可直接运行源码) 一句话语音合成全流程实践 点击播放视频 1 声音克隆介绍 & 语音合成基本概念回顾 语音合成&#xff08;Speech Sysnthesis&#xff09;&#xff0c;又称文本转语音&#xff08;Text-t…

Web前端:angular对比React——选择2022年Web开发的理想框架

Javascript世界中的框架列表不断增长和变化&#xff0c;但有两个框架从其他框架中脱颖而出。Angular和React是市场上最受欢迎的框架之一&#xff0c;代表了创建web应用程序和网站的两种不同方法。 试图利用web开发框架的开发人员和企业家现在正在分析Angular和React——这两种方…

软考下午题第2题——E-R图 UML图 逻辑结构设计-示题与解析

下午的第二题主要是找【属性】【主键】【外键】【候选键】之间的关系。 候选键&#xff1a;属性或者是属性组合&#xff0c;其值能够唯一地标识一个元组 主键&#xff1a;在一个关系中可能有多个候选键&#xff0c;从中选择一个作为主键 外键&#xff1a;如果一个关系中的属性或…

微机期末复习指导

目录 位扩展定义字扩展定义1、线选法定义优点缺点2、部分译码法定义3、全译码法定义优点缺点⭐字位扩展定义问题

高压放大器基于声纹影法的声可视化实验的应用

实验名称&#xff1a;高压功率放大器基于声纹影法的声可视化实验应用 研究方向&#xff1a;声学超表面声学隐身斗篷 实验内容&#xff1a;利用声纹影平台&#xff0c;对所设计的声隐身斗篷进行出射平面波的测量&#xff0c;采用安泰放大器来驱动平面超声波阵列&#xff0c;可以…

CSS3专题-[上篇]:过渡、2D转换、动画

目录 CSS3&#xff1a;前置特性 CSS3&#xff1a;盒子模型 CSS3&#xff1a;图片滤镜与模糊处理 blur()&#xff1a;高斯模糊 CSS3&#xff1a;计算盒子宽度calc()函数 CSS3&#xff1a;过渡效果 transition属性 2D转换&#xff1a;transform属性 translate()方法 * t…

Mybatis MappedStatement

MappedStatement MappedStatement 类是 Mybatis 框架的核心类之一&#xff0c;它存储了一个 sql 对应的所有信息 Mybatis 通过解析 XML 和 mapper 接口上的注解&#xff0c;生成 sql 对应的 MappedStatement 实例&#xff0c;并放入 SqlSessionTemplate 中 configuration 类属…

凭此五点 这款信创传输系统解决了传输的迫切需求

早在20世纪80年代&#xff0c;我国政府IT底层基础软硬件的自主创新提出了相关要求&#xff0c;但受制于国外巨头垄断关键技术&#xff0c;诸多系统性风险与安全隐患无力解决。自2018年以来&#xff0c;在中兴和华为等公司供应链危机的催化下&#xff0c;信创产业进入快速发展期…

Verilog设计参数化的译码器与编码器,以及设计4位格雷码计数器

Verilog设计参数化的译码器与编码器&#xff0c;以及设计4位格雷码计数器 使用Quartusmodelsim完成设计 文章目录Verilog设计参数化的译码器与编码器&#xff0c;以及设计4位格雷码计数器1. 参数化的译码器分析代码实现Testbench结果2. 参数化的编码器分析代码Testbench结果3.…

Redis 主从架构数据同步

Redis 主从架构图 主从架构能够很大提升并发能力&#xff0c;master 节点负责写数据&#xff0c;slave 节点负责读数据&#xff0c;这样就涉及到 master 和 slave 数据同步的一个过程 一起来看一下数据是如何同步的吧 redis 的主从同步机制可以确保 master 和 slave 之间的数据…

Kubernetes 架构介绍

目录 一、Kubernetes 架构 1、Kubernetes 是什么&#xff1f; 2、Kubernetes 架构 3、Master 节点 4、Node 节点 5、推荐Add-ons 6、Kubeadm 7、查看组件运行状态 8、Kubeadm 容器化组件 二、namespace 1、命名空间 — namespace 2、常用命名空间命令 1. 查看存在哪…

【操作系统】混合索引分配和链接分配相关练习题

混合索引分配练习题&#xff1a; 比较简单&#xff0c;容易理解 练习1&#xff1a; 在UNIX操作系统中&#xff0c;给文件分配外存空间采用的是混合索引分配方式&#xff0c;如下图所示。UNIX系统中的某个文件的索引结点指示出了为该文件分配的外存的物理块的寻找方法。在该索…