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获取经纬度自动填充到文本框中的方法介绍的详细内容。
