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

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

正文

现在在企业做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.map.baidu.com/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定位相关推荐

网页百度地图api，支持位置偏移
网页百度地图api,支持位置偏移需加载 jq <style type="text/css"> #allmap {width:100%; height:100%; bo ...
百度地图利用位置提供服务器,利用百度地图API获取当前位置信息的实例
利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: var map; var gpsPoint; var baiduPoint; ...
HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
百度地图API获取当前位置
异步加载获取当前位置 //百度地图API功能function loadJScript() {var script = document.createElement("script" ...
百度地图api搜索地址定位
下载地址百度地图api地址搜索定位示例,选择公司名称地图上显示对应地址 dd:
百度地图API搜索关键词定位，点击获取经纬度
一.实现效果如下二.获取百度地图秘钥AK (1)申请秘钥地址 http://lbsyun.baidu.com/apiconsole/key (2)创建应用 (3)选择应用类型我这个demo是在浏览 ...
JavaScript使用百度地图API获取当前位置信息
使用步骤: 一.百度开放API平台申请AK 二.在线引入API 或者使用 npm 三.使用API获取位置注意:百度API. 高德API 商业用途,均需授权引用与配置方式一 .在线引入API: & ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
百度地图API关于两点之间连接直线上的所有点
最近项目用到百度地图,由于司机错误使用导致上传的GPS点天少,两点之间的距离太长没有GPS点,现做了一个小算法来解决此问题(地图视为平面图形)代码如下. //每1000米算作一个点 var point ...

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

正文

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

最新文章

热门文章