Leaflet扩展地理编码服务_leaflet地理编码资源-CSDN文库

共11个文件

png：5个

js：3个

html：2个

Leaflet

地理编码

逆地理编码

需积分: 42 66 浏览量 2018-12-11 16:54:43 上传评论 2 收藏 104KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Leaflet-Geocoder.zip （11个子文件）

Leaflet-Geocoder

example.html 2KB

lib

Geocoder.js 3KB

leaflet

leaflet.css 13KB

leaflet.js 137KB

leaflet-src.js 217KB

images

marker-icon.png 1KB

layers-2x.png 1KB

layers.png 696B

marker-icon-2x.png 3KB

marker-shadow.png 618B

example02.html 3KB

<!DOCTYPE html> <html> <head> <title>逆地理编码</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="lib/leaflet/leaflet.css"> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } #map { width:100%; height:100%; } .input-card{ z-index: 50; background-color: #fff; width: 20rem; border-radius: 0.4rem; position: fixed; bottom: 1rem; right: 1rem; padding: 0.75rem 1.25rem; } .input-item{ position: relative; display: flex; } button, input, select { margin: 0; line-height: inherit; overflow: visible; text-transform: none; } .info{ padding: .75rem 1.25rem; margin-bottom: 1rem; border-radius: .25rem; position: fixed; top: 1rem; background-color: white; width: auto; min-width: 22rem; border-width: 0; right: 1rem; z-index: 50; } </style> <script src="lib/leaflet/leaflet.js"></script> <script src="lib/Geocoder.js"></script> </head> <body> <div id="map" style="z-index: 10"></div> <div class="info">输入或点击地图获取经纬度。</div> <div class="input-card" > <label style='color:grey'>逆地理编码，根据经纬度获取地址信息</label> <div class="input-item"> <div><span>经纬度:</span></div> <input id='lnglat' type="text" value='116.39,39.9 ' > </div> <div class="input-item"> <div><span>地址:</span></div> <input id='address' disabled type="text"> </div> <input id="regeo" type="button" class="btn" value="经纬度 -> 地址" /> </div> <script> //注意坐标问题，该服务基于高德，如果底图不是高德地图注意坐标转换 var map = L.map('map'); L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{maxZoom: 18, minZoom: 4,subdomains:["1","2","3","4"]}).addTo(map); map.setView(L.latLng(37.550339, 104.114129), 4); document.getElementById("regeo").onclick = regeoCode; function regeoCode(){ var text = document.getElementById("lnglat").value; var lnglat = text.split(','); L.geoCoder().getAddress(lnglat,function (res) { console.log(res); var json = JSON.parse(res); var address = json.regeocode.formatted_address; document.getElementById("address").value = address; }); } map.on('click',function (e) { var latlng = e.latlng; L.marker(latlng).addTo(map); var text = latlng.lng + ',' + latlng.lat; document.getElementById("lnglat").value = text; regeoCode(); }) </script> </body> </html>

评论收藏

内容反馈