一、申请AK
百度搜索百度地图API，进入官网文档，按照官网文档提示注册百度账号并申请AK。申请AK
填写相关信息，应用名称随意、应用类型根据协议来选择.
二、编写代码
根据官网的代码（入门引用和获取经纬度信息），实现代码如下，具体作用见注释
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Baidu Map </title><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:60%;}</style><!-- 引用API,ak处填写为你的密钥 --><script type="text/javascript" src="http://api./api?v=3.0&ak=" "></script><!--引用JQuery--><script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="/jquery/3.5.0/jquery.min.js"></script></head><body><p style="text-align: center">Map display</p><div id="container"></div><!--这是地址详情框--><input type="text" id="site"><!--这是 经度--><input type="text" id="longitude"><!--这是 维度--><input type="text" id="latitude"></body><script>// 展示地图var map = new BMap.Map("container"); // 创建地图实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放//添加控件map.addControl(new BMap.NavigationControl()); // 平移缩放控件mapmap.addControl(new BMap.ScaleControl()); // 比例尺控件map.addControl(new BMap.MapTypeControl()); // map类型（平面、卫星、三维）// 增添标注var point1 = new BMap.Point(116.403, 39.915);var point2 = new BMap.Point(116.401, 39.915);var point3 = new BMap.Point(116.400, 39.915);var point4 = new BMap.Point(116.399, 39.915);// 标注点var marker = new BMap.Marker(point1);var marker2 = new BMap.Marker(point2);map.addOverlay(marker);map.addOverlay(marker2);// 添加事件marker.addEventListener("click",function (){alert("您点击了标注");});// 标注图标（暂时加载不出来，还未解决）var myIcon = new BMap.Icon('//10/24/2kZOAuvlQISrwBP.png', new BMap.Size(50, 50), {// 指定定位位置。// 当标注显示在地图上时，其所指向的地理位置距离图标左上// 角各偏移10像素和25像素。您可以看到在本例中该位置即是// 图标中央下端的尖角位置。anchor: new BMap.Size(30, 30),// 设置图片偏移。// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您// 需要指定大图的偏移位置，此做法与css sprites技术类似。imageOffset: new BMap.Size(0, 0 - 5) // 设置图片偏移});var marker4 = new BMap.Marker(point4,{icon:myIcon});map.addOverlay(marker4);// 自定义标注// 定义自定义覆盖物的构造函数function SquareOverlay(center, length){this._center = center;this._length = length;// this._color = color;}// 继承API的BMap.OverlaySquareOverlay.prototype = new BMap.Overlay();// 实现初始化方法SquareOverlay.prototype.initialize = function(map){// 保存map对象实例this._map = map;// 创建div元素，作为自定义覆盖物的容器var img = document.createElement("img");img.style.position = "absolute";// 可以根据参数设置元素外观img.style.width = this._length + "px";img.style.height = this._length + "px";img.src = "//10/24/JMmU5nBSjusrfa3.png";// 服务器url// 将div添加到覆盖物容器中map.getPanes().markerPane.appendChild(img);// 保存div实例this._img = img;// 需要将div元素作为方法的返回值，当调用该覆盖物的show、// hide方法，或者对覆盖物进行移除时，API都将操作此元素。return img;}// 实现绘制方法SquareOverlay.prototype.draw = function(){// 根据地理坐标转换为像素坐标，并设置给容器var position = this._map.pointToOverlayPixel(this._center);this._img.style.left = position.x - this._length / 2 + "px";this._img.style.top = position.y - this._length / 2 + "px";}var infoWindow = new BMap.InfoWindow("数量：3",opts);// 实现显示方法SquareOverlay.prototype.show = function(){if (this._img){this._img.style.display = "";}this.click = function (){console.log("hello");var infoWindow = new BMap.InfoWindow("数量：3",opts);map.openInfoWindow(infoWindow,point2);}}// 实现隐藏方法SquareOverlay.prototype.hide = function(){if (this._img){this._img.style.display = "none";}}SquareOverlay.prototype.click= function(){map.openInfoWindow(infoWindow,point2);}// 添加自定义方法SquareOverlay.prototype.toggle = function(){if (this._div){if (this._img.style.display == ""){this.hide();}else {this.show();}}}var mySquare = new SquareOverlay(map.getCenter(), 100);map.addOverlay(mySquare);mySquare.addEventListener("click",function () {console.log("进入测试。。");SquareOverlay.hide();});// 设置信息框的属性var opts = {width :100,height:40,title:"Detail Info"}//添加点击事件，点击出现信息框marker.addEventListener("click",function () {map.openInfoWindow(infoWindow,point2);});// var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例// map.addTileLayer(traffic);// 将图层添加到地图上//自定义叠加层var tilelayer = new BMap.TileLayer(); // 创建地图层实例tilelayer.getTilesUrl=function(){// 设置图块路径return "//10/24/2kZOAuvlQISrwBP.png";};map.addTileLayer(tilelayer);// 获取经纬度var geoc = new BMap.Geocoder();map.addEventListener("click", function(e){//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度var pt = e.point;geoc.getLocation(pt, function(rs){//addressComponents对象可以获取到详细的地址信息var addComp = rs.addressComponents;var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;//将对应的HTML元素设置值$("#site").val(site);$("#longitude").val(pt.lng);$("#latitude").val(pt.lat);});});</script></html>
