百度地图API及使用
打开官网“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 ="天安门
" + "
" + "天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...
" + "";
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=>`${item.name}`).join(''));//设置tip的内容为result数组返回成p元素，连接字符串},})})$(".tip").on("click","p",function(){local.search($(this).text());//执行地图搜索 为当前单击的p标签$(".tip").hide();//隐藏tip})})</script>
</body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！