您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

js获取经纬度自动填充到文本框中的方法介绍

2024/3/6 21:04:00发布21次查看
首先要注册百度地图api。
1、登录百度地图开放平台注册账号,完善信息,点击网站右上角的“api控制台”,点击,创建应用。
应用类型选择:“浏览器端”,应用服务全选,referer白名单:*
点击提交。会生成一个访问应用(ak)。
ak码记下来,后面页面中要用它来引出百度地图。
2、创建html网页。部分代码如下:              纬度:经度:   地址 :   点击显示地图获取地址经纬度
3、js代码<script type="text/javascript">document.getelementbyid('open').onclick = function () {  if (document.getelementbyid('allmap').style.display == 'none') {               document.getelementbyid('allmap').style.display = 'block';           } else {               document.getelementbyid('allmap').style.display = 'none';           }       }      var map = new bmap.map(allmap);  var geoc = new bmap.geocoder();   //地址解析对象  var markersarray = [];  var geolocation = new bmap.geolocation();          var point = new bmap.point(116.404412, 39.914714);       map.centerandzoom(point, 12); // 中心点  geolocation.getcurrentposition(function (r) {  if (this.getstatus() == bmap_status_success) {  var mk = new bmap.marker(r.point);               map.addoverlay(mk);               map.panto(r.point);               map.enablescrollwheelzoom(true);           }  else {               alert('failed' + this.getstatus());           }       }, {enablehighaccuracy: true})       map.addeventlistener(click, showinfo);          //清除标识  function clearoverlays() {  if (markersarray) {  for (i in markersarray) {                   map.removeoverlay(markersarray[i])               }           }       }  //地图上标注  function addmarker(point) {  var marker = new bmap.marker(point);           markersarray.push(marker);           clearoverlays();           map.addoverlay(marker);       }  //点击地图时间处理  function showinfo(e) {           document.getelementbyid('lng').value = e.point.lng;           document.getelementbyid('lat').value =  e.point.lat;           geoc.getlocation(e.point, function (rs) {  var addcomp = rs.addresscomponents;  var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber;  if (confirm(确定要地址是 + address + ?)) {                   document.getelementbyid('allmap').style.display = 'none';                   document.getelementbyid('address').value = address;               }           });           addmarker(e.point);       }   </script>
效果图:
ps:需要注意一点的是,js代码要写在body后面。否则地显示不出来以上就是js获取经纬度自动填充到文本框中的方法介绍的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product