使用百度地图api搜索两点位置、连线、计算距离、ip定位

旧城等待， 2022-05-14 09:10 507阅读 0赞

欢迎大家点一个关注，支持我的原创文章，谢谢！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hsXzE4MDM_size_16_color_FFFFFF_t_70][]

### 正文 ###

现在在企业做web项目时，偶尔会用到地图功能，而当前最流行的无疑是百度地图了，百度地图API为应用开发者提供了强大的功能，以下就介绍关于本人在做项目时关于百度地图的一些实用的功能。

1、下面的代码就是我的html文件，开发者要想使用百度地图API，首先要在百度地图开放平台上申请密钥，然后在html文件中引入百度地图的api文件，这样就能正常使用了

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		//给获取位置按钮注册事件
    		$("input[name='getPoint']").bind('click',function(){
    			//获取起始位置
    			var beginPos=$("input[name='beginPos']").val();
    			//获取结束位置
    			var endPos=$("input[name='endPos']").val();
    			if(beginPos!='' && endPos!=''){
    				loadMap(beginPos,endPos);
    			}else{
    				alert('起始位置或结束位置未填写')
    			}
    		});
    		
    		//ip定位，精度为城市级别
    		function myFun(result){
    			var cityName = result.name;
    			$("#msg").html("当前位置："+cityName);
    		}
    		var myCity = new BMap.LocalCity();
    		myCity.get(myFun); 
    		
    	});
    	
    	//加载地图函数
    	function loadMap(beginPos,endPos){
    		//创建一个地图实例
    		var map = new BMap.Map("map");
    		//添加平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能
    		map.addControl(new BMap.NavigationControl());
    		//添加比例尺
    		map.addControl(new BMap.ScaleControl());  
    		//开启鼠标滚轮缩放
    		map.enableScrollWheelZoom();
    		
    		//创建本地搜索
    		var localSearch = new BMap.LocalSearch(map);
    		//允许自动调节窗体大小
            localSearch.enableAutoViewport();
    		
            //设置搜索结束时的回调函数
            localSearch.setSearchCompleteCallback(function (searchResult) {
            	var pois=new Array();
            	for(var i=0;i<=1;i++){
            		
    	        	//获取搜索结果
    	            var poi = searchResult[i].getPoi(0);
    	            //创建标注
    	            var marker = new BMap.Marker(poi.point);
    	            //存储点
    	            pois.push(poi.point);
    	            //设置放大级别，范围1-20
    	            map.centerAndZoom(poi.point,10);
    	            //添加覆盖物
    	            map.addOverlay(marker);  
            	}
       	     
            	
            	//创建两点间的折线
                var polyline = new BMap.Polyline(
                	[
                		pois[0],
                		pois[1]
                	],
                    {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
                );
               
                //添加折线
                map.addOverlay(polyline);
                
                //计算两点之间距离
                $("input[name='distance']").val((map.getDistance(pois[0],pois[1])).toFixed(2)+'米');
    
            });
            //搜索起始位置和结束位置
            localSearch.search([beginPos,endPos]);
            
    	}
    	
    
    </script>
    <style type="text/css">
    	#map{
    		width:100%;
    		height:580px;
    		
    	}
    </style>
    </head>
    <body>
    	
    	
    		起始位置：<input type="text" name="beginPos">
    		结束位置：<input type="text" name="endPos">
    		<input type="button" name="getPoint" value="获取位置">
    		距离为：<input type="text" name="distance" readonly="readonly">
    		<span id="msg">正在获取当前位置...</span>
        
    	<div id="map">
    	
    	</div>
    	
    	
    </body>
    </html>

2、效果截图

![70][]

可以看到，通过ip定位功能，在界面上显示我当前所在城市为烟台市

![70 1][]

在输入框中输入北京大学和清华大学这两个位置，点击获取位置按钮，地图就出现在了界面。地图上显示了这两个位置，并用直线连接，在上方还可以看到这两个位置的地理距离是多少。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hsXzE4MDM_size_16_color_FFFFFF_t_70]: /images/20220514/b2a460cb6059408d9fe81e41939c8e14.png
[70]: /images/20220514/51e3935d17424439b587d7528a811a13.png
[70 1]: /images/20220514/eb81b9aa0d6a4471a6df7f8f497f982f.png