如何调用百度地图API---定位、显示热力图、路径导航等（很方便很强大）

雨点打透心脏的1/2处 2022-05-23 05:13 375阅读 0赞

人生中第一次调用API开放平台（以前也很少需要用到，感觉很高大上），真的感受到了什么叫做方便，什么叫做强大。以前总是把问题想得很复杂，今天花了半天的时间试了下调用百度地图API，显示定位信息、热力图信息、路径导航等问题处理起来真的很方便。**（有点激动，多了点废话）**

**       ** 可以实现的功能非常多，这里给出一个**显示热力图**的示意图，最上面的Title“百度地图演示系统”是我自己以图片的形式添加的，因此这里需要更改为你自己的本地图片。

![20180603111825836][]

**        样例源码如下：**

**    **    新建文件demo.html，将以下代码拷贝到文件中，选择浏览器打开即可。

**注意：**这里需要**更改**的是你的**密钥**和**Title图片地址和名称**，后文会讲到。

<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<style type="text/css">
    		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap{height:750px;width:100%;}
    		#r-result{width:100%; font-size:14px;}
    	</style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>   
            <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    	<title>城市名定位</title>
    </head>
    <body>
    	<div id="allmap"></div>
    	<div id="r-result">
    		城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
    		<input type="button" value="查询" οnclick="theLocation()" />
    		<input type="button"  οnclick="openHeatmap();" value="显示热力图"/><input type="button"  οnclick="closeHeatmap();" value="关闭热力图"/>
    	</div>
    </body>
    </html>
    <script type="text/javascript">
            // 百度地图API功能
    	var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.418261, 39.921984);
    	map.centerAndZoom(point,15);
    
    	function theLocation(){
    		var city = document.getElementById("cityName").value;
    		if(city != ""){
    			map.centerAndZoom(city,15);      // 用城市名设置地图中心点
    		}
    	}
           
            //设置地图样式
            var mapStyle={style : "dark" }  
            map.setMapStyle(mapStyle);
    
            //在地图上添加图片文字等信息(版权控件)
            var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:new BMap.Size(0,0)});
            map.addControl(cr);
            cr.addCopyright({id:1,content:"<img src='./5.bmp' style='width:1600px;' />"});    //需要更改为你的图片地址和名称
    
    
           // 初始化地图， 设置中心点坐标和地图级别
    	//map.centerAndZoom(new BMap.Point(116.4035,39.915),15); 
    	//setTimeout(function(){
    	//	map.setZoom(14);   
    	//}, 2000);  //2秒后放大到14级
    	map.enableScrollWheelZoom(true);
    
    	var points =[
    	    {"lng":116.418261,"lat":39.921984,"count":50},
    	    {"lng":116.423332,"lat":39.916532,"count":51},
    	    {"lng":116.419787,"lat":39.930658,"count":15},
    	    {"lng":116.418455,"lat":39.920921,"count":40},
    	    {"lng":116.418843,"lat":39.915516,"count":100},
    	    {"lng":116.42546,"lat":39.918503,"count":6},
    	    {"lng":116.423289,"lat":39.919989,"count":18},
    	    {"lng":116.418162,"lat":39.915051,"count":80},
    	    {"lng":116.422039,"lat":39.91782,"count":11},
    	    {"lng":116.41387,"lat":39.917253,"count":7},
    	    {"lng":116.41773,"lat":39.919426,"count":42},
    	    {"lng":116.421107,"lat":39.916445,"count":4},
    	    {"lng":116.417521,"lat":39.917943,"count":27},
    	    {"lng":116.419812,"lat":39.920836,"count":23},
    	    {"lng":116.420682,"lat":39.91463,"count":60},
    	    {"lng":116.415424,"lat":39.924675,"count":8},
    	    {"lng":116.419242,"lat":39.914509,"count":15},
    	    {"lng":116.422766,"lat":39.921408,"count":25},
    	    {"lng":116.421674,"lat":39.924396,"count":21},
    	    {"lng":116.427268,"lat":39.92267,"count":1},
    	    {"lng":116.417721,"lat":39.920034,"count":51},
    	    {"lng":116.412456,"lat":39.92667,"count":7},
    	    {"lng":116.420432,"lat":39.919114,"count":11},
    	    {"lng":116.425013,"lat":39.921611,"count":35},
    	    {"lng":116.418733,"lat":39.931037,"count":22},
    	    {"lng":116.419336,"lat":39.931134,"count":4},
    	    {"lng":116.413557,"lat":39.923254,"count":5},
    	    {"lng":116.418367,"lat":39.92943,"count":3},
    	    {"lng":116.424312,"lat":39.919621,"count":100},
    	    {"lng":116.423874,"lat":39.919447,"count":87},
    	    {"lng":116.424225,"lat":39.923091,"count":32},
    	    {"lng":116.417801,"lat":39.921854,"count":44},
    	    {"lng":116.417129,"lat":39.928227,"count":21},
    	    {"lng":116.426426,"lat":39.922286,"count":80},
    	    {"lng":116.421597,"lat":39.91948,"count":32},
    	    {"lng":116.423895,"lat":39.920787,"count":26},
    	    {"lng":116.423563,"lat":39.921197,"count":17},
    	    {"lng":116.417982,"lat":39.922547,"count":17},
    	    {"lng":116.426126,"lat":39.921938,"count":25},
    	    {"lng":116.42326,"lat":39.915782,"count":100},
    	    {"lng":116.419239,"lat":39.916759,"count":39},
    	    {"lng":116.417185,"lat":39.929123,"count":11},
    	    {"lng":116.417237,"lat":39.927518,"count":9},
    	    {"lng":116.417784,"lat":39.915754,"count":47},
    	    {"lng":116.420193,"lat":39.917061,"count":52},
    	    {"lng":116.422735,"lat":39.915619,"count":100},
    	    {"lng":116.418495,"lat":39.915958,"count":46},
    	    {"lng":116.416292,"lat":39.931166,"count":9},
    	    {"lng":116.419916,"lat":39.924055,"count":8},
    	    {"lng":116.42189,"lat":39.921308,"count":11},
    	    {"lng":116.413765,"lat":39.929376,"count":3},
    	    {"lng":116.418232,"lat":39.920348,"count":50},
    	    {"lng":116.417554,"lat":39.930511,"count":15},
    	    {"lng":116.418568,"lat":39.918161,"count":23},
    	    {"lng":116.413461,"lat":39.926306,"count":3},
    	    {"lng":116.42232,"lat":39.92161,"count":13},
    	    {"lng":116.4174,"lat":39.928616,"count":6},
    	    {"lng":116.424679,"lat":39.915499,"count":21},
    	    {"lng":116.42171,"lat":39.915738,"count":29},
    	    {"lng":116.417836,"lat":39.916998,"count":99},
    	    {"lng":116.420755,"lat":39.928001,"count":10},
    	    {"lng":116.414077,"lat":39.930655,"count":14},
    	    {"lng":116.426092,"lat":39.922995,"count":16},
    	    {"lng":116.41535,"lat":39.931054,"count":15},
    	    {"lng":116.413022,"lat":39.921895,"count":13},
    	    {"lng":116.415551,"lat":39.913373,"count":17},
    	    {"lng":116.421191,"lat":39.926572,"count":1},
    	    {"lng":116.419612,"lat":39.917119,"count":9},
    	    {"lng":116.418237,"lat":39.921337,"count":54},
    	    {"lng":116.423776,"lat":39.921919,"count":26},
    	    {"lng":116.417694,"lat":39.92536,"count":17},
    	    {"lng":116.415377,"lat":39.914137,"count":19},
    	    {"lng":116.417434,"lat":39.914394,"count":43},
    	    {"lng":116.42588,"lat":39.922622,"count":27},
    	    {"lng":116.418345,"lat":39.919467,"count":8},
    	    {"lng":116.426883,"lat":39.917171,"count":3},
    	    {"lng":116.423877,"lat":39.916659,"count":34},
    	    {"lng":116.415712,"lat":39.915613,"count":14},
    	    {"lng":116.419869,"lat":39.931416,"count":12},
    	    {"lng":116.416956,"lat":39.925377,"count":11},
    	    {"lng":116.42066,"lat":39.925017,"count":38},
    	    {"lng":116.416244,"lat":39.920215,"count":91},
    	    {"lng":116.41929,"lat":39.915908,"count":54},
    	    {"lng":116.422116,"lat":39.919658,"count":21},
    	    {"lng":116.4183,"lat":39.925015,"count":15},
    	    {"lng":116.421969,"lat":39.913527,"count":3},
    	    {"lng":116.422936,"lat":39.921854,"count":24},
    	    {"lng":116.41905,"lat":39.929217,"count":12},
    	    {"lng":116.424579,"lat":39.914987,"count":57},
    	    {"lng":116.42076,"lat":39.915251,"count":70},
    	    {"lng":116.425867,"lat":39.918989,"count":8}];
    	   
    	    if(!isSupportCanvas()){
    	    	alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    	    }
    		//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
    		//参数说明如下:
    		/* visible 热力图是否显示,默认为true
    	     * opacity 热力的透明度,1-100
    	     * radius 势力图的每个点的半径大小   
    	     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
    	     *	{
    				.2:'rgb(0, 255, 255)',
    				.5:'rgb(0, 110, 255)',
    				.8:'rgb(100, 0, 255)'
    			}
    			其中 key 表示插值的位置, 0~1. 
    			    value 为颜色值. 
    	     */
    		heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
    		map.addOverlay(heatmapOverlay);
    		heatmapOverlay.setDataSet({data:points,max:100});
    		//是否显示热力图
    	    function openHeatmap(){
    		heatmapOverlay.show();
    	    }
    		function closeHeatmap(){
    		heatmapOverlay.hide();
    	    }
    		closeHeatmap();
    	    function setGradient(){
    	     	/*格式如下所示:
    			{
    		  		0:'rgb(102, 255, 0)',
    		 	 	.5:'rgb(255, 170, 0)',
    			  	1:'rgb(255, 0, 0)'
    			}*/
    	     	var gradient = {};
    	     	var colors = document.querySelectorAll("input[type='color']");
    	     	colors = [].slice.call(colors,0);
    	     	colors.forEach(function(ele){
    				gradient[ele.getAttribute("data-key")] = ele.value; 
    	     	});
    		heatmapOverlay.setOptions({"gradient":gradient});
    	    }
    		//判断浏览区是否支持canvas
    	    function isSupportCanvas(){
    		var elem = document.createElement('canvas');
    		return !!(elem.getContext && elem.getContext('2d'));
    	    }
    </script>

简要步骤如下：

（1）如果想调用百度地图API，首先你需要得在官网注册一个帐号然后申请一个**密钥**，注册网址：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]，在打开网页的最下方可以申请密钥，如下图所示：

![20180603113438410][]

（2）如果你只是想在浏览器及本地测试，**创建应用类型**选择为：**浏览器端**，**Referer白名单**输入：**\***，如下图所示：

![20180603113852337][]

（3）提交完成后，就会得到一个密钥，这个很重要，在你调用百度地图API的时候需要输入这个，也就是需要将“你的密钥”替换为你申请得到的密钥，如下图所示：

![20180603114130458][]

（4）然后你可以在百度地图开放平台上面查询你想要的功能以及代码，提供了各个功能的相应代码，**超级有用**，你完全可以自己调用，代码开放平台地址为：[http://developer.baidu.com/map/jsdemo.htm\#a1\_2][http_developer.baidu.com_map_jsdemo.htm_a1_2]

示意图界面如下：

![20180603114651895][]

（5）然后你可以将各个功能以及代码进行组合，实现你想要的功能，具体的很多细节不再赘述，毕竟我也是个新手。

[20180603111825836]: /images/20220523/c5116f8ba5fc4b9a8ced9040a2994735.png
[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/
[20180603113438410]: /images/20220523/f42569b93196453bb1285e36477ec877.png
[20180603113852337]: /images/20220523/93d7550df21449ffb191935b8a5d01cf.png
[20180603114130458]: /images/20220523/52ffdc65241241529d08ec61ac89f2ab.png
[http_developer.baidu.com_map_jsdemo.htm_a1_2]: http://developer.baidu.com/map/jsdemo.htm#a1_2
[20180603114651895]: /images/20220523/df263cbbc603428f9e1e03f87422364d.png