最近在项目中用到百度地图,由于以前没有接触过,所以刚开始感觉无从下手;百度地图JavaScript API是用JavaScript编写的程序接口,废话不多说了看例子.(这是我第一次写博客,欢迎大家指教)

HTML页面代码:

[html] view plain copy

  1. <div id="container"
  2. style="position: absolute;
  3. margin-top:30px;
  4. width: 730px;
  5. height: 590px;
  6. top: 50px;
  7. border: 1px solid gray;
  8. overflow:hidden;">
  9. </div>

JavaScript代码:

[javascript] view plain copy

  1. //创建百度地图容器
  2. ar map = new BMap.Map("container");
  3. //初始化地图,设置中心点坐标和地图级别。
  4. var point = new BMap.Point(113.48722, 23.187232);
  5. map.centerAndZoom(point, 13);

[javascript] view plain copy

  1. var localSearch = new BMap.LocalSearch(map);
  2. localSearch.enableAutoViewport(); //允许自动调节窗体大小
  3. map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
  4. map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
  5. map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
  6. map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
  7. map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开

由于项目需求我要页面获取到小区的名称转化为经纬度并且在该位置加上标注;下面就是从页面获取位置并且转化为经纬度的过程

HTML页面代码:

[html] view plain copy

  1. <div style="width:730px;margin:auto;">
  2. <input class="a" type="hidden" value="金水区"/>
  3. <input class="a" type="hidden" value="二七区"/>
  4. <input class="a" type="hidden" value="管城区"/>
  5. <input class="a" type="hidden" value="经开区"/>
  6. <input class="a" type="hidden" value="金水区"/>
  7. <input class="a" type="hidden" value="高新区"/>
  8. <input class="a" type="hidden" value="惠济区"/>
  9. <input class="a" type="hidden" value="郑东新区"/>
  10. <div id="container"
  11. style="position: absolute;
  12. margin-top:30px;
  13. width: 730px;
  14. height: 590px;
  15. top: 50px;
  16. border: 1px solid gray;
  17. overflow:hidden;">
  18. </div>

JavaScript代码:

[javascript] view plain copy

  1. var pointArray = [];//创建数组接收转化后的多个坐标值
  2. var keyword = [];//从页面获取到的需要转化的地址
  3. var keywordVal;
  4. $(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
  5. keywordVal = $(".a").eq(i).val();
  6. keyword.push(keywordVal);
  7. searchByStationName();
  8. });
  9. var markerArray = [];
  10. function searchByStationName(keywordVal) {
  11. map.clearOverlays();// 清空原来的标注
  12. localSearch.search(keywordVal);
  13. localSearch.setSearchCompleteCallback(function(searchResult) {
  14. var poi = searchResult.getPoi(0);
  15. map.centerAndZoom("郑州", 13);
  16. var longitude = poi.point.lng;// 经度
  17. var latitude = poi.point.lat;// 纬度
  18. var pointVal = new BMap.Point(longitude, latitude);
  19. pointArray.push(pointVal);
  20. var marker = new BMap.Marker(pointVal);
  21. markerArray.push(marker);
  22. // 创建标注，为要查询的地方对应的经纬度
  23. map.addOverlay(marker);
  24. //在页面上展示出当前位置信息
  25. var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+ searchResult.keyword + "</p>");
  26. marker.addEventListener("click", function() {
  27. this.openInfoWindow(infoWindow);
  28. });
  29. marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
  30. });
  31. }

下面贴上全部代码:

[html] view plain copy

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>根据地址查询经纬度</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
  7. <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
  8. <style>
  9. a.{
  10. margin-right:100px;
  11. }
  12. </style>
  13. </head>
  14. <body style="background:#CBE1FF">
  15. <div style="width:730px;margin:auto;">
  16. <input class="a" type="hidden" value="金水区"/>
  17. <input class="a" type="hidden" value="二七区"/>
  18. <input class="a" type="hidden" value="管城区"/>
  19. <input class="a" type="hidden" value="经开区"/>
  20. <input class="a" type="hidden" value="金水区"/>
  21. <input class="a" type="hidden" value="高新区"/>
  22. <input class="a" type="hidden" value="惠济区"/>
  23. <input class="a" type="hidden" value="郑东新区"/>
  24. <div id="container"
  25. style="position: absolute;
  26. margin-top:30px;
  27. width: 730px;
  28. height: 590px;
  29. top: 50px;
  30. border: 1px solid gray;
  31. overflow:hidden;">
  32. </div>
  33. </div>
  34. </body>
  35. <script type="text/javascript">
  36. var map = new BMap.Map("container");
  37. var point = new BMap.Point(113.48722, 23.187232);
  38. map.centerAndZoom(point, 13);
  39. var localSearch = new BMap.LocalSearch(map);
  40. localSearch.enableAutoViewport(); //允许自动调节窗体大小
  41. map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
  42. map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
  43. map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
  44. map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
  45. map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开
  46. var pointArray = [];//创建数组接收转化后的多个坐标值
  47. var keyword = [];//从页面获取到的需要转化的地址
  48. var keywordVal;
  49. $(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
  50. keywordVal = $(".a").eq(i).val();
  51. keyword.push(keywordVal);
  52. searchByStationName();
  53. });
  54. * console.info(keyword); */
  55. var markerArray = [];
  56. function searchByStationName(keywordVal) {
  57. map.clearOverlays();// 清空原来的标注
  58. localSearch.search(keywordVal);
  59. localSearch.setSearchCompleteCallback(function(searchResult) {
  60. var poi = searchResult.getPoi(0);
  61. map.centerAndZoom("郑州", 13);
  62. var longitude = poi.point.lng;// 经度
  63. var latitude = poi.point.lat;// 纬度
  64. var pointVal = new BMap.Point(longitude, latitude);
  65. pointArray.push(pointVal);
  66. var marker = new BMap.Marker(pointVal);
  67. markerArray.push(marker);
  68. // 创建标注，为要查询的地方对应的经纬度
  69. map.addOverlay(marker);
  70. //在页面上展示出当前位置信息
  71. var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+ searchResult.keyword + "</p>");
  72. marker.addEventListener("click", function() {
  73. this.openInfoWindow(infoWindow);
  74. });
  75. marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
  76. });
  77. }
  78. console.info(pointArray);</script></html>

第一次写欢迎大家来吐槽指正

转载于:https://my.oschina.net/u/2984964/blog/834427

百度地图 获取地址转换为经纬度相关推荐

  1. php地址转换成经纬度,百度地图 获取地址转换为经纬度

    html> 根据地址查询经纬度 a.{ margin-right:100px; } style="position: absolute; margin-top:30px; width: ...

  2. python+百度地图 实现地址转换为经纬度（全网最简单方法）

    python+百度地图实现地址转换经纬度 前期准备 安装requests包 在百度地图开放平台申请AK 接下来进入正题 首先, AK使用方法 最后,上代码 前期准备 首先安装需要的库,requests ...

  3. 网站调用百度地图 根据地址查询经纬度

    百度地图API简单应用-根据地址查询经纬度 简单几步注册获得一个ak,就能直接调用(PS:好像1.3版本前的无需注册获取ak,就能直接调用api). 闲话不多,下面就直接给大家介绍下,具体要怎么调用百 ...

  4. python获取某地铁站经纬度_python基于百度地图获取指定的经纬度信息

    在实际做项目的时候经常会遇上需要使用到某个位置经纬度的情况,这个位置的经纬度经常又是没有的,那么就需要基于公开的数据去获取了,这里基于百度地图提供的API来完成指定位置经纬度数据的获取,实现很简单,主 ...

  5. js百度地图获取当前定位经纬度及省市区

    首先需要引入百度地图api 和jq <script type="text/javascript" src="https://api.map.baidu.com/ap ...

  6. Android 通过高德地图获取地址的经纬度

    不废话,需求:输入一个地址,获取到它的经纬度,怎么办? 1.到高德开放平台申请,获取key 高德开放平台:https://lbs.amap.com/ 2.下载高德定位及地址搜索SDK:https:// ...

  7. 点击百度地图获取位置详细信息（点击获取当前点击位置信息）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）

    本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...

  9. 百度地图获取经纬度后，获取区域代码和地址

    百度地图获取经纬度后,获取区域代码和地址: function getdistrct_code($location){$url ="api.map.baidu.com/geocoder/v2/ ...

最新文章

  1. Promise的实例用法
  2. 一段java代码是如何执行的？
  3. Sklearn参数详解—Adaboost
  4. javascript 功能受限、原因和解决办法（一则）
  5. python中的sklearn教程_python作业之sklearn
  6. Python开发人员最喜欢的工具
  7. 2021年还能用的13款完全免费的Office插件整理（含功能详细介绍）
  8. vfp公交车调度系统
  9. 项目开发中DEV、QAS、PRD是什么意思
  10. Python自动发抖音脚本教程（1：介绍和源码）
  11. android模拟器装包,逍遥模拟器如何安装本地应用包apk?
  12. win10下c语言哪个版本号,怎么查看我的电脑用的是win10的哪个版本?win10各版本之间的区别...
  13. 秒云获得阿里云首批产品生态集成认证，携手阿里云共建云原生智能运维生态服务
  14. 新生宝宝办证-STEP1-出生证明办理
  15. 【WB32库开发】第12章（上）TIM1高级定时器——PWM输入捕获
  16. python实现长截图_用python实现对元素的长截图
  17. 数据结构与算法——每日一练（12月）
  18. Unity 面试题汇总（三）Unity 基础相关
  19. HFSS学习笔记 21 扫频分析
  20. 第五单元 学习类型与学习者的个性差异（个性差异，学习动机）

热门文章

  1. NoClassDefFoundError:org/springframework/web/context/WebApplicationContext
  2. 最大流网络之Push-Relabel算法
  3. 「学习笔记」泰勒级数
  4. Wondershare PDFelement Pro Mac(好用的PDF编辑器)
  5. Linux进程top命令作用是,linux top命令详解
  6. C++模板笔记十：类模板案例：通用数组类
  7. Kindle 特价书
  8. python安装时发生严重错误在设置里找不到文件_pip安装pythonlz时出现“找不到文件”错误...
  9. mysql数据库进行清洗,清理数据库
  10. 淘宝订单API接口-获取单笔交易的部分信息