百度地图

LBS：LocationBusinessServer 基于定义位置的商业服务

国内使用该服务的软件主要有：高德地图，百度地图

LBS百度官网网址：百度地图开发平台

基础使用步骤

一、登录注册获取秘钥AK

然后注测控制台>应用管理>依据页面管理填写相关信息
具体步骤：

二、引入百度地图JS

<script src="https://api.map.baidu.com/api?v=1.0&&type=webg&ak=你自己的AK"></script>

三、创建地图容器

注意：需要给容器设置基本的样式，宽高

<div id='container'></div>

四、初始化地图

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

五、创建一个地图中心点

var point =new BMap.Point(经度，维度)

六、设置中心点和滚轮缩放

map.centerAndZoom(point,15)
// 鼠标缩放
map.enableScrollWheelZoom(true)

在以上基础上根据官网写一些小案例

tips：一下代码均可在官方文档查询，建议直接复制官网的，然后进行下一步优化

添加地图控制器

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 point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);

向地图中添加标注
定义标注图标通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   // 指定定位位置。  // 当标注显示在地图上时，其所指向的地理位置距离图标左上   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  // 图标中央下端的尖角位置。   anchor: new BMapGL.Size(10, 25),   // 设置图片偏移。  // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  // 需要指定大图的偏移位置，此做法与css sprites技术类似。   imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
});     // 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);

监听标注事件
JSAPI支持监听覆盖物的事件。

marker.addEventListener("click", function(){   alert("您点击了标注");
});

点击生成多个标注，点击最后一个标注将前面的标注连接成线或者面

添加折线
首先参考展示地图创建基本地图，之后添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。

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

自己写入项目可以这样写

添加多边形
首先参考展示地图创建基本地图，之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。

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

圆形

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

绘制信息窗口

向地图中添加信息窗口

语法

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

案例代码

 // 信息窗口var opts = {width: 250,     // 信息窗口宽度height: 400,    // 信息窗口高度title: "学好前端，月薪过万"  // 信息窗口标题}// 创建信息窗口对象var infoWindow = new BMapGL.InfoWindow(`<p>前端学的soeasy只有<b>js</b></p><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2bREZUyfCjz4t9NRYPGOFAHaLR?w=202&h=308&c=7&r=0&o=5&pid=1.7">`, opts);// 打开信息窗口map.openInfoWindow(infoWindow, point);marker.addEventListener('click', e => {// 单击显示map.openInfoWindow(infoWindow, point);})

效果图

点击按钮显示和隐藏

地图搜索（既可以写在html也可以写在vue文件里面当然步骤获取路由不同）

html里面
在body除了一个容器外还需要一个输入框用于搜索
并绑定onchange事件或者oninput事件，个人推荐onchange事件

 <input type="text" onchange="search(this)">

 var local = new BMapGL.LocalSearch(map, {renderOptions: { map: map }})function search(e) {// 表单值发生变化的时候进行搜索local.search(e.value)}

效果图：

Vue的地图搜索
首先在public文件包里面的index.html添加个百度地图链接

<script src="https://api.map.baidu.com/api?v=1.0&&type=webg&ak=你自己的AK"></script>

一般设置完这个选项后需要重新重启下服务器
页面代码

<template><div><h1>百度</h1><input type="text" v-model.lazy="keyword" /><div id="map" ref="map"></div></div>
</template>
<style lang="scss" scoped>
#map {width: 100%;height: 80vh;
}
</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>

效果图和上面的差不多

结束语

基本用发就这样具体的类名控制可以查看参考类官方文档讲解的很详细

前端关于百度地图JavaScript Api 使用相关推荐

百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
百度地图JavaScript API GL
介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
前端的百度地图的api的使用
1.打开百度地图官方api网页 http://lbsyun.baidu.com/ 2.点击开发文档 3.选择对应的api 4.点击DEMO详情 5.得到源码复制到你的代码中 1 <!DOCTYP ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...

前端关于百度地图JavaScript Api 使用

百度地图

基础使用步骤

一、登录注册获取秘钥AK

二、引入百度地图JS

三、创建地图容器

四、初始化地图

五、创建一个地图中心点

六、设置中心点和滚轮缩放

在以上基础上根据官网写一些小案例

添加地图控制器

绘制地图标注

绘制信息窗口

地图搜索（既可以写在html也可以写在vue文件里面当然步骤获取路由不同）

结束语

前端关于百度地图JavaScript Api 使用相关推荐

最新文章

热门文章

前端关于百度地图JavaScript Api 使用

百度地图

基础使用步骤

一、登录注册 获取秘钥AK

二、引入百度地图JS

三、创建地图容器

四、初始化地图

五、创建一个地图中心点

六、设置中心点和滚轮缩放

在以上基础上根据官网写一些小案例

添加地图控制器

绘制地图标注

绘制信息窗口

地图搜索（既可以写在html也可以写在vue文件里面当然步骤获取路由不同）

结束语

前端关于百度地图JavaScript Api 使用相关推荐

最新文章

热门文章

一、登录注册获取秘钥AK