文章目录
一、引入
- 首先获取秘钥
1.进入百度地图官网：https://lbsyun.baidu.com/
2.注册百度账号
3.首页 --> 控制台 --> 应用管理 --> 我的应用 --> 创建应用（前端应用类型：选择浏览器端） --> 得到ak
- 引用百度地图API文件:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
二、添加控件
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map('container') // 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
// var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
map.setHeading(64.5) //设置地图旋转角度
map.setTilt(73) //设置地图的倾斜角度
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map('allmap', {
enableRotate: false,
enableTilt: false,
})
map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
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>
效果：
三、绘制点线面
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
</body>
<script>
var map = new BMapGL.Map('container') // 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
// var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 17) // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
var marker = new BMapGL.Marker(point) // 创建标注
var lineArr = [];
var last = null;
map.addOverlay(marker) // 将标注添加到地图中
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)
var polyline = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) //绘制线
// var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"}) //绘制面
map.addOverlay(polyline); //绘制线
// map.addOverlay(polygon); //绘制面
})
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>
绘制线效果：
绘制面效果：
四、标注信息
<script>
var map = new BMapGL.Map('container') // 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835) //咱们东三街位置
// var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
map.centerAndZoom(point, 17) // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
var marker = new BMapGL.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var circle = new BMapGL.Circle(point, 1000, { //圆形
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5,
})
map.addOverlay(circle)
var content = '中国'
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
})
map.addOverlay(label) // 将标注添加到地图中
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: 'Hello', // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow('World', opts) // 创建信息窗口对象
marker.addEventListener("click", e=>{
map.openInfoWindow(infoWindow, point) // 打开信息窗口
});
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>
点击标注点效果：
五、位置检索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的第一个地图</title>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"
></script>
<script src="./js/jquery-3.3.1.js"></script> //注意：引入jQuery
<style type="text/css">
#container {
height: 600px;
width: 800px;
}
.tip {
position: absolute;
top: 35px;
z-index: 10000;
background-color: rgba(255, 255, 255, 0.7);
}
/*容器地图的宽高 */
</style>
</head>
<body>
<input type="text" id="inp" />
<div class="tip"></div>
<div id="container"></div>
<!-- 存放地图的容器 -->
</body>
<script type="text/javascript">
var map = new BMapGL.Map('container')
// 创建地图实例
var point = new BMapGL.Point(113.6648, 34.7835)
// 创建点坐标
map.centerAndZoom(point, 17)
// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
// 创建一个本地搜索
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map },
})
//当输入框inp 发送动作时候 发送ajax请求到百度 返回键
$(() => {
$('#inp').on('input', () => {
// 输出文本框的的内容
console.log($('#inp').val())
$.ajax({
url: `https://api.map.baidu.com/place/v2/suggestion?query=${$(
'#inp',
).val()}®ion=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,
dataType: 'jsonp',
success: function (res) {
console.log(res.result)
// 把res.result遍历成dom节点
var str = ''
res.result.forEach((item) => {
str += `<p class="item">${item.name}</p>`
})
// 放入到tip div中
$('.tip').html(str)
},
})
})
// 给tip添加单击事件 执行搜索
// 用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制 确定具体按个元素被单击
$('.tip').on('click', '.item', function () {
// 获取当前单击item的文本并进行搜索
local.search($(this).text())
// 清空tip
$('.tip').html('')
// 清空输入框
$('#inp').val('')
})
})
</script>
</html>
效果：
输入景区检索结果
