1.百度地图的注册使用密钥

点开下面连接进行注册然后
百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/?qq-pf-to=pcqq.group

点开控制台进入我的应用

点击创建应用即可获取密钥

2.创建地图实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>我的第一个地图</title>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密匙"></script>

//在这里输入你的密匙即可使用

<style type="text/css">

#container{height: 600px;width: 800px;}

/*容器地图的宽高 */

</style>

</head>

<body>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(116.404, 39.915);

// 创建点坐标

map.centerAndZoom(point, 15);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 地图控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件

map.addControl(scaleCtrl);

var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件

map.addControl(zoomCtrl);

var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件

map.addControl(cityCtrl);

</script>

</body>

</html>

这样一个简单的网页版百度地图就出来了

下面是效果图

3.百度地图的绘制点、线、面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>我的第一个地图</title>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>

<style type="text/css">

#container{height: 600px;width: 800px;}

/*容器地图的宽高 */

</style>

</head>

<body>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(113.6648, 34.7835);

// 创建点坐标

map.centerAndZoom(point, 17);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 添加点

var marker = new BMapGL.Marker(point); // 创建标注

map.addOverlay(marker);

// 将标注添加到地图中

// 记录点的数组

var lineArr = [];

// 记录上一个个

var last = null;

// 添加事件

map.addEventListener("click",e=>{

// 有上一个就移除上一个

last?map.removeOverlay(last):'';

// 获取单击点的位置(经度，纬度)

var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

// 添加到数组组件

lineArr.push(p);

// 创建一个标记

var m = new BMapGL.Marker(p);

// 重新定义上一个

last = m;

// 显示标记

map.addOverlay(m);

})

// 双击事件

map.addEventListener("dblclick",()=>{

// 移除最后点

map.removeOverlay(last)

// 多边线 strokeColor颜色 strokeWeight线粗细 strokeOpacity 线的透明度

// var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

// 显示线

// map.addOverlay(polyline);

var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"})

map.addOverlay(polygon);

// 清空数组

lineArr=[];

})

// 地图控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件

map.addControl(scaleCtrl);

var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件

map.addControl(zoomCtrl);

var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件

map.addControl(cityCtrl);

</script>

</body>

</html>

4.百度地图精确搜索

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>我的第一个地图</title>

<script

type="text/javascript"

src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"

></script>

<script src="./jquery-3.3.1.js"></script>

<style type="text/css">

#container {

height: 600px;

width: 800px;

}

/*容器地图的宽高 */

/* tip定位 */

.tip{

position: absolute;

top:35px;

z-index: 10000;

background-color:rgba(255,255,255,.7);

}

</style>

</head>

<body>

<input type="text" id="inp">

<div class="tip"></div>

<div id="container"></div>



<script type="text/javascript">

var map = new BMapGL.Map("container");

// 创建地图实例

var point = new BMapGL.Point(113.6648, 34.7835);

// 创建点坐标

map.centerAndZoom(point, 17);

// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 创建一个本地搜索

var local = new BMapGL.LocalSearch(map, {

renderOptions: { map: map },

});

// local.search("景点");

//当输入框inp 发送动作时候发送ajax请求到百度返回键

$(function(){

$("#inp").on("input",function(){

// 输出文本框的的内容

// console.log($("#inp").val())

// 发ajax请求到建议

$.ajax({

url:`https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=你的密钥`,

dataType:"jsonp",

success:function(res){

console.log(res.result);

// 把res.result遍历成dom节点

var str = "";

res.result.forEach(item=>{

str+=`<p class="item">${item.name}</p>`

})

// 放入到tip div中

$(".tip").html(str);

}

})

})

// 给tip添加单击事件执行搜索

// 用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制确定具体按个元素被单击

$(".tip").on("click",".item",function(){

// 获取当前单击item的文本并进行搜索

local.search($(this).text());

// 清空tip

$(".tip").html("");

// 清空输入框

$("#inp").val("");

})

})

</script>

</body>

</html>

5.获取当前位置的坐标

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

//使用juqery

<script src="./jquery-3.3.1.js"></script>

</head>

<body>

<p class="addres"></p>

<script>

$(function(){

$.ajax({

url:"http://api.map.baidu.com/location/ip?ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I&ip=&coor=bd09ll",

dataType:"jsonp",

success:function(res){

console.log(res);

$(".address").html(res.content.address);

}

})

})

</script>

</body>

</html>