欢迎大家点一个关注，支持我的原创文章，谢谢！
正文
现在在企业做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><!-- 引入百度地图api文件 --><script type="text/javascript" src="http://api./api?v=2.0&ak=您的密钥"></script><!-- 引入jquery --><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-20map.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、效果截图
可以看到，通过ip定位功能，在界面上显示我当前所在城市为烟台市
在输入框中输入北京大学和清华大学这两个位置，点击获取位置按钮，地图就出现在了界面。地图上显示了这两个位置，并用直线连接，在上方还可以看到这两个位置的地理距离是多少。
如果觉得《使用百度地图api搜索两点位置 连线 计算距离 ip定位》对你有帮助，请点赞、收藏，并留下你的观点哦！
