创建地图

1. 引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

密钥就是访问应用下面的一串字符

2. 初始化地图逻辑

首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图

var map = new BMapGL.Map("container");          // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

container就是容器

3. 开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

        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);

至此我们完成了一个完整的地图展示的例子

绘制点、线、面

点

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

向地图中心点添加了一个标注，并使用默认的标注样式

        map.addEventListener("click", e => {var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);var m = new BMapGL.Marker(p);last = mmap.addOverlay(m);                     // 将标注添加到地图中})

单击在地图中添加点的效果

线、面

        // 添加点var marker = new BMapGL.Marker(point);        // 创建标注   map.addOverlay(marker);     // 将标注添加到地图中// 记录点的数组var lineArr = [];// 记录上一个个var last = null;// 添加事件      map.addEventListener("click",e=>{  //  有上一个就移除上一个last?map.removeOverlay(last):'';       // 获取单击点的位置(经度，纬度)var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); // 添加到数组组件lineArr.push(p);// 创建一个标记var m = new BMapGL.Marker(p); // 重新定义上一个last = m;// 显示标记map.addOverlay(m);     })// 双击事件map.addEventListener("dblclick",()=>{// 移除最后点map.removeOverlay(last)// 多边线 strokeColor颜色  strokeWeight线粗细 strokeOpacity 线的透明度        // var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});// 显示线// map.addOverlay(polyline);var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"})map.addOverlay(polygon);// 清空数组lineArr=[];

将 lineArr 按顺序首尾相连，最终围成一个封闭图形的效果

画圈

        var circle = new BMapGL.Circle(point, 1000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆map.addOverlay(circle);

地图中心画圆

文本标注

        var content = "<strong style='color:red'>中国</strong>牛";var label = new BMapGL.Label(content, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量})map.addOverlay(label);

效果如下：

信息窗口

        var opts = {width: 250,     // 信息窗口宽度height: 200,    // 信息窗口高度title: "Hello"  // 信息窗口标题}// 内容var content = `<p>终身学习爱好者</p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="120">`var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口// 通过标记添加单击事件，打开信息窗口marker.addEventListener('click', () => {map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

效果如下：

关闭之后可以通过点击标志点重新打开

在vue中使用百度地图

1. 在 pulic 下的 index.html 中引入

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

2. 在使用的文件里

<template><div><div id="container" ref="dom"></div></div>
</template>
<style>
#container {width: 800px;height: 600px;
}
</style>
<script setup>
import { ref, onMounted } from "vue";
const dom = ref();
let map;
onMounted(() => {map = new BMapGL.Map(dom.value);// 创建地图实例var point = new BMapGL.Point(113.6648, 34.7835);// 创建点坐标map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true);map.setMapType(BMAP_EARTH_MAP);
});
</script>

第一次接触百度地图？前端看这篇就够啦相关推荐

Spring Cloud入门，看这篇就够了！
点击▲关注 "中生代技术" 给公众号标星置顶更多精彩第一时间直达概述首先我给大家看一张图,如果大家对这张图有些地方不太理解的话,我希望你们看完我这篇文章会恍然大悟. 什 ...
Cookie、Session、Token、JWT 看一篇就够了
目录 Cookie.Session.Token.JWT 看一篇就够了什么是认证(Authentication) 什么是授权(Authorization) 什么是凭证(Credentials) 怎么让 ...
[个人向]超快速了解微信小程序:看这篇就够了!(注册、语言、框架、配额等简要说明)
[个人向]超快速了解微信小程序看这篇就够了+相关简要说明本文精炼微信小程序开发文档相关内容,旨在对初次接触并准备开发小程序的童鞋(比如自己)提供一个快速了解攻略.其中包括注册相关.语言.框架模式.相 ...
uiautomation遍历windows所有窗口_万字长文！滑动窗口看这篇就够了！
大家好,我是小浩.今天是小浩算法 "365刷题计划" 滑动窗口系列 - 整合篇.之前给大家讲解过一些滑动窗口的题目,但未作系统整理. 所以我就出了这个整合合集,整合工作中除了保留原 ...
.NET Core实战项目之CMS 第二章入门篇-快速入门ASP.NET Core看这篇就够了
本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新手朋友),但是转念一想不如来点猛的(考虑到急性子的朋友),让你通过本文的学习就能快速的入门ASP.NET Core.既 ...
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...
Docker入门实战看这篇就够了(最新详细以及踩过的坑)
Docker入门实战看这篇就够了前言初识是什么容器与虚拟机能干什么去哪玩安装先决条件查看自己的内核安装所需的软件包(支持devicemapper存储类型) 设置镜像的仓库设置yu ...
计算机老师给新生的第一堂课怎么讲,新老师如何讲好第一堂课？看这篇就够了！...
原标题:新老师如何讲好第一堂课?看这篇就够了! 距11.3资格证笔试还有68天啦新学期即将开始啦!在新生入学的同时,各学校也将迎来一批新教师,为校园注入新鲜的血液. 或许,作为一名新教师,也曾无数次 ...
python中tkinter模块窗口操作_Python GUI之tkinter窗口视窗教程大集合（看这篇就够了）...
本篇博文搬到个人博客:[洪卫の博客](https://sunhwee.com)上面去了,想要获得最佳阅读体验,欢迎前往 [https://sunhwee.com](洪卫の博客), 建议用电脑查看教程文 ...

第一次接触百度地图？前端看这篇就够啦