一、script引入百度地图路径
apk可在百度地图官网开发者模式创建仓库中自行创建
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的apk" type="text/javascript" charset="utf-8"></script>
二、创建百度地图
1.设置地图大概样式
2.复制百度地图官网框架代码
实现效果预览：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个地图</title>
<script src="https://api.map.baidu.com/api?v=1.0webglpgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#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);
var point = new BMapGL.Point(113.6648, 34.7835);
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>
</body>
</html>三、各种功能实现
1.绘制点、线、面
打开官方文档 绘制点、线、面选项
向地图中添加标注
添加点
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
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);
监听标注事件
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);
实现效果图：
2.添加搜索功能
引入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>我的第一个地图</title>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0webglpgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw"
></script>
<script src="./jquery-3.3.1.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()}郑州&city_limit=truejsoncVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,
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>实现效果图：
