百度地图使用

最新推荐文章于 2024-04-28 14:53:37 发布

VIP文章 ╰执ヽ

最新推荐文章于 2024-04-28 14:53:37 发布

阅读量234

点赞数

文章标签：百度 javascript vue.js

本文链接：https://blog.csdn.net/gh4188/article/details/127623280

版权

解释

LBS：LocationBusinessServer 基于定义位置的商业服务
百度地图官方网站 https://lbs.baidu.com/
百度地图提供七大功能与服务：定位、地图、轨迹、路线规划、导航、路况、搜索等。本文主要介绍在HTML及vue中如何导入并使用百度地图。

使用步骤

01登录注册获取密钥AK
02 引入百度地图js
<script src=“https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的ak”</script>
03.引入地图的容器<div id=“container”></div>
04 初始化地图var map =new BMap.Map（“container”）
05创建一个地图中心点var point new BMap.Point(经度，纬度)
06设置中心点和滚轮缩放
1)map.centerAndZoom(point,15)
2)map.enableScrollWheelZoom(true)
（注册如图所示）
在这里插入图片描述

在这里插入图片描述

绘制地图以及添加控制器

 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>

在这里插入图片描述
详情参考官网中：首页=>开发文档=>JSAPI=>开发指南=>创建地图=>添加控件

绘制点线面

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);
//监听事件
map.addEventListener