请选择 进入手机版 | 继续访问电脑版

[Redis] 使用 百度地图api通过redis实现地标存储及范围坐标点查询功能

[复制链接]
查看33 | 回复9 | 2021-9-13 23:45:58 | 显示全部楼层 |阅读模式

1.起首 拿到百度地图开辟 密钥,进入百度地图开放平台:百度地图开放平台

(1)选择开辟 文档>>web开辟 >>JavaScript API

使用

百度地图api通过redis实现地标存储及范围坐标点查询功能

(2)必要 申请密钥才可利用 ,点击申请密钥(申请密钥的IP白名单可以用‘ * '代替,全部 网站都可用,但安全性很差,全部 人都可以抓到这个ak来利用 ,也可以根据本身 的应用场景来设置) 

使用

百度地图api通过redis实现地标存储及范围坐标点查询功能

 2,Controller代码

  1. public class MapController : Controller
  2. {
  3. //map视图
  4. public ActionResult Index()
  5. {
  6. return View();
  7. }
  8. /// <summary>
  9. /// 存入坐标点
  10. /// </summary>
  11. /// <param name="Longitude">经度</param>
  12. /// <param name="Latitude">纬度</param>
  13. /// <param name="Name">名称</param>
  14. /// <returns></returns>
  15. public ActionResult Set(string Longitude, string Latitude, string Name)
  16. {
  17. //初始化redis
  18. CSRedis.CSRedisClient cSRedis = new CSRedis.CSRedisClient("192.168.56.131:6380,password=123456,defaultDatabase = 0");
  19. RedisHelper.Initialization(cSRedis);
  20. decimal Lng = decimal.Parse(Longitude);
  21. decimal Lat = decimal.Parse(Latitude);
  22. //存入坐标点
  23. var flag = RedisHelper.GeoAdd("zhongguo", Lng, Lat, Name);
  24. if (flag == true)
  25. {
  26. return Json(new { code = 1, message = "成功" });
  27. }
  28. else
  29. {
  30. return Json(new { code = 0, message = "提交失败" });
  31. }
  32. }
  33. /// <summary>
  34. /// 获取半径范围内的其他坐标
  35. /// </summary>
  36. /// <param name="lng">经度</param>
  37. /// <param name="lat">纬度</param>
  38. /// <param name="ran">半径</param>
  39. /// <returns></returns>
  40. public ActionResult Get(string lng, string lat, string ran)
  41. {
  42. //初始化redis
  43. CSRedis.CSRedisClient cSRedis = new CSRedis.CSRedisClient("192.168.56.131:6380,password=123456,defaultDatabase = 0");
  44. RedisHelper.Initialization(cSRedis);
  45. decimal Lng = decimal.Parse(lng);
  46. decimal Lat = decimal.Parse(lat);
  47. decimal Ran = decimal.Parse(ran);
  48. var K = CSRedis.GeoUnit.km;
  49. //获取周边坐标点
  50. (string member, decimal dist, decimal longitude, decimal latitude)[] list_ = RedisHelper.GeoRadiusWithDistAndCoord("zhongguo", Lng, Lat, Ran, K);
  51. return Json(list_, JsonRequestBehavior.AllowGet);
  52. }
  53. }
复制代码

3,view代码(注意 填写上面申请的密钥)

  1. @{
  2. Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="zh-CN">
  6. <head>
  7. <meta charset="utf-8">
  8. <title>地图展示</title>
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  10. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  11. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  12. <style>
  13. body,
  14. html,
  15. #container {
  16. overflow: hidden;
  17. width: 100%;
  18. height: 100%;
  19. margin: 0;
  20. font-family: "微软雅黑";
  21. }
  22. .info {
  23. z-index: 999;
  24. width: auto;
  25. min-width: 22rem;
  26. padding: .75rem 1.25rem;
  27. margin-left: 1.25rem;
  28. position: fixed;
  29. top: 1rem;
  30. background-color: #fff;
  31. border-radius: .25rem;
  32. font-size: 14px;
  33. color: #666;
  34. box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  35. }
  36. </style>
  37. <link href="~/Content/button.css" rel="external nofollow" rel="stylesheet" />
  38. <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
  39. <script src="~/Scripts/jquery-3.4.1.min.js"></script>
  40. <script>
  41. function bing() {
  42. var lng = $("#lng").val();
  43. var lat = $("#lat").val();
  44. var ran = $("#ran").val();
  45. $.ajax({
  46. url: "@Url.Action("Get", "Map")",
  47. data: {
  48. lng: lng,
  49. lat: lat,
  50. ran:ran
  51. },
  52. type: "post",
  53. dataType: "json",
  54. success: function (data) {
  55. console.log(data)
  56. if (data != null) {
  57. for (var i = 0; i < data.length; i++) {
  58. var new_point = new BMapGL.Point(data[i]['Item3'], data[i]['Item4']);
  59. console.log(data[i]['Item3'])
  60. console.log(data[i]['Item4'])
  61. var marker = new BMapGL.Marker(new_point); // 创建标注
  62. map.addOverlay(marker); // 将标注添加到地图中
  63. map.panTo(new_point);
  64. }
  65. }
  66. }
  67. });
  68. }
  69. </script>
  70. </head>
  71. <body>
  72. <div id="container"></div>
  73. <input type="text" id="ti" name="name" value="" placeholder="请输入名称" class="info" />
  74. <div id="re">
  75. 经度:
  76. <input type="text" id="lng" name="name" value="" />
  77. 纬度:
  78. <input type="text" id="lat" name="name" value="" />
  79. 范围:
  80. <input type="text" id="ran" name="name" value="" />
  81. <button id="reu" name="name" onclick="bing()" value="查询">查询</button>
  82. </div>
  83. <input type="hidden" name="GetLng" value="" />
  84. <div id="allmap"></div>
  85. </body>
  86. </html>
  87. <script>
  88. var map = new BMapGL.Map('container'); // 创建Map实例
  89. map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
  90. map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  91. </script>
  92. <script>
  93. var map = new BMapGL.Map('container');
  94. map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
  95. map.enableScrollWheelZoom(true);
  96. map.addEventListener('click', function (e) {
  97. alert( + e.latlng.lng + ',' + e.latlng.lat);
  98. if (confirm("是否添加此地址")) {
  99. var Longitude = e.latlng.lng;
  100. var Latitude = e.latlng.lat;
  101. var Name = $("#ti").val();
  102. $.ajax({
  103. url: "@Url.Action("Set", "Map")",
  104. data: {
  105. Longitude: Longitude,
  106. Latitude: Latitude,
  107. Name: Name
  108. },
  109. type: "post",
  110. dataType: "json",
  111. success: function (data) {
  112. if (data.code) {
  113. alert(data.message);
  114. }
  115. else {
  116. alert(data.message);
  117. }
  118. }
  119. });
  120. }
  121. });
  122. </script>
  123. <script type="text/javascript">
  124. // 百度地图API功能
  125. </script>
复制代码

到此这篇关于利用 百度地图api通过redis实现地标存储及范围坐标点查询功能的文章就先容 到这了,更多干系 百度地图api地标存储范围坐标点查询内容请搜刮 脚本之家从前 的文章或继续欣赏 下面的干系 文章渴望 大家以后多多支持脚本之家!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 塞翁364 | 2021-9-17 15:24:48 | 显示全部楼层
admin楼主,我告诉你一个你不知道的的秘密,有一个牛逼的源码论坛他的站点都是商业源码,还是免费下载的那种!特别好用。访问地址:http://www.mxswl.com 猫先森网络
回复

使用道具 举报

avatar 海上灵光Y8 | 2021-9-26 01:14:02 | 显示全部楼层
这个帖子会火的,鉴定完毕!
回复

使用道具 举报

avatar 喵呜_520 | 2021-9-29 17:51:58 | 显示全部楼层
学习雷锋,好好回帖!
回复

使用道具 举报

avatar 知足常乐77 | 2021-9-29 19:17:55 | 显示全部楼层
骂人也是要有水平的!
回复

使用道具 举报

avatar 索支较 | 2021-10-1 21:35:28 | 显示全部楼层
admin楼主,你妈妈喊你回家吃饭!
回复

使用道具 举报

avatar 王丽梅 | 2021-10-4 10:01:11 | 显示全部楼层
楼上是GG还是MM啊?
回复

使用道具 举报

avatar 曹羁奔陈构 | 2021-10-9 04:19:47 | 显示全部楼层
不灌水就活不下去了啊!
回复

使用道具 举报

好多兽医在广场上义诊,admin楼主去看看吧!
回复

使用道具 举报

avatar 湘军 | 4 天前 | 显示全部楼层
admin楼主的头像是本人吗?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则