一.简洁版百度地图
1.设置容器样式
在我们创建好的html文件中写好自己想设置地图的宽高
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 600px;
width: 800px;
}
</style>
2.引入百度地图api文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I">
</script>
3.创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
<div id="container"></div>
4.创建地图实例
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
5.完整代码及效果
<!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>
<style type="text/css">
#container{height: 600px;width: 800px;}
/*容器地图的宽高 */
</style>
</head>
<body>
<div id="container"></div>
<!-- 存放地图的容器 -->
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
效果
二.百度地图添加点 线 面
在原来的百度地图基础上添加内容
<!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>map</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
<style type="text/css">
#container {
height: 600px;
width: 800px;
}
/*容器地图的宽高 */
</style>
</head>
<body>
<div id="container"></div>
<!-- 存放地图的容器 -->
<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 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 = [];
})
// 地图控件
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>
</html>
三.地图完善，添加地图搜索功能
添加百度地图搜索功能就需要用到我们的jQuery了。
我们把我们的jQuery.js放在我们创建好的文件夹中
在html中通过script标签引入我们的jQuery文件
<!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>Docment</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
<script src="./jq.js"></script>
<style type="text/css">
#container {
height: 600px;
width: 800px;
}
/*容器地图的宽高 */
/* tip定位 */
.tip {
position: absolute;
top: 35px;
z-index: 10000;
background-color: rgba(255, 255, 255, .7);
}
</style>
</head>
<body>
<input type="text" id="inp">
<div class="tip"></div>
<div id="container"></div>
<!-- 存放地图的容器 -->
<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
},
});
// local.search("景点");
//当输入框inp 发送动作时候 发送ajax请求到百度 返回键
$(function() {
$("#inp").on("input", function() {
// 输出文本框的的内容
// console.log($("#inp").val())
// 发ajax请求到建议
$.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>
</body>
</html>
