1.初始步骤
1.查找到百度地图开发平台，点击进入；
2.第一次进入需要输入账号和密码，登录成功后，进入到控制台；找到应用管理，在我的应用，点击创建应用；
3.跳转到创建应用界面，输入应用名称、选择应用类型（一般为浏览器端）和启用服务，输入域名白名单，然后点击提交；
4.这时会在应用表格中，生成一条新记录，有对应的应用编号、应用名称和访问应用（AK）等；
5.点击右上角的开发文档，选择Web开发下的JavaScript API v3.0；
6.在JavaScript API界面，可以查看到服务介绍、开发指南、类参考、示例DEMO等；
7.可根据官方文档自己创建地图；
2.使用步骤
1.初始化地图，并设置地图中心点
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
当然也可以根据城市名称设置地图的中心点：
map.centerAndZoom("上海",15);
map.addControl(new BMap.ScaleControl()); //添加左下方比例尺控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setCurrentCity("北京"); // 设置地图显示的城市2.常用控件
addMapCtrl();
// 添加地图控制
function addMapCtrl(){
map.enableScrollWheelZoom(true); //地图可以缩放
map.addControl(new BMap.NavigationControl()); // 地图导航
map.addControl(new BMap.ScaleControl()); // 缩放控件
map.addControl(new BMap.OverviewMapControl()); //概况
map.addControl(new BMap.MapTypeControl()); //地图类型
}3.移动地图，设置地图最大最小的缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
//当然也可以动态设置级别：
map.setMaxZoom(10);
map.setMinZoom(2);4.获得地图中心点，返回两点之间的距离
getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区
alert('距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离,保留小数点后两位5.信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 15);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"点击链接看地址"
}
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});7.多边形区域
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
...
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);8.设置api接口，根据输入内容搜索相关地点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图开发6</title>
<style>
#container{
width: 100%;
height: 500px;
}
.search{ position: relative;}
.tip{position: absolute; top:30px; background-color: #fff; z-index: 10000000;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde"></script>
<!-- 引入js，填入ak -->
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<h1></h1>
<div class="search">
<input type="text" id="searchbox">
<div class="tip"></div>
</div>
<div id="container"> </div>
<!-- 地图的容器 -->
<script>
var map = new BMap.Map("container");
//初始化地图
var point = new BMap.Point(113.665,34.784);
//指定地图的中心点（经度，维度）
map.centerAndZoom(point,16);
//地图指定中旬和缩放层次
map.enableScrollWheelZoom(true); //地图可以缩放
//自定义标注
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});
//创建一个标注
map.addOverlay(marker);
//添加标注到地图
var local = new BMap.LocalSearch(map,{
renderOptions:{map:map,autoViewport:true}
});
$(function(){
$.ajax({
url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
dataType:"jsonp",
success:function(res){
console.log(res);
$("h1").html(res.content.address);
}
})
$("#searchbox").on("input",function(){
//显示tip
$(".tip").show();
$.ajax({
url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}®ion=郑州&city_limit=true&output=json&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde`,
dataType:"jsonp",
success:function(res){
console.log(res);
$(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
//设置tip的内容为result数组返回成p元素，连接字符串
},
})
})
$(".tip").on("click","p",function(){
local.search($(this).text());
//执行地图搜索 为当前单击的p标签
$(".tip").hide();
//隐藏tip
})
})
</script>
</body>
</html>9.添加标注
// 自定义标注
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})
// 创建一个标注
map.addOverlay(marker);
// 添加标注到地图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
