打开官网“lbsyun.baidu.com”,打开之后我们可以看到这里是百度地图的开放平台。
首先我们要在百度注册一个账号;如果没有经过邮箱验证是要经过邮箱验证的。
在跟着操作:
点击创建应用 之后:
提交之后 然后:
最后我们就可以在查看应用的地方看到我们的刚刚创建的应用了 访问应用(AK)就是你的访问密钥
使用步骤
初始化地图,并设置地图中心点
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("北京"); // 设置地图显示的城市
拖拽地图与滚轮的使用
map.enableScrollWheelZoom(true);
map.disableDragging(); //禁止拖拽
map.enableScrollWheelZoom(); //启用滚轮放大缩小
移动地图,设置地图最大最小的缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
//当然也可以动态设置级别:
map.setMaxZoom(10);
map.setMinZoom(2);
获得地图中心点,返回两点之间的距离
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)+' 米。'); //获取两点距离,保留小数点后两位
信息窗口
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); //开启信息窗口
});
添加复杂的信息窗口
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
//获取信息窗口的内容
infoWindow.getContent()
多边形区域
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);
控件工具的创建与开关
var map = new BMap.Map("container");
var myDis = new BMapLib.DistanceTool(map);
myDis.open()
myDis.close()
设置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>