1、初始化
1、注册开发者账号
2、导入百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=kdS9W2AV1jL9aQhR1NUZqsEpBeTxKGbc">
3、存放地图的div
<div id="container"></div>
4、创建地图
var map = new BMap.Map("container");
5、添加中心点和缩放
var point = new BMap.Point(113.665,34.784)
// 指定地图的中心
map.centerAndZoom(point,16)
2、地图控制
map.enableScrollWheelZoom(true);// 可以滚动缩放
map.addControl(new BMap.NavigationControl());//地图导航工具
map.addControl(new BMap.ScaleControl()); //缩放控制
map.addControl(new BMap.OverviewMapControl()); //概览
map.addControl(new BMap.MapTypeControl()); // 地图类型
3、、覆盖
1、点
1.创建点
var point = new BMap.Point(113.665,34.784)
var marker = new BMap.Marker(point);
2.显示点
map.addOverlay(marker);
3.图标
let icon = new BMap.Icon(
"./assets/start_point.png",//图片的地址
new BMap.Size(36,42),//显示图片的大小
{imageSize:new BMap.Size(36,42),anchor: new BMap.Size(18,42)},
// 把原始图片缩小为36,42，偏移底部中心 （默认是左上角）
)
// 创建一个标注点
var marker = new BMap.Marker(point,{icon:icon});
2、圆
1、创建圆
var circle = new BMap.Circle(
point,
500,//半径
{ScaleControl:"blue",strokeWeight:2,fillOpacity:0.4}
)
2、显示圆
map.addOverlay(circle)
3、多边形
1、创建多边
var polygon = new BMap.Polygon([
new BMap.Point(113.66472152529185,34.78609747393126),
new BMap.Point(113.66772186569519,34.78603076963989),
new BMap.Point(113.66766796736458,34.782999372726685),
new BMap.Point(113.66178406627422,34.78423714494914),
new BMap.Point(113.66473949140206,34.78453361455538),
new BMap.Point(113.66472152529185,34.78609747393126)
],
{ScaleControl:"blue",strokeWeight:2,fillOpacity:0.4}
)
2、把多边形添加到地图上
map.addOverlay(polygon)
4、事件
map.addEventListener("click",e=>{e,point})
e,point单击点的经纬度
5、信息窗口
1、创建信息窗口
var info = new BMap.InfoWindow(
`<div class="info">
<p>asdasdasdsa</p>
{title:"web"}
</div>`
)
2、显示信息窗口
marker.addEventListener("click",()=>{
map.openInfoWindow(info,point);
// 单击点弹出窗口
6、搜索
1、创建搜索
let local = new BMap.LocalSearch(map,{
renderOptions:{map:map}
})
2、搜索关键字
local.search(v);
7、导航
1、创建导航
var driving = new BMap.DrivingRoute(map,{
renderOptions:{map:map,autoVoewport:true},
})
2、执行导航
driving.search(point,end)
