最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了。因为是写的web端,百度地图定位API申请的Appkey需要网址过滤。索性就用高德定位了(有一说一,高德地图是真得劲)。话不多说,先讲解一下定位实现的一些需要注意的细节问题。

首先,不管使用的是高德定位还是百度定位,都需要获取AppKey。下面先讲解高德定位APPKEY的获取。 用百度定位的,百度APPKEY获取方法自行百度。

1.打开高德地图Appkey申请网址:https://lbs.amap.com/,点击右上角控制台,然后进行登录和一系列的认证【进行个人认证就好,日配额5000次。如果定位的量大,再考虑走企业认证】。

如下:

认证完成后,进入高德地图控制台,创建应用分组:


然后创建AppKey:


这就是我们创建的AppKey:

我已经创建了一个,就直接用开头创建的那个做讲解。高德地图个人开发者每天的各种定位的配额5000次完全够用。

2.实战代码[发布网址必须是HTTPS,因为是web端,最好用谷歌浏览器,定位精度最高]:

html:

  <button type="button" class="layui-btn" id="GPS">获取定位</button>

Js的前端代码:

    <script type="text/javascript" scr="http://api.map.baidu.com/api?v=1.2"></script><script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script><script type="text/javascript">//浏览器应该设置https,否则无响应var vconsole = new VConsole();var x_PI = 3.14159265358979324 * 3000.0 / 180.0;var PI = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;$("#GPS").click(function () {function Location() { };Location.prototype.getLocation = function (callback) {var options = {enableHighAccuracy: true,maximumAge: 1000};this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?callback :function (address) {alert(address.province + address.city);console.log("getocation(callbackFunction) 可获得定位信息对象");};var self = this;if (navigator.geolocation) {//浏览器⽀持geolocationnavigator.geolocation.getCurrentPosition(function (position) {//经度var longitude = position.coords.longitude;//纬度var latitude = position.coords.latitude;self.loadMapApi(longitude, latitude);console.log("经度:" + longitude + ",纬度:" + latitude);var cons= GpsToGcj02(longitude, latitude);console.log(cons);var lng_lat_2 = gcj02tobd09(cons[0], cons[1]);console.log('百度坐标...', lng_lat_2);///ajax请求高德定位api,返回具体位置let AppKey = "你刚才申请的AppKey";let lat = cons[0], lng = cons[1], coordsys = "baidu";//经纬度,以及坐标系类型,此处用的是wgs84转的百度坐标系,$.ajax({url: '@Url.Action("GetLocation")',type: 'post',data: { lat:lat,lng:lng,AppKey:AppKey,coordsys:coordsys },success: function (result) {if (result.status == "1"){console.log(result);}}})}, self.onError, options);} else {//浏览器不⽀持geolocationalert("浏览器不⽀持定位");}};Location.prototype.loadMapApi = function (longitude, latitude) {var self = this;var oHead = document.getElementsByTagName('HEAD').item(0);var oScript = document.createElement("script");oScript.type = "text/javascript";oScript.src = "http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";oHead.appendChild(oScript);oScript.onload = function (date) {var point = new BMap.Point(longitude, latitude);var gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;self.callback(addComp);});}};Location.prototype.onError = function (error) {switch (error.code) {case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}};///WGS-84转火星坐标系GCJ02function GpsToGcj02(lng, lat) {if (out_of_china(lng, lat)) {return [lng, lat]}else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);var mglat = lat + dlat;var mglng = lng + dlng;return [mglng, mglat]}}function out_of_china(lng, lat) {return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);}function transformlat(lng, lat) {var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;return ret;}function transformlng(lng, lat) {var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;return ret;}//火星定位法GCJ-02转百度BD-09坐标系function gcj02tobd09(lng, lat) {var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);var bd_lng = z * Math.cos(theta) + 0.0065;var bd_lat = z * Math.sin(theta) + 0.006;return [bd_lng, bd_lat]}</script>

前端获取到浏览器的定位以后,可以通过网址发送一些get请求,看看定位效果:

请求地址:https://restapi.amap.com/v3/assistant/coordinate/convert?parameters

AppKey是你自己申请的那个,

然后经纬度是前端发送到后台的经纬度。这里请求的时候用逗号分隔一下,经度在前。
后面的coordsys是经纬度类型。我是转成了百度定位去请求的高德地图的接口,所以填的baidu,
有好几个类型可以填的,具体的参考高德API开发者文档,地址:https://lbs.amap.com/api/webservice/guide/api/convert

C#后端代码:

 #region 获取用户定位的相关接口,前端传百度坐标系,后端转高德后继续前端请求,获取具体定位,web手机端需使用Google Chrome 浏览器public IActionResult GPSIndex() {return View();}/// <summary>/// 定位请求,返回高德坐标系/// </summary>/// <param name="lat">经度</param>/// <param name="lng">纬度</param>/// <param name="AppKey">密钥</param>/// <param name="coordsys">坐标系类型,此处用百度坐标系</param>/// <returns></returns>public IActionResult GetLocation(string lat,string lng,string AppKey, string coordsys) {var latlng = string.Format(lat + "," + lng);//获取高德定位var location = LocationResult(latlng,AppKey,coordsys);//获取具体位置var Gps = GetLocationByLngLat(latlng, AppKey, 10000);return Json(Gps);}/// <summary>///     根据经纬度获取地址/// </summary>/// <param name="lngLatStr">经度纬度组成的字符串 例如:"113.692100,34.752853"</param>/// <param name="timeout">超时时间默认10秒</param>/// <returns>失败返回"" </returns>public static string GetLocationByLngLat(string lngLatStr,string Key,int timeout = 10000){var url = $"http://restapi.amap.com/v3/geocode/regeo?key={Key}&location={lngLatStr}";return GetLocationByUrl(url, timeout);}/// <summary>///     根据经纬度获取地址/// </summary>/// <param name="lng">经度 例如:113.692100</param>/// <param name="lat">维度 例如:34.752853</param>/// <param name="timeout">超时时间默认10秒</param>/// <returns>失败返回"" </returns>public static string GetLocationByLngLat(double lng, double lat,string Key, int timeout = 10000){var url = $"http://restapi.amap.com/v3/geocode/regeo?key={Key}&location={lng},{lat}";return GetLocationByUrl(url, timeout);}/// <summary>///     根据URL获取地址/// </summary>/// <param name="url">Get方法的URL</param>/// <param name="timeout">超时时间默认10秒</param>/// <returns></returns>private static string GetLocationByUrl(string url, int timeout = 10000){var s = "";try{if (WebRequest.Create(url) is HttpWebRequest req){req.ContentType = "multipart/form-data";req.Accept = "*/*";req.UserAgent = "";req.Timeout = timeout;req.Method = "GET";req.KeepAlive = true;if (req.GetResponse() is HttpWebResponse response)using (var sr = new StreamReader(response.GetResponseStream(), Encoding.UTF8)){s = sr.ReadToEnd();return s;}}}catch (Exception ex){s = ex.ToString();}return s;}public static GaodeGetCoding LocationResult(string latlng, string AppKey, string coordsys){var url = "https://restapi.amap.com/v3/assistant/coordinate/convert?parameters";url += string.Format(AppKey, latlng, coordsys);var Json = GetResponseString(CreateGetHttpResponse(url, null));var model = JsonConvert.DeserializeObject<GaodeGetCoding>(Json);return model;}/// <summary>  /// 创建GET方式的HTTP请求  /// </summary>  public static HttpWebResponse CreateGetHttpResponse(string url, CookieCollection cookies){HttpWebRequest request = null;request = WebRequest.Create(url) as HttpWebRequest;request.Method = "GET";request.Proxy = null;if (cookies != null){request.CookieContainer = new CookieContainer();request.CookieContainer.Add(cookies);}return request.GetResponse() as HttpWebResponse;}/// <summary>/// 获取请求的数据/// </summary>public static string GetResponseString(HttpWebResponse webresponse){using (Stream s = webresponse.GetResponseStream()){StreamReader reader = new StreamReader(s, Encoding.UTF8);return reader.ReadToEnd();}}#endregion

返回值的封装:

namespace Rongbo.DDPG.Entity.GaoDeLocationAPI
{public class GaodeGetCoding{/// <summary>/// 返回状态,1=成功,0=失败/// </summary>public int Status { get; set; }/// <summary>/// 成功编码  OK/// </summary>public string Info { get; set; }public string InfoCode { get; set; }public List<Gaode> Regeocode { get; set; }}public class Gaode {public string Formatted_address { get; set; }public List<GaodeList> AddressComponent { get; set; }}public class GaodeList {/// <summary>/// 国籍/// </summary>public string  Country { get; set; }/// <summary>/// 省名/// </summary>public string Province { get; set; }/// <summary>/// 市名/// </summary>public string City { get; set; }/// <summary>/// 市区码/// </summary>public string CityCode { get; set; }/// <summary>/// 省县名/// </summary>public string district { get; set; }/// <summary>/// 省县码/// </summary>public string adCode { get; set; }/// <summary>/// 街道名/// </summary>public string TownShip { get; set; }public string TownCode { get; set; }public List<StreetNumber> StreetNumber { get; set; }public List<string> BusinessAreas { get; set; }public List<Building> Building { get; set; }public List<Neighborhood> Neighborhood { get; set; }}public class Neighborhood {public string Name { get; set; }public string Type { get; set; }}public class Building {public string Name { get; set; }public string Type { get; set; }}public class StreetNumber{public List<string> Street { get; set; }public List<string> Number { get; set; }public string Location { get; set; }public List<string> Direction { get; set; }public List<string> Distance { get; set; }}
}

前端返回的Json效果【具体地址是我自己隐藏的】:

{“status”:“1”,“regeocode”:{“addressComponent”:{“city”:“杭州市”,“province”:“浙江省”,“adcode”:“330110”,“district”:“余杭区”,“towncode”:“330110012000”,“streetNumber”:{“number”:“359号”,“location”:“119.993782,30.277486”,“direction”:“西北”,“distance”:“41.1047”,“street”:“舒心路”},“country”:“中国”,“township”:“仓前街道”,“businessAreas”:[[]],“building”:{“name”:[],“type”:[]},“neighborhood”:{“name”:[],“type”:[]},“citycode”:“0571”},“formatted_address”:“浙江省杭州市余杭区仓前街道**********”},“info”:“OK”,“infocode”:“10000”}

然后拿到了以后,你们就可以进行一系列操作了。

JS获取:

  <script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'dd884f10c2a941075f6f8dc815229528',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的AppKey"></script><script type="text/javascript">//基本地图加载var map = new AMap.Map('container', {resizeEnable: true});AMap.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 5000,          //超过10秒后停止定位,默认:5sposition: 'RB',    //定位按钮的停靠位置offset: [10, 20], //定位按钮与设置的停靠位置的偏移量,默认:[10, 20]zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);//result中包含浏览器ip地址等信息geolocation.getCurrentPosition(function (status, result) {if (status == 'complete') {onComplete(result);} else {onError(result)}});});this.map.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:无穷大maximumAge: 0, //定位结果缓存0毫秒,默认:0showButton: true, //显示定位按钮,默认:truebuttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记,默认:truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false});_this.map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', function (data) {var gpsPoint = GPS.gcj_encrypt(data.position.getLat(), data.position.getLng());_this.centerPointer = gpsPoint;_this.circleArea(gpsPoint);_this.getAddress(gpsPoint);});AMap.event.addListener(geolocation, 'error', function () {alert('定位失败');});});var GPS = {PI: 3.14159265358979324,x_pi: 3.14159265358979324 * 3000.0 / 180.0,delta: function (lat, lon) {var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。var dLat = this.transformLat(lon - 105.0, lat - 35.0);var dLon = this.transformLon(lon - 105.0, lat - 35.0);var radLat = lat / 180.0 * this.PI;var magic = Math.sin(radLat);magic = 1 - ee * magic * magic;var sqrtMagic = Math.sqrt(magic);dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);return {'lat': dLat,'lon': dLon};},//WGS-84 to GCJ-02gcj_encrypt: function (wgsLat, wgsLon) {if (this.outOfChina(wgsLat, wgsLon))return {'lat': wgsLat,'lon': wgsLon};var d = this.delta(wgsLat, wgsLon);return {'lat': wgsLat + d.lat,'lon': wgsLon + d.lon};},outOfChina: function (lat, lon) {if (lon < 72.004 || lon > 137.8347)return true;if (lat < 0.8293 || lat > 55.8271)return true;return false;},transformLat: function (x, y) {var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;return ret;},transformLon: function (x, y) {var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;return ret;}};</script>

以上是JS API的获取方式。

原创不易,看完记得点赞收藏鼓励,你的支持是我最大的原创动力!

C# 调用高德地图API获取经纬度以及定位,JS获取定位【万字详解附完整代码】相关推荐

  1. Python调用高德地图API实现经纬度换算、地图可视化

    作者 | 糖甜甜甜 出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...

  2. python 根据经纬度 调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...

    目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...

  3. 你还在为高德地图找不到门牌号等详细地址而烦恼吗?你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化

    Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...

  4. python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...

    前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...

  5. qpython androidhelper 经纬度_Python调用高德地图API实现经纬度换算、地图可视化

    第二步:构造url参数获取经纬度 得到密钥后,可以在高德地图web服务API下的地理编码接口获取经纬度,地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口,提供结构化地 ...

  6. java获取经纬度_java调用高德地图api获取某个位置的经纬度

    java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...

  7. Java调用高德地图API根据详细地址获取经纬度

    Java调用高德地图API根据详细地址获取经纬度 官方API:https://lbs.amap.com/api/webservice/guide/api/georegeo * Web服务API 地理/ ...

  8. python高德地图api调用实例_Python 利用高德地图api实现经纬度与地址的批量转换...

    我们都知道,可以使用高德地图api实现经纬度与地址的转换.那么,当我们有很多个地址与经纬度,需要批量转换的时候,应该怎么办呢? 在这里,选用高德Web服务的API,其中的地址/逆地址编码,可以实现经纬 ...

  9. 调用高德地图Api实现通过地址转经纬度

    调用高德地图Api实现通过地址转经纬度 在高德地图开放平台注册一个key就可以了,链接在这儿高德地图开放平台 /*** @author _沉淀_* @version 1.0.0* @ClassName ...

最新文章

  1. 关于hp惠普笔记本电脑清洗(真的要水洗哟)
  2. python【力扣LeetCode算法题库】面试题40- 最小的k个数
  3. 【从零开始学BPM,Day2】默认表单开发
  4. 4.Java中的关键字和标识符
  5. ubuntu设置vim语法高亮显示和自动缩进
  6. shareplex的安装起停服务(添加新用户)
  7. 中国首档程序员综艺:你有freebug吗?
  8. ❤️测试人的曲折职场路:从毕业的5K到20K,四年我换了3份工作…
  9. JavaScript正则表达式使用详解
  10. SQL:postgresql中使用limit ... offset ... 实现分页查询
  11. 就业管理系统【软件建模与分析UML课设】
  12. Odin插件与基于元数据的编辑器实现
  13. 歌声合成系列教程《1》
  14. 微软个人云端服务器在哪里找,云端的服务器在哪里
  15. 微信小程序开发详细步骤解决方案
  16. Latex第一次写论文记录
  17. 数字时代,企业应该如何看待商业智能BI
  18. Android仿微博/QQ空间滑动自动播放视频功能
  19. 什么是PM?团队角色
  20. C语言字符串中 char char* char[] 区别

热门文章

  1. react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条
  2. mpp架构 mysql,MPP架构知识整理
  3. select函数的作用!
  4. windows系统通过命令提示符(CMD)对LSP进行修复
  5. 深圳大学计算机专业评级,全球1355所大学学科评级结果:深圳大学13个学科获评A类...
  6. 十七.Python面向对象编程
  7. c语言主界面设计菜单系统,c语言界面设计代码的操作步骤,你学会了吗
  8. Ninja 构建系统
  9. 将IP地址更新到3323域名
  10. 最简单的基于 DirectShow 的视频播放器