高德AMAP行政区划边界及经纬度获取
使用高德地图,利用搜索功能,获取地址详情、经纬度等信息
使⽤⾼德地图,利⽤搜索功能,获取地址详情、经纬度等信息效果展⽰需求:1、实现⾼德地图输⼊地址⾃动提⽰功能 ,根据筛选结果,默认显⽰第⼀个结果2、实现单击获取某个地点的经纬度和地址信息3、实现筛选地址标注点4、实现地图回显,再次打开地图定位到之前选中的地址展⽰详情5、封装地图组件可在项⽬中任意地⽅使⽤注意点:⾸先项⽬中需要引⽤⾼德地图,并且我同步引⽤了⾼德的PlaceSearch、AdvancedInfoWindow、Autocomplete这⼏个插件,⾼德提供同步引⽤和异步引⽤,异步引⽤的话,需要你⾃⼰去⾼德的⽂档看看<script src="https:///maps?v=1.4.15&key=换成你⾃⼰的key&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow,AMap.Autocomplete"></script>⾸先发⼀份可直接打开看的vue⽂件<template><basic-container><el-button @click="openMap">打开地图选择</el-button><el-dialogtitle="地图选择":visible.sync="mapDialog"width="80%":close-on-click-modal="false":before-close="cancelMap"top="10vh"><div class="over-hide"><div id="myPageTop"><table><tr><td></td></tr><tr><td><el-inputplaceholder="请输⼊关键字进⾏查询"v-model="inputAddress"id="tipinput"@clear="inputHandle"@input="clickCancle"clearable></el-input></td></tr></table></div><div id="container" class="map"></div><br /><br /></div><span slot="footer" class="dialog-footer"><div class="t-a-l"><el-row class="infoAddressIpt"><el-col :span="2"><span>详细地址</span></el-col><el-col :span="22"><el-input v-model="saveAddress"></el-input></el-col></el-row><span class="spb">重要提醒:地址标准格式**市**区**路**号。
高德地图JSAPI获取经纬度,根据经纬度获取城市
⾼德地图JSAPI获取经纬度,根据经纬度获取城市<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>输⼊提⽰后查询,点击获取坐标</title><style type="text/css">#mapContainer{position: absolute;top:0;left: 0;right:0;bottom:0;}#tip{background-color:#fff;border:1px solid #ccc;padding-left:10px;padding-right:2px;position:absolute;min-height:65px;top:10px;font-size:12px;right:10px;border-radius:3px;overflow:hidden;line-height:20px;min-width:30%;}#tip input[type="button"]{background-color: #0D9BF2;height:25px;text-align:center;line-height:25px;color:#fff;font-size:12px;border-radius:3px;outline: none;border:0;cursor:pointer;}#tip input[type="text"]{height:25px;border:1px solid #ccc;padding-left:5px;border-radius:3px;outline:none;}#pos{height: 110px;background-color: #fff;padding-left: 10px;padding-right: 10px;position:absolute;font-size: 12px;right: 10px;bottom: 30px;border-radius: 3px;line-height: 30px;border:1px solid #ccc;}#pos input{border:1px solid #ddd;height:23px;border-radius:3px;outline:none;width: 100px;}#result1{max-height:300px;}b{display: block;margin: 5px 0;}</style></head><body><div style="width: 500px;height: 500px;position: relative;"><div id="mapContainer"></div><div id="tip"><b>请输⼊关键字:</b><input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/><div id="result1" name="result1"></div></div><div id="pos"><b>⿏标左键在地图上单击获取坐标</b><div>X:<input type="text" id="lngX" name="lngX" value=""/> Y:<input type="text" id="latY" name="latY" value=""/></div><div>城市:<input type="text" id="city" name="city" value=""/></div></div></div><!--请把js引⼊部分的key值换成你申请下来的,要不然不能⽤哦~~--><script type="text/javascript" src="/maps?v=1.3&key=84a1f826e2e135184370cddc9e7848acluo"></script><script type="text/javascript">var windowsArr = [];var marker = [];var mapObj = new AMap.Map("mapContainer", {resizeEnable: true,view: new AMap.View2D({resizeEnable: true,zoom:13//地图显⽰的缩放级别}),keyboardEnable:false});var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){console.log(e);document.getElementById("lngX").value=e.lnglat.getLng();document.getElementById("latY").value=e.lnglat.getLat();AMap.service('AMap.Geocoder',function(){//回调函数//实例化Geocodergeocoder = new AMap.Geocoder({city: ""//城市,默认:“全国”});var lnglatXY=[e.lnglat.getLng(), e.lnglat.getLat()];//地图上所标点的坐标geocoder.getAddress(lnglatXY, function(status, result) {if (status === 'complete' && === 'OK') {//获得了有效的地址信息://即,result.regeocode.formattedAddress//console.log(result);var city = result.regeocode.addressComponent.city;}else{var city = '获取失败';//获取地址失败}document.getElementById("city").value=city;console.log(city);});})});document.getElementById("keyword").onkeyup = keydown;//输⼊提⽰function autoSearch() {var keywords = document.getElementById("keyword").value;var auto;//加载输⼊提⽰插件AMap.service(["AMap.Autocomplete"], function() {var autoOptions = {city: "" //城市,默认全国};auto = new AMap.Autocomplete(autoOptions);//查询成功时返回查询结果if ( keywords.length > 0) {auto.search(keywords, function(status, result){autocomplete_CallBack(result);});}else {document.getElementById("result1").style.display = "none";}});}//输出输⼊提⽰结果的回调函数function autocomplete_CallBack(data) {var resultStr = "";var tipArr = data.tips;if (tipArr&&tipArr.length>0) {for (var i = 0; i < tipArr.length; i++) {resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)+ ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)+ ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";}}else {resultStr = " π__π亲,⼈家找不到结果!<br />要不试试:<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";}document.getElementById("result1").curSelect = -1;document.getElementById("result1").tipArr = tipArr;document.getElementById("result1").innerHTML = resultStr;document.getElementById("result1").style.display = "block";}//输⼊提⽰框⿏标滑过时的样式function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tipthiss.style.background = '#CAE1FF';}//输⼊提⽰框⿏标移出时的样式function onmouseout_MarkerStyle(pointid, thiss) { //⿏标移开后点样式恢复thiss.style.background = "";}//从输⼊提⽰框中选择关键字并查询function selectResult(index) {if(index<0){return;}if (erAgent.indexOf("MSIE") > 0) {document.getElementById("keyword").onpropertychange = null;document.getElementById("keyword").onfocus = focus_callback;}//截取输⼊提⽰的关键字部分var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');document.getElementById("keyword").value = text;document.getElementById("result1").style.display = "none";//根据选择的输⼊提⽰关键字查询mapObj.plugin(["AMap.PlaceSearch"], function() {var msearch = new AMap.PlaceSearch(); //构造地点查询类AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数msearch.setCity(cityCode);//console.log(cityCode);msearch.search(text); //关键字查询查询});}//定位选择输⼊提⽰关键字function focus_callback() {if (erAgent.indexOf("MSIE") > 0) {document.getElementById("keyword").onpropertychange = autoSearch;}}//输出关键字查询结果的回调函数function placeSearch_CallBack(data) {//清空地图上的InfoWindow和MarkerwindowsArr = [];marker = [];mapObj.clearMap();var resultStr1 = "";var poiArr = data.poiList.pois;var resultCount = poiArr.length;for (var i = 0; i < resultCount; i++) {resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";addmarker(i, poiArr[i]);}mapObj.setFitView();}//⿏标滑过查询结果改变背景样式,根据id打开信息窗体function openMarkerTipById1(pointid, thiss) {thiss.style.background = '#CAE1FF';windowsArr[pointid].open(mapObj, marker[pointid]);}//添加查询结果的marker&infowindowfunction addmarker(i, d) {var lngX = d.location.getLng();var latY = d.location.getLat();var markerOption = {map:mapObj,icon:"/images/" + (i + 1) + ".png",position:new AMap.LngLat(lngX, latY)};var mar = new AMap.Marker(markerOption);marker.push(new AMap.LngLat(lngX, latY));var infoWindow = new Window({content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + + "</font></h3>" + TipContents(d.type, d.address, d.tel), size:new AMap.Size(300, 0),autoMove:true,offset:new AMap.Pixel(0,-30)});windowsArr.push(infoWindow);var autoData = function (e) {var nowPosition = mar.getPosition(),lng_str = nowPosition.lng,lat_str = t;infoWindow.open(mapObj, nowPosition);document.getElementById("lngX").value = lng_str;document.getElementById("latY").value = lat_str;AMap.service('AMap.Geocoder',function(){//回调函数//实例化Geocodergeocoder = new AMap.Geocoder({city: ""//城市,默认:“全国”});var lnglatXY=[lng_str, lat_str];//地图上所标点的坐标geocoder.getAddress(lnglatXY, function(status, result) {if (status === 'complete' && === 'OK') {//获得了有效的地址信息://即,result.regeocode.formattedAddress//console.log(result);var city = result.regeocode.addressComponent.city;}else{var city = '获取失败';//获取地址失败}document.getElementById("city").value=city;console.log(city);});})};AMap.event.addListener(mar, "mouseover", autoData);}//infowindow显⽰内容function TipContents(type, address, tel) { //窗体内容if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {type = "暂⽆";}if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {address = "暂⽆";}if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {tel = "暂⽆";}var str = " 地址:" + address + "<br /> 电话:" + tel + " <br /> 类型:" + type;return str;}function keydown(event){var key = (event||window.event).keyCode;var result = document.getElementById("result1")var cur = result.curSelect;if(key===40){//downif(cur + 1 < result.childNodes.length){if(result.childNodes[cur]){result.childNodes[cur].style.background='';}result.curSelect=cur+1;result.childNodes[cur+1].style.background='#CAE1FF';document.getElementById("keyword").value = result.tipArr[cur+1].name;}}else if(key===38){//upif(cur-1>=0){if(result.childNodes[cur]){result.childNodes[cur].style.background='';}result.curSelect=cur-1;result.childNodes[cur-1].style.background='#CAE1FF';document.getElementById("keyword").value = result.tipArr[cur-1].name;}}else if(key === 13){var res = document.getElementById("result1");if(res && res['curSelect'] !== -1){selectResult(document.getElementById("result1").curSelect);}}else{autoSearch();}}</script></body></html>。
前端获取当前经纬度(gps,高德)
前端获取当前经纬度(gps,⾼德)⽅法介绍:1. 该⽅法是个 promise 对象,因为不管是⽤ GPS 还是⾼德定位都是异步的2. ⽅法优先是⽤ h5 ⾃带 API 进⾏ GPS 定位,如果获取不到位置会使⽤⾼德定位(⾼德定位需要⾼德的key),如果都没获取到,那就经纬度都返回 03. 该 promise 封装的很拙略,能⼒⾄此,会慢慢优化的,本来使⽤的正常⽅法加回调函数处理获取到的经纬度,但考虑再三还是使⽤promise 能好点注意:1. 现在很多浏览器需要加密协议的链接才能获取到⽤户位置,保险起见,请使⽤加密协议的链接2. 使⽤⾼德定位需要在⾼德那⾥申请key3. 如果需要精度⾼或者后续还要使⽤⾼德地图对经纬度做其他处理,需要将 gps 获取到的经纬度转成⾼德经纬度,项⽬头部引得GPS2AMAP就是处理这个的,代码在下⾯1/*2该⽅法暴露出去的是⼀个promise,经纬度在resolve的第⼀个参数⾥3使⽤⽅法: startLocation.then(({lat, lng}) => {这⾥就是你的⽅法})4*/56// 将gps 经纬度转为⾼德经纬度,精度要求⾼的需要这个东西7 import {8 GPS9 } from './GPS2AMAP'10 let callback = null// promise 的 resolve会赋值给这个函数11// gps 定位成功回调12 const onSuccess = (position) => {13 const {14 latitude: lat,15 longitude: lng16 } = position.coords17 const exchange = GPS.gcj_encrypt(Number.parseFloat(lat), Number.parseFloat(lng)) // 对精度要求不⾼可以省略这步,把上⾯获取到的经纬度直接传给saveLocation18 console.log('gps定位', `${t}-${exchange.lng}`)19 saveLocation(t, exchange.lng)20 }21// gps 定位失败回调22 const onError = () => {23 initAMAP()24 console.error('gps失败')25 }26// 初始化⾼德,加载⾼德js27 const initAMAP = () => {28 const key = 'xxxxxxxxxxx', // 从⾼德买来的key29 MP = new Promise(function (resolve, reject) {30 window.init = function () {31 resolve(AMap)32 };33 let script = document.createElement("script");34 script.type = "text/javascript";35 script.src = "///maps?v=1.4.6&key="+key+"&callback=init";36 script.onerror = reject;37 document.head.appendChild(script);38 })39 MP.then(function (AMap) {40 startAMAPLocation(AMap)41 }).catch(err=>{42 console.error(JSON.stringify(err));43 })44 }4546// 开始⾼德定位47 const startAMAPLocation = (AMap) => {48 AMap.plugin('AMap.Geolocation', function () {49var geolocation = new AMap.Geolocation({50 enableHighAccuracy: true, //是否使⽤⾼精度定位,默认:true51 timeout: 8000, //超过10秒后停⽌定位,默认:5s52 buttonPosition: 'RB', //定位按钮的停靠位置53 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)54 zoomToAccuracy: true, //定位成功后是否⾃动调整地图视野到定位点55 });56// map.addControl(geolocation);57 geolocation.getCurrentPosition(function (status, result) {58if (status == 'complete') {59 console.log('⾼德: ', `${t},${result.position.lng}`)60 saveLocation(t, result.position.lng)61 } else {62 console.error('⾼德失败')63 saveLocation(0, 0)64 }65 });66 });67 }68// 处理获取到的经纬度69 const saveLocation = (lat = 0, lng = 0) => {70 lat && (lat = parseFloat(lat).toFixed(6))71 lng && (lng = parseFloat(lng).toFixed(6))72typeof callback === 'function' && callback({lat, lng})73 }7475// promise, resolve的第⼀个参数就是经纬度,76 const startLocation = new Promise((resolve, reject) => {77 callback = resolve78 const options = {79 enableHighAccuracy: true,80 maximumAge: 1000,81 timeout: 500082 }83if (navigator.geolocation) {84 navigator.geolocation.getCurrentPosition(onSuccess, onError, options)85 } else {86 saveLocation(0, 0)87 console.error('您的浏览器不⽀持地理位置定位')88 }89 })90 export default startLocation这⾥ GPS2AMAP.js ,这个⽅法是这位⽼哥的,1 export const GPS = {2 PI : 3.14159265358979324,3 x_pi : 3.14159265358979324 * 3000.0 / 180.0,4 delta : function (lat, lng) {5var a = 6378245.0; // a: 卫星椭球坐标投影到平⾯地图坐标系的投影因⼦。
经纬度定位工具高德
经纬度定位工具高德在现代社会中,随着科技的不断发展,定位技术已经成为了我们生活中不可或缺的一部分。
无论是出行导航、地图浏览,还是物流追踪、位置共享等,准确的定位信息都是确保各项服务能够有效运作的关键。
而高德地图作为国内领先的地理信息服务供应商,其经纬度定位工具更是受到了广大用户的青睐。
高德地图简介高德地图是由阿里巴巴旗下的高德公司开发和运营的一款地理信息服务产品。
它提供了全面、准确、实时的地理信息数据,包括街道地图、卫星地图、交通态势、地理编码、路径规划等功能,满足了人们在生活、工作中对地理位置信息的各种需求。
高德地图凭借其精准的定位和详细的地图信息,成为国内最受欢迎的导航和地图浏览应用之一。
在高德地图的背后,经纬度定位工具则是这一工具的核心。
经纬度定位工具的原理经纬度是地球上任意一个点的地理坐标,在地理坐标系中用经度和纬度来表示。
经度是表示一个点在东西方向上的位置,而纬度则是表示一个点在南北方向上的位置。
经度的范围是-180到180度,纬度的范围是-90到90度。
经纬度定位工具就是通过获取设备所处的经纬度信息,来确定设备在地球上的位置。
在移动设备中,可以通过GPS、基站定位等技术来获取经纬度信息。
高德地图就是通过利用这些技术,来提供准确的地理位置服务。
经纬度定位的应用经纬度定位在现代社会中被广泛应用于各个领域。
下面我们来看一些经纬度定位工具在实际应用中的案例。
出行导航出行导航是经纬度定位工具最常见的应用之一。
通过获取设备的经纬度信息,高德地图可以帮助用户进行导航,提供最佳的行车路线和交通情况。
无论是驾车、步行、骑行还是公共交通,高德地图都能够根据设备的位置信息,为用户提供准确、实时的导航服务。
地图浏览高德地图还提供了详细的街道地图和卫星地图,用户可以通过经纬度定位工具,在地图上快速定位到具体的位置。
不仅如此,用户还能够进行地图放大、缩小、旋转等操作,以便更清楚地了解目标区域的地理信息。
地理编码地理编码是将地址转换成经纬度坐标的过程,而经纬度定位工具可以帮助实现这一功能。
根据经纬度,如何获取地址(经纬度解析中文地址)
根据经纬度,如何获取地址(经纬度解析中文地址)移动开发中和poi数据开发中,需要通过经纬度,获取省、市、区(县)等中文地址,这个一直没有标准的技术解决方案,LBS数据中心经过努力,完全解决了这一问题。
具体的实现方式如下:国内唯一权威、标准的经纬度解析数据库,根据精度和纬度每变化0.01,就解析一次标准的地址,完全覆盖全国,数据量980万条。
数据样式:百度地图数据(poi数据)的技术解决方案百度地图目前拥有超过2000完的地图数据,数据的格式包含了商户数据、道路数据、楼宇数据、社区数据、村庄数据等,数据包含了类别、经纬度、电话、名称等,数据格式如下:mapabc地图(也叫高德系列,包含谷歌等地图数据)全国兴趣点poi商户数据共1500多万条,包含地址、电话、经纬度、类别,CSV格式。
谷歌数据格式如下:数据的获取和更多的信息可以查看官方新浪博客:/u/2928794464数据获取和技术QQ咨询:2640056519官方博客拥有以下数据库:纠偏数据库(google地图)精度为0.01:经纬度每变化0.01,取一次偏移值,共980万条,access文件约600mb,误差5~10米。
精度为0.001:经纬度每变化0.001,取一次偏移值,共9亿条,csv文件共20gb,误差约2米。
百度地图纠偏数据库精度0.01,共2800万条全国商户数据poimapabc地图(也叫高德系列,包含谷歌等地图数据)全国兴趣点poi商户数据共1500多万条,包含地址、电话、经纬度、类别,CSV格式。
baidu百度地图poi:全国超过2000万条,永久免费更新技术问题二:各类地图的经纬度偏移的权威技术解决大家在做gps开发中经常会使用到经纬度数据,在开发中,你会发现一个问题,就是每个点的数据都会有偏移,这个就是经纬度偏移问题,那如何解决呢?这个就是需要用到权威的官方的(必须是官方的)纠偏数据库了!数据获取的方式也在新浪博客里面啊!地图经纬度纠偏(gps经纬度偏移及纠偏方法)以上非广告啊,是我在多年移动开发的经验分享,大家也可以和我做技术交流!技术案例:gps数据为什么在地图上的显示会有几百米甚至更多的偏移,这个就是中国国家测绘局的规定,为了安全期间,要求地图的出版商必须加入偏移规则,目前最权威和官方的解决方式就是使用纠偏数据库,百度和谷歌的纠偏数据库都是不一样的,但使用方法相同,下面我来介绍一下:下面是数据库的格式:中国地图经纬度偏移修正数据库,精度:0.01精度,数据量:9813676 条。
通过网格拆分高德地图
通过⽹格拆分⾼德地图 因为爬⾍需要,如⼤众点评通过距离获取商铺,以及⾼德poi获取有数量限制。
就想到通过⽹格的⽅式,把⾼德地图拆分成⼀个⼀个的格⼦,获取对应的经纬度,然后通过对应的经纬度去爬取收据。
思路: ⾸先获取城市的边界范围,根据边界画出⼀个矩形。
然后通过 new AMap.LngLat获取相应的点。
但是考虑到绘制的会远⼤于该城市实际范围,在城市内部再绘制⼀个矩形。
外围矩形每五公⾥拆分⼀次,内部矩形每公⾥拆分⼀次。
主要代码如下var x1 = new AMap.LngLat(left_lng, left_lat)var x2 = new AMap.LngLat(right_lng, left_lat)var y = new AMap.LngLat(left_lng, right_lat)var center_x1 = new AMap.LngLat(center_left_lng, center_left_lat)var center_x2 = new AMap.LngLat(center_right_lng, center_left_lat)var center_y = new AMap.LngLat(center_left_lng, center_right_lat)var x_distance = x1.distance(x2);var y_distance = x1.distance(y);var center_x_distance = center_x1.distance(center_x2);var center_y_distance = center_x1.distance(center_y);console.log(x_distance, y_distance)console.log(center_x_distance, center_y_distance)drawGrad(x_distance, y_distance);function drawGrad(x, y) {//x,y代表的是距离var x_total = Math.floor(x / km);//⾸尾,故点多1var y_total = Math.floor(y / km);console.log(x_total, y_total)for (var i = 0; i < x_total + 1; i++) {for (var j = 0; j < y_total + 1; j++) {let point = southWest.offset(km * i, -km * j)//在内部矩形,则跳过if ((center_left_lng <= point.lng && point.lng <= center_right_lng) && (center_right_lat <= t && t <= center_left_lat)) {continue}pointsObj[i + "_" + j] = point.lng + ',' + tif (i > 0 && j > 0) {let last_point = pointsObj[(i - 1) + '_' + (j - 1)];if(!last_point){continue}arrList.push(last_point+ '|' + pointsObj[i + '_' + j]) }var bounds2 = new AMap.Bounds(southWest, point) var rectangle2 = new AMap.Rectangle({bounds: bounds2,strokeColor: '#000',strokeWeight: 1,strokeStyle: 'dashed',fillColor: 'transparent',})rectangle2.setMap(map)if (i == x_total && j == y_total) {// console.error(Date.parse(new Date()))console.log(arrList.length)console.log(JSON.stringify(arrList))}}}}。
vue-amap geolocationcallback方法
vue-amap geolocationcallback方法
"vue-amap geolocationcallback方法" 这句话指的是 Vue-AMap 库中用于处理地理位置信息的回调方法。
Vue-AMap 是一个基于Vue.js 和高德地图API 的组件库,它提供了丰富的地图功能,包括地理位置定位。
在 Vue-AMap 中,geolocationcallback是一个方法,用于处理地理位置信息获取的回调。
当用户请求获取地理位置信息时,该方法会被调用。
通过这个方法,你可以获取到用户的经纬度坐标、位置信息等,并可以在回调函数中进行进一步的处理,比如在地图上标记用户的位置,或者根据位置信息执行其他相关操作。
具体来说,geolocationcallback方法通常接收一个参数,该参数包含地理位置信息的相关数据。
你可以在回调函数中访问这些数据,并根据需要进行处理。
总结来说,vue-amap geolocationcallback方法是 Vue-AMap 库中用于处理地理位置信息获取的回调方法。
通过这个方法,你可以获取到用户的地理位置信息,并在回调函数中进行进一步的处理。
高德AMAP行政区划边界及经纬度获取
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>行政区划边界</title><link rel="stylesheet" type="text/css"href="/Public/css/demo.Default.css" /><script language="javascript"src="/maps?v=1.3&key=7de8697669288fc848e 12a08f58d995e"></script><script language="javascript">var mapObj,district;/**初始化地图对象,加载地图*/function mapInit(){mapObj = new AMap.Map("iCenter",{view: new AMap.View2D({center:new AMap.LngLat(116.397428,39.90923),//地图中心点zoom:10 //地图显示的缩放级别})});initPolygon();}function initPolygon(){//加载云图层插件mapObj.plugin('AMap.DistrictSearch', function () {var opts = {subdistrict: 0, //返回下一级行政区extensions: 'all', //返回行政区边界坐标组等具体信息level:'city'//查询行政级别为市};//实例化DistrictSearchdistrict = new AMap.DistrictSearch(opts);//查询成功时的回调函数,定义如何展示请求返回结果AMap.event.addListener(district, 'complete', function(e){var bounds = e.districtList[0].boundaries;var polygons = [];var arr = [];if(bounds){for(var i =0, l = bounds.length;i < l; i++){//生成行政区划polygonvar polygon = new AMap.Polygon({map:mapObj,strokeWeight:1,path:bounds[i],fillOpacity:0.7,fillColor:'#CCF3FF',strokeColor:'#CC66CC'});polygons.push(polygon);}mapObj.setFitView();//地图自适应}for(var i=0;i<bounds.length;i++){var lnglatArr = polygons[i].getPath();for(var j=0;j<lnglatArr.length;j++){arr.push(lnglatArr[j].toString());}}document.getElementById("info").innerText = arr.join(";");arr = [];//释放数组});});}/**叠加云数据图层*/function drawPolygon() {var level = document.getElementById("level").value;var name = document.getElementById("district").value;var isClear =document.getElementById("isClear").value;if(district == ""){alert("请输入行政区名称!");return false;}if(isClear == 1){mapObj.clearMap();//清除地图覆盖物}district.setLevel(level);//行政区查询 districtdistrict.search(name); //行政区查询}</script></head><body onLoad="mapInit()"><div id="iCenter"></div><div style="height: 80px;width:1000px;"><table style="width:100%;height:100%;" align="center"> <tr height="40px"><td width="15%" align="right">选择行政区级别:</td><td width="35%"><select id="level"><option value="country">国家</option><option value="province">省/直辖市</option><option value="city" selected="selected">市</option><option value="district">区/县</option><option value="biz_area">商圈</option></select></td><td width="50%" rowspan="4" align="center"height="160px"><textarea id="info" rows="3"style="width:100%;height:100%;padding: 2px 0px 0px 5px; font-size: 12px; color: red; overflow-y: auto"></textarea></td></tr><tr height="40px"><td align="right">行政区名称:</td><td><input type="text" name="district"id="district"/></td></tr><tr height="40px"><td align="right">是否清除覆盖物:</td><td><select id="isClear"><option value="1" selected="selected">是</option><option value="0">否</option></select></td></tr><tr height="40px"><td colspan="2" align="center"><input type="button" value="绘制" onclick="drawPolygon()"/></td></tr></table></div></body></html>。
高德地图-全国code和区域经纬度(精确到区级)
高德地图-全国code和区域经纬度(精确到区级)区域CODE区域名称区域上级CODE 110000北京市110100市辖区110000 110101东城区110100 110102西城区110100 110105朝阳区110100 110106丰台区110100 110107石景山区110100 110108海淀区110100 110109门头沟区110100 110111房山区110100 110112通州区110100 110113顺义区110100 110114昌平区110100 110115大兴区110100 110116怀柔区110100 110117平谷区110100 110118密云区110100 110119延庆区110100 120000天津市120100市辖区120000 120101和平区120100 120102河东区120100 120103河西区120100 120104南开区120100 120105河北区120100 120106红桥区120100 120110东丽区120100 120111西青区120100 120112津南区120100 120113北辰区120100 120114武清区120100 120115宝坻区120100 120116滨海新区120100 120117宁河区120100 120118静海区120100 120119蓟州区120100 130000河北省130100石家庄市130000 130101市辖区130100 130102长安区130100 130104桥西区130100 130105新华区130100 130107井陉矿区130100 130108裕华区130100 130109藁城区130100 130110鹿泉区130100130111栾城区130100 130121井陉县130100 130123正定县130100 130125行唐县130100 130126灵寿县130100 130127高邑县130100 130128深泽县130100 130129赞皇县130100 130130无极县130100 130131平山县130100 130132元氏县130100 130133赵县130100 130183晋州市130100 130184新乐市130100 130200唐山市130000 130201市辖区130200 130202路南区130200 130203路北区130200 130204古冶区130200 130205开平区130200 130207丰南区130200 130208丰润区130200 130209曹妃甸区130200 130223滦县130200 130224滦南县130200130225乐亭县130200 130227迁西县130200 130229玉田县130200 130281遵化市130200 130283迁安市130200 130300秦皇岛市130000 130301市辖区130300 130302海港区130300 130303山海关区130300 130304北戴河区130300 130306抚宁区130300 130321青龙满族自治县130300 130322昌黎县130300 130324卢龙县130300 130400邯郸市130000 130401市辖区130400 130402邯山区130400 130403丛台区130400 130404复兴区130400 130406峰峰矿区130400 130421邯郸县130400 130423临漳县130400130424成安县130400 130425大名县130400 130426涉县130400 130427磁县130400 130428肥乡县130400 130429永年县130400 130430邱县130400 130431鸡泽县130400 130432广平县130400 130433馆陶县130400 130434魏县130400 130435曲周县130400 130481武安市130400 130500邢台市130000 130501市辖区130500 130502桥东区130500 130503桥西区130500 130521邢台县130500 130522临城县130500 130523内丘县130500 130524柏乡县130500 130525隆尧县130500 130526任县130500 130527南和县130500 130528宁晋县130500 130529巨鹿县130500 130530新河县130500 130531广宗县130500 130532平乡县130500 130533威县130500 130534清河县130500 130535临西县130500 130581南宫市130500 130582沙河市130500 130600保定市130000 130601市辖区130600 130602竞秀区130600 130606莲池区130600 130607满城区130600 130608清苑区130600 130609徐水区130600 130623涞水县130600 130624阜平县130600 130626定兴县130600 130627唐县130600 130628高阳县130600 130629容城县130600130630涞源县130600 130631望都县130600 130632安新县130600 130633易县130600 130634曲阳县130600 130635蠡县130600 130636顺平县130600 130637博野县130600 130638雄县130600 130681涿州市130600 130683安国市130600 130684高碑店市130600 130700张家口市130000 130701市辖区130700 130702桥东区130700 130703桥西区130700 130705宣化区130700 130706下花园区130700 130708万全区130700 130709崇礼区130700 130722张北县130700 130723康保县130700 130724沽源县130700 130725尚义县130700 130726蔚县130700 130727阳原县130700 130728怀安县130700 130730怀来县130700 130731涿鹿县130700 130732赤城县130700 130800承德市130000 130801市辖区130800 130802双桥区130800 130803双滦区130800 130804鹰手营子矿区130800 130821承德县130800 130822兴隆县130800 130823平泉县130800 130824滦平县130800 130825隆化县130800 130826丰宁满族自治县130800 130827宽城满族自治县130800 130828围场满族蒙古族自治县130800 130900沧州市130000 130901市辖区130900 130902新华区130900 130903运河区130900130921沧县130900 130922青县130900 130923东光县130900 130924海兴县130900 130925盐山县130900 130926肃宁县130900 130927南皮县130900 130928吴桥县130900 130929献县130900 130930孟村回族自治县130900 130981泊头市130900 130982任丘市130900 130983黄骅市130900 130984河间市130900 131000廊坊市130000 131001市辖区131000 131002安次区131000 131003广阳区131000 131022固安县131000 131023永清县131000 131024香河县131000 131025大城县131000 131026文安县131000 131028大厂回族自治县131000 131081霸州市131000 131082三河市131000 131100衡水市130000 131101市辖区131100 131102桃城区131100 131103冀州区131100 131121枣强县131100 131122武邑县131100 131123武强县131100 131124饶阳县131100 131125安平县131100 131126故城县131100 131127景县131100 131128阜城县131100 131182深州市131100 139000省直辖县级行政区划130000 139001定州市139000 139002辛集市139000 140000山西省140100太原市140000 140101市辖区140100 140105小店区140100 140106迎泽区140100140107杏花岭区140100 140108尖草坪区140100 140109万柏林区140100 140110晋源区140100 140121清徐县140100 140122阳曲县140100 140123娄烦县140100 140181古交市140100 140200大同市140000 140201市辖区140200 140202城区140200 140203矿区140200 140211南郊区140200 140212新荣区140200 140221阳高县140200 140222天镇县140200 140223广灵县140200 140224灵丘县140200 140225浑源县140200 140226左云县140200 140227大同县140200 140300阳泉市140000 140301市辖区140300 140302城区140300 140303矿区140300 140311郊区140300 140321平定县140300 140322盂县140300 140400长治市140000 140401市辖区140400 140402城区140400 140411郊区140400 140421长治县140400 140423襄垣县140400 140424屯留县140400 140425平顺县140400 140426黎城县140400 140427壶关县140400 140428长子县140400 140429武乡县140400 140430沁县140400 140431沁源县140400 140481潞城市140400 140500晋城市140000 140501市辖区140500 140502城区140500 140521沁水县140500140522阳城县140500 140524陵川县140500 140525泽州县140500 140581高平市140500 140600朔州市140000 140601市辖区140600 140602朔城区140600 140603平鲁区140600 140621山阴县140600 140622应县140600 140623右玉县140600 140624怀仁县140600 140700晋中市140000 140701市辖区140700 140702榆次区140700 140721榆社县140700 140722左权县140700 140723和顺县140700 140724昔阳县140700 140725寿阳县140700 140726太谷县140700 140727祁县140700 140728平遥县140700 140729灵石县140700 140781介休市140700 140800运城市140000 140801市辖区140800 140802盐湖区140800 140821临猗县140800 140822万荣县140800 140823闻喜县140800 140824稷山县140800 140825新绛县140800 140826绛县140800 140827垣曲县140800 140828夏县140800 140829平陆县140800 140830芮城县140800 140881永济市140800 140882河津市140800 140900忻州市140000 140901市辖区140900 140902忻府区140900 140921定襄县140900 140922五台县140900 140923代县140900 140924繁峙县140900 140925宁武县140900 140926静乐县140900 140927神池县140900 140928五寨县140900 140929岢岚县140900 140930河曲县140900 140931保德县140900 140932偏关县140900 140981原平市140900 141000临汾市140000 141001市辖区141000 141002尧都区141000 141021曲沃县141000 141022翼城县141000 141023襄汾县141000 141024洪洞县141000 141025古县141000 141026安泽县141000 141027浮山县141000 141028吉县141000 141029乡宁县141000 141030大宁县141000 141031隰县141000 141032永和县141000 141033蒲县141000 141034汾西县141000 141081侯马市141000 141082霍州市141000 141100吕梁市140000 141101市辖区141100 141102离石区141100 141121文水县141100 141122交城县141100 141123兴县141100 141124临县141100 141125柳林县141100 141126石楼县141100 141127岚县141100 141128方山县141100 141129中阳县141100 141130交口县141100 141181孝义市141100 141182汾阳市141100 150000内蒙古自治区150100呼和浩特市150000 150101市辖区150100 150102新城区150100150103回民区150100 150104玉泉区150100 150105赛罕区150100 150121土默特左旗150100 150122托克托县150100 150123和林格尔县150100 150124清水河县150100 150125武川县150100 150200包头市150000 150201市辖区150200 150202东河区150200 150203昆都仑区150200 150204青山区150200 150205石拐区150200 150206白云鄂博矿区150200 150207九原区150200 150221土默特右旗150200 150222固阳县150200 150223达尔罕茂明安联合旗150200 150300乌海市150000 150301市辖区150300 150302海勃湾区150300 150303海南区150300 150304乌达区150300 150400赤峰市150000 150401市辖区150400 150402红山区150400 150403元宝山区150400 150404松山区150400 150421阿鲁科尔沁旗150400 150422巴林左旗150400 150423巴林右旗150400 150424林西县150400 150425克什克腾旗150400 150426翁牛特旗150400 150428喀喇沁旗150400 150429宁城县150400 150430敖汉旗150400 150500通辽市150000 150501市辖区150500 150502科尔沁区150500 150521科尔沁左翼中旗150500 150522科尔沁左翼后旗150500 150523开鲁县150500 150524库伦旗150500 150525奈曼旗150500 150526扎鲁特旗150500150581霍林郭勒市150500 150600鄂尔多斯市150000 150601市辖区150600 150602东胜区150600 150603康巴什区150600 150621达拉特旗150600 150622准格尔旗150600 150623鄂托克前旗150600 150624鄂托克旗150600 150625杭锦旗150600 150626乌审旗150600 150627伊金霍洛旗150600 150700呼伦贝尔市150000 150701市辖区150700 150702海拉尔区150700 150703扎赉诺尔区150700 150721阿荣旗150700 150722莫力达瓦达斡尔族自治旗150700 150723鄂伦春自治旗150700 150724鄂温克族自治旗150700 150725陈巴尔虎旗150700 150726新巴尔虎左旗150700 150727新巴尔虎右旗150700 150781满洲里市150700 150782牙克石市150700 150783扎兰屯市150700 150784额尔古纳市150700 150785根河市150700 150800巴彦淖尔市150000 150801市辖区150800 150802临河区150800 150821五原县150800 150822磴口县150800 150823乌拉特前旗150800 150824乌拉特中旗150800 150825乌拉特后旗150800 150826杭锦后旗150800 150900乌兰察布市150000 150901市辖区150900 150902集宁区150900 150921卓资县150900 150922化德县150900150923商都县150900 150924兴和县150900 150925凉城县150900 150926察哈尔右翼前旗150900 150927察哈尔右翼中旗150900150928察哈尔右翼后旗150900 150929四子王旗150900 150981丰镇市150900 152200兴安盟150000 152201乌兰浩特市152200 152202阿尔山市152200 152221科尔沁右翼前旗152200 152222科尔沁右翼中旗152200 152223扎赉特旗152200 152224突泉县152200 152500锡林郭勒盟150000 152501二连浩特市152500 152502锡林浩特市152500 152522阿巴嘎旗152500 152523苏尼特左旗152500 152524苏尼特右旗152500 152525东乌珠穆沁旗152500 152526西乌珠穆沁旗152500 152527太仆寺旗152500 152528镶黄旗152500 152529正镶白旗152500 152530正蓝旗152500 152531多伦县152500 152900阿拉善盟150000 152921阿拉善左旗152900 152922阿拉善右旗152900 152923额济纳旗152900 210000辽宁省210100沈阳市210000 210101市辖区210100 210102和平区210100 210103沈河区210100 210104大东区210100 210105皇姑区210100 210106铁西区210100 210111苏家屯区210100 210112浑南区210100 210113沈北新区210100 210114于洪区210100 210115辽中区210100 210123康平县210100 210124法库县210100 210181新民市210100 210200大连市210000 210201市辖区210200 210202中山区210200 210203西岗区210200 210204沙河口区210200 210211甘井子区210200 210212旅顺口区210200 210213金州区210200 210214普兰店区210200 210224长海县210200 210281瓦房店市210200 210283庄河市210200 210300鞍山市210000 210301市辖区210300 210302铁东区210300 210303铁西区210300 210304立山区210300 210311千山区210300 210321台安县210300 210323岫岩满族自治县210300 210381海城市210300 210400抚顺市210000 210401市辖区210400 210402新抚区210400 210403东洲区210400 210404望花区210400 210411顺城区210400 210421抚顺县210400 210422新宾满族自治县210400 210423清原满族自治县210400 210500本溪市210000 210501市辖区210500 210502平山区210500 210503溪湖区210500 210504明山区210500 210505南芬区210500 210521本溪满族自治县210500 210522桓仁满族自治县210500 210600丹东市210000 210601市辖区210600 210602元宝区210600 210603振兴区210600 210604振安区210600 210624宽甸满族自治县210600 210681东港市210600 210682凤城市210600 210700锦州市210000 210701市辖区210700 210702古塔区210700 210703凌河区210700 210711太和区210700 210726黑山县210700 210727义县210700 210781凌海市210700 210782北镇市210700 210800营口市210000 210801市辖区210800 210802站前区210800 210803西市区210800 210804鲅鱼圈区210800 210811老边区210800 210881盖州市210800 210882大石桥市210800 210900阜新市210000 210901市辖区210900 210902海州区210900 210903新邱区210900 210904太平区210900 210905清河门区210900 210911细河区210900 210921阜新蒙古族自治县210900 210922彰武县210900 211000辽阳市210000 211001市辖区211000 211002白塔区211000 211003文圣区211000 211004宏伟区211000 211005弓长岭区211000 211011太子河区211000 211021辽阳县211000 211081灯塔市211000 211100盘锦市210000 211101市辖区211100 211102双台子区211100 211103兴隆台区211100 211104大洼区211100 211122盘山县211100 211200铁岭市210000 211201市辖区211200 211202银州区211200 211204清河区211200 211221铁岭县211200 211223西丰县211200 211224昌图县211200 211281调兵山市211200 211282开原市211200 211300朝阳市210000 211301市辖区211300211302双塔区211300 211303龙城区211300 211321朝阳县211300 211322建平县211300 211324喀喇沁左翼蒙古族自治县211300 211381北票市211300 211382凌源市211300 211400葫芦岛市210000 211401市辖区211400 211402连山区211400 211403龙港区211400 211404南票区211400 211421绥中县211400 211422建昌县211400 211481兴城市211400 220000吉林省220100长春市220000 220101市辖区220100 220102南关区220100 220103宽城区220100 220104朝阳区220100 220105二道区220100 220106绿园区220100 220112双阳区220100 220113九台区220100 220122农安县220100 220182榆树市220100 220183德惠市220100 220200吉林市220000 220201市辖区220200 220202昌邑区220200 220203龙潭区220200 220204船营区220200 220211丰满区220200 220221永吉县220200 220281蛟河市220200 220282桦甸市220200 220283舒兰市220200 220284磐石市220200 220300四平市220000 220301市辖区220300 220302铁西区220300 220303铁东区220300 220322梨树县220300 220323伊通满族自治县220300 220381公主岭市220300 220382双辽市220300220400辽源市220000 220401市辖区220400 220402龙山区220400 220403西安区220400 220421东丰县220400 220422东辽县220400 220500通化市220000 220501市辖区220500 220502东昌区220500 220503二道江区220500 220521通化县220500 220523辉南县220500 220524柳河县220500 220581梅河口市220500 220582集安市220500 220600白山市220000 220601市辖区220600 220602浑江区220600 220605江源区220600 220621抚松县220600 220622靖宇县220600 220623长白朝鲜族自治县220600 220681临江市220600 220700松原市220000 220701市辖区220700 220702宁江区220700 220721前郭尔罗斯蒙古族自治县220700 220722长岭县220700 220723乾安县220700 220781扶余市220700 220800白城市220000 220801市辖区220800 220802洮北区220800 220821镇赉县220800 220822通榆县220800 220881洮南市220800 220882大安市220800 222400延边朝鲜族自治州222401延吉市222400 222402图们市222400 222403敦化市222400 222404珲春市222400 222405龙井市222400 222406和龙市222400 222424汪清县222400 222426安图县222400 230000黑龙江省230100哈尔滨市230000 230101市辖区230100 230102道里区230100 230103南岗区230100 230104道外区230100 230108平房区230100 230109松北区230100 230110香坊区230100 230111呼兰区230100 230112阿城区230100 230113双城区230100 230123依兰县230100 230124方正县230100 230125宾县230100 230126巴彦县230100 230127木兰县230100 230128通河县230100 230129延寿县230100 230183尚志市230100 230184五常市230100 230200齐齐哈尔市230000 230201市辖区230200 230202龙沙区230200 230203建华区230200 230204铁锋区230200 230205昂昂溪区230200 230206富拉尔基区230200 230207碾子山区230200 230208梅里斯达斡尔族区230200 230221龙江县230200 230223依安县230200 230224泰来县230200 230225甘南县230200 230227富裕县230200 230229克山县230200 230230克东县230200 230231拜泉县230200 230281讷河市230200 230300鸡西市230000 230301市辖区230300 230302鸡冠区230300 230303恒山区230300 230304滴道区230300 230305梨树区230300 230306城子河区230300 230307麻山区230300 230321鸡东县230300230381虎林市230300 230382密山市230300 230400鹤岗市230000 230401市辖区230400 230402向阳区230400 230403工农区230400 230404南山区230400 230405兴安区230400 230406东山区230400 230407兴山区230400 230421萝北县230400 230422绥滨县230400 230500双鸭山市230000 230501市辖区230500 230502尖山区230500 230503岭东区230500 230505四方台区230500 230506宝山区230500 230521集贤县230500 230522友谊县230500 230523宝清县230500 230524饶河县230500 230600大庆市230000 230601市辖区230600 230602萨尔图区230600 230603龙凤区230600 230604让胡路区230600 230605红岗区230600 230606大同区230600 230621肇州县230600 230622肇源县230600 230623林甸县230600 230624杜尔伯特蒙古族自治县230600 230700伊春市230000 230701市辖区230700 230702伊春区230700 230703南岔区230700 230704友好区230700 230705西林区230700 230706翠峦区230700 230707新青区230700 230708美溪区230700 230709金山屯区230700 230710五营区230700 230711乌马河区230700 230712汤旺河区230700 230713带岭区230700230714乌伊岭区230700 230715红星区230700 230716上甘岭区230700 230722嘉荫县230700 230781铁力市230700 230800佳木斯市230000 230801市辖区230800 230803向阳区230800 230804前进区230800 230805东风区230800 230811郊区230800 230822桦南县230800 230826桦川县230800 230828汤原县230800 230881同江市230800 230882富锦市230800 230883抚远市230800 230900七台河市230000 230901市辖区230900 230902新兴区230900 230903桃山区230900 230904茄子河区230900 230921勃利县230900 231000牡丹江市230000 231001市辖区231000 231002东安区231000 231003阳明区231000 231004爱民区231000 231005西安区231000 231025林口县231000 231081绥芬河市231000 231083海林市231000 231084宁安市231000 231085穆棱市231000 231086东宁市231000 231100黑河市230000 231101市辖区231100 231102爱辉区231100 231121嫩江县231100 231123逊克县231100 231124孙吴县231100 231181北安市231100 231182五大连池市231100 231200绥化市230000 231201市辖区231200 231202北林区231200 231221望奎县231200231222兰西县231200 231223青冈县231200 231224庆安县231200 231225明水县231200 231226绥棱县231200 231281安达市231200 231282肇东市231200 231283海伦市231200 232700大兴安岭地区230000 232721呼玛县232700 232722塔河县232700 232723漠河县232700 310000上海市310100市辖区310000 310101黄浦区310100 310104徐汇区310100 310105长宁区310100 310106静安区310100 310107普陀区310100 310109虹口区310100 310110杨浦区310100 310112闵行区310100 310113宝山区310100 310114嘉定区310100 310115浦东新区310100 310116金山区310100 310117松江区310100 310118青浦区310100 310120奉贤区310100 310151崇明区310100 320000江苏省320100南京市320000 320101市辖区320100 320102玄武区320100 320104秦淮区320100 320105建邺区320100 320106鼓楼区320100 320111浦口区320100 320113栖霞区320100 320114雨花台区320100 320115江宁区320100 320116六合区320100 320117溧水区320100 320118高淳区320100 320200无锡市320000 320201市辖区320200 320205锡山区320200。
【百度地图API】如何获取行政区域的边界?
【百度地图API】如何获取⾏政区域的边界?摘要:以前教过⼤家如何⾃⾏获取⾏政区域,或者⾃定义获取⼀个区域的边界值。
今天来教⼤家直接调⽤百度地图API1.3(⽬前最新版本)来获取⾏政区域的边界值。
--------------------------------------------------------------------------------------⼀、建⽴地图创建地图对象;设⽴中⼼点。
var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);⼆、添加地图事件和控件控件:鱼⾻控件我⽤了迷你型的;地图事件:添加了滚轮缩放。
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));map.enableScrollWheelZoom();三、获取⾏政区域构造函数Boundary;get⽅法,获取⾏政区域的边界。
rs是获取到的结果。
var bdary = new BMap.Boundary();bdary.get(name, function(rs){ //获取⾏政区域//这⾥是⽤户⾃⼰的函数。
});四、添加覆盖物获取到边界的点数组后,添加⼀个多边形覆盖物。
var count = rs.boundaries.length; //⾏政区域的点有多少个for(var i = 0; i < count; i++){var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建⽴多边形覆盖物map.addOverlay(ply); //添加覆盖物}五、调整视野points为⼀系列点的数组,系统⾃动展⽰points⾥所有点。
高德获取经纬度与对应地区(思路:先获取经纬度---再通过经纬度获取地址)
⾼德获取经纬度与对应地区(思路:先获取经纬度---再通过经纬度获取地址)<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>浏览器定位</title><link rel="stylesheet" href="/lbs/static/main1119.css" /><script type="text/javascript" src="/maps?v=1.4.3&key=f1a56185c42312bf72bedd22e2f901c1"></script><script type="text/javascript" src="/lbs/static/addToolbar.js"></script><script src="~/Scripts/jquery-1.8.2.js"></script><body><div id='container'></div><div id="tip"></div><script type="text/javascript">/***************************************由于Chrome、IOS10等已不再⽀持⾮安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
获取范围经纬度的方法
获取范围经纬度的方法
获取范围经纬度的方法:
1. 利用地理编码技术:利用各种地图的经纬度可以用地理编码技术得到指定经纬度的范围。
2. 使用GPS设备:在室外使用GPS设备可以直接获取某一区域的经纬度范围。
3. 利用电子地图:通过电子地图也可以获取某一特定区域的经纬度范围,不过精度较低。
4. 计算范围:通过计算把一个给定的点或者指定的线,投影出指定的范围,来获取该范围的经纬度范围。
5. 通过开放的API:开放的API可以直接请求或者接受指定范围的经纬度数据,这样就可以直接获取范围,直接指定半径长度等,节省了比较多的时间。
6. 利用软件:直接利用专业的辅助软件可以很容易得到指定区域的经纬度范围,这也是最快捷的方式。
高德地图API使用手册
高德地图API使用手册现如今,随着科技的发展和移动互联网的流行,人们越来越依赖地图进行出行导航、生活周边搜索等方面。
而高德地图作为国内领先的移动地图导航,其API应用已经成为众多企业和开发者不可或缺的技术支持。
本篇文章将针对高德地图API的使用手册进行详细介绍,包括开发环境搭建、API 功能介绍、接口使用注意事项等方面。
一、开发环境搭建1.官方开发文档在开始使用高德地图API之前,首先需要参照高德官方的开发文档进行环境搭建和申请API秘钥。
高德官方提供的开发文档中包括了API的调用方式、参数说明、返回结果等信息,可以有效地帮助开发者快速掌握API应用。
2.秘钥申请在申请高德地图API秘钥时,需要提供调用API的应用包名、SHA1值等信息。
因此,在进行秘钥申请前,需要进行相应的开发环境搭建,包括AndroidStudio、Java SDK等软件的安装与设置。
如果开发者使用的是高德地图SDK,可以直接将秘钥添加到Manifest中进行调用。
二、API功能介绍1.地理编码地理编码是将地球表面的地址描述转换成经纬度坐标的过程。
高德地图API提供的地理编码服务,可以根据用户提供的地址信息,返回对应的经纬度坐标。
2.逆地理编码逆地理编码是将经纬度坐标转换成对应的地址信息的过程。
高德地图API 提供的逆地理编码服务,可以通过提供的经纬度坐标,返回对应的地址信息。
3.路径规划路径规划是指根据出发点和目的地,通过综合考虑多种交通工具(包括步行、公交、驾车等),计算出最优化的出行路线。
高德地图API提供的路径规划服务,可以根据出发点和目的地,以及出行方式(步行、公交、驾车等)等信息,返回最优化的出行路线。
4.POI搜索POI即“Point of Interest”,即兴趣点,是指特定地点的信息,例如商店、公园、医院等。
高德地图API提供的POI搜索服务,可以根据关键词、城市等信息,返回对应地点的POI信息。
5.天气查询天气查询是指根据城市名称、经纬度等信息,查询指定地点的天气状况。
提取行政区边界经纬度坐标(高德+百度)
提取⾏政区边界经纬度坐标(⾼德+百度)前⾔近来由于⼯作需要,需要提取某些城市的经纬度坐标,稍微搜索了⼀下,发现百度地图和⾼德地图都提供了相关的函数和例⼦.那么剩余的⼯作也就⽐较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配.主要问题和解决⽅法本地保存⽂件跨浏览器⽀持由于安全的原因,JavaScript本地保存⽂件的⽅式通常都只有IE⽀持的ActiveXObject/Open⽅法,每次都要提⽰不安全和允许运⾏,⾮常⿇烦.好在其他浏览器⽬前都⽀持<a>标签实现⽂件下载的⽅法.经测试最新的Google Chrome, Mozilla Firefox,百度浏览器,360浏览器下都可以运⾏.不说废话,直接上代码:function Download() {// IEif(/msie/i.test(erAgent)) {var w = window.open("", "导出", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");var filename = document.getElementById("filename").value ;var content = document.getElementById("content").value;w.document.charset = "UTF-8";w.document.write(content);w.document.execCommand("SaveAs", false, filename+'.txt');w.close();}// Firefox/Chrome/Safari/Operaelse {var filename = document.getElementById("filename").value ;var content = document.getElementById("content").value;str = encodeURIComponent(content);document.getElementById("SaveChrome").download = filename+'.txt';var aLink = document.getElementById("SaveChrome") ;aLink.href = "data:text/csv;charset=utf-8,"+str;aLink.click();}}跨浏览器保存⽂件经纬度转换这个话题感兴趣的朋友可以⾃⼰搜索⽕星坐标相关转换,精度在1m范围的⽹上提供有服务可以免费使⽤.⾃写程序经验证精度在6m 以内.百度地图⽅法关键函数是 BMap.Boundary() ⽣成的类,调⽤它的⽅法get就可以通过名称获得县或市级以上的⾏政区域.function getBoundary() {var bdary = new BMap.Boundary();var name = document.getElementById("districtName").value;bdary.get(name, function (rs) { //获取⾏政区域var fileName = "";var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);map.clearOverlays(); //清除地图覆盖物var count = rs.boundaries.length; //⾏政区域的点有多少个for (var i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建⽴多边形覆盖物map.addOverlay(ply); //添加覆盖物map.setViewport(ply.getPath()); //调整视野}newFileObject.write(rs.boundaries[0]);newFileObject.Close();});}百度提取⽅法⾼德地图关键代码通过阅读⽰例⽂件可以发现在下拉列表返回⾥⾯有边界值的出现.amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查询⾏政区划列表并⽣成相应的下拉列表var me = this;if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三级时查询边界点this._district.setExtensions('all');} else {this._district.setExtensions('base');}this._district.setLevel(adcodeLevel); //⾏政区级别this._district.search(keyword, function(status, result) {//注意,api返回的格式不统⼀,在下⾯⽤三个条件分别处理var districtData = result.districtList[0];if (districtData.districtList) {me.createSelectList(selectId, districtData.districtList);} else if (districtData.districts) {me.createSelectList(selectId, districtData.districts);} else {document.getElementById(selectId).innerHTML = '';}map.setCenter(districtData.center);me.clearMap();me.addPolygon(districtData.boundaries);⾼德提取⽅法其中的districtData.boundaries 就是我们需要的.调试了⼀下,⼤胆猜测果然是实现了Tostring() ⽅法的⼀个对象."104.639106,26.863388,104.644771,26.861842,104.64767,26.854997,104.647748..." 很明显的就是我们需要的gcj坐标.总结⾄此,基本也就没有什么问题了,剩余的⼯作就是解析得到的⽂件.需要提取全国的数据也就是循环读取全国城市列表⽂件了.(通常搜索cityname,电脑⾥⾯都会找到的,原因,呵呵,猜测是迅雷,QQ之类的IP定位需要吧.)重要的⼀点,推荐使⽤⾼德地图,原因就是百度地图得到的⾏政规划有问题,不包含县级市.最典型的就是贵州省,很多地市都是分离的,是带岛或洞的复杂多边形.百度在这⾥完败.关于怎么处理这⾥复杂的多边形以⽀持在MapWinGIS显⽰和处理,下次会写⼀篇笔记.。
记录拾取地图点,各行政区域,交通轨迹经纬度工具的使用说明
记录拾取地图点,各⾏政区域,交通轨迹经纬度⼯具的使⽤说明是⼀个很好的⼯具,可以实时获取点坐标,中国各⾏政区域经纬度坐标,各交通线路(公交,轻轨,地铁)经纬度坐标,直接复制粘贴便可以使⽤。
获取到的经纬度信息在前端⼆维、三维地图可视化中应⽤很⽅便。
点坐标经纬度点坐标经纬度的获取有两种⽅式。
第⼀种是通过在点坐标搜索输⼊框中输⼊关键字搜索,在搜索出的结果列表中选择合适的搜索结果,点击搜索结果便会将该点在地图中标记出来,并且⽣成⼀个轨迹,展⽰在右侧的轨迹列表中,点击轨迹列表中的详情便可查看点坐标的具体经纬度信息。
第⼆种是通过右上⾓⼯具栏中的画点⼯具。
⿏标点击⼯具栏中的画点⼯具,然后在需要获取经纬度信息的地图位置点击⿏标左键,弹出的弹窗中会显⽰该坐标点的经纬度信息,在弹窗中的输⼊框中输⼊该点的名称,点击确认便可以将该点在地图上标记,相应的该点的经纬度坐标也会添加到轨迹列表中。
⾏政区域(省、市、区、县)经纬度⾏政区域经纬度的获取通过在⾏政区域输⼊框中输⼊想要查询区域的名称进⾏搜索,点击搜索结果便可将对应的区域在地图上标记,并且将该经纬度轨迹添加到轨迹列表中。
交通轨迹(公交线路,轻轨线路,地铁线路)经纬度交通轨迹的经纬度获取的前提是需要获取该交通线路的起始地址/终⽌地址的经纬度信息,分别添加到交通轨迹搜索的起始位置经纬度和终⽌位置经纬度输⼊框中,获取起始位置/终⽌位置经纬度⽅法参考点坐标经纬度获取。
点击搜索出来的列表可将该交通轨迹在地图上展⽰,并将该经纬度添加到轨迹列表中。
轨迹配置轨迹配置包含地图⽪肤,轨迹线条宽度,轨迹线条颜⾊,轨迹线条模式,区块填充颜⾊五部分。
点击页⾯上边中⼼位置的按钮便可打开轨迹配置⾯板。
轨迹信息的获取添加的点坐标,⾏政区域轨迹,交通轨迹都会在右侧轨迹列表中展⽰,如果想查看和获取轨迹信息到本地,可以直接点击具体某个轨迹的详情按钮,在弹窗中查看,如果需要获取到本地则直接复制粘贴到相应位置即可。
python行政区域地址标准化:业务经理填报的地址乱起八糟,高德接口有点厉害!
python⾏政区域地址标准化:业务经理填报的地址乱起⼋糟,⾼德接⼝有点厉害!需求:由于业务检查需求,需要将⼀个结构化地址,如”XX省XX市XX区XXX号“地区转化为对应国家统计区⾏政划分的省、市、区(县)、镇(街道)、乡结构。
解决思路:1、⾃⾏编制⽂本解析⽅法,考虑⽐较复杂,很多情况不能覆盖,暂时不考虑,如果能解析,则速度会⽐较快。
2、通过爬⾍,在百度搜索“百度百科” + 业务地址,通过分析第⼀个页⾯中的地址信息,但是可能会出现很多不⼀样的信息,分析起来有⼀定难度。
但是优点是可以⽆限制爬取。
3、依靠⾼德API接⼝【地理编码、逆地理编码】,个⼈开发者明天拥有30万免费使⽤额度,对于⼀般⽽⾔已经⾜够,速度还快。
基于当前业务量⼤⼩,决定使⽤思路3。
前期准备:依赖库:requests、lxml、pandas1、阅读⾼德API接⼝参数,得出可以使⽤“地址名”来进⾏地理编码得到经纬度,再使⽤逆地理编码,通过经纬度得到“省、市、区(县)、镇(街道)”信息。
特殊情况:部分地址⼗分不规则的话,需要增加默认搜索地址。
2、爬取统计⽤区划和城乡划分代码:,以如下形式储存。
主要考虑⾼德【逆地理编码】API没有到乡级,如果有就不要爬取国家统计局信息了。
最后通过所在街道下的城乡信息,与机构地址匹配找出相应的最后⼀级信息。
3、学习xpath解析⽅法,使⽤lxml库。
⾼德API返回内容是xml形式。
具体实现:1、pandas打开excel⽂件,主要⽤加上dtype=object参数,保持数据原来的属性,不然⼀些数值型⽂本会被加载为数值。
file_name = 'data/address2test.xls'df = pd.read_excel(file_name,dtype=object)city_bk = '惠州市'# 构造请求req_geo_url = ''req_geo_s = 'https:///v3/geocode/geo?address='req_geo_e = '&output=XML&key=2a8d3af7ce489cb7e219d7df54d92678'req_regeo_url = ''req_regeo_s = 'https:///v3/geocode/regeo?output=xml&location='req_regeo_e = '&key=2a8d3af7ce489cb7e219d7df54d92678&radius=1000&extensions=all'headers = {'User-Agent':'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Media Center PC 6.0)',}list_err_url = [] # 存储错误的url# 对标题进⾏重新排序,默认取第⼀个列为地址,并追加后续列,如果已经有,则会保存。
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
最全vue的vue-amap使⽤⾼德地图插件画多边形范围的⽰例代码⼀、在vue-cli的框架下的main.js(或者main.ts)中引⼊⾼德插件,代码如下:import Vue from 'vue'import VueAMap from 'vue-amap'import ElementUI from 'element-ui'import App from './App.vue'import router from './router'import store from './store'import './registerServiceWorker'e(VueAMap)e(ElementUI)VueAMap.initAMapApiLoader({// ⾼德的keykey: '你的⾼德key',// 插件集合plugin: ['AMap.Autocomplete','AMap.PlaceSearch','AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PolyEditor','AMap.CircleEditor','AMap.Geocoder','AMap.Geolocation'],// ⾼德 sdk 版本,默认为 1.4.4v: '1.4.10'})Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)}).$mount('#app')强烈推荐的第三种画多边形的效果图: ***隐藏的彩蛋哦***图⾥的 “请输⼊经纬度” ,可以输⼊⼀堆的经纬度坐标,在按“Enter” ,可以直接形成多边形;(注意:输⼊的格式要和上⾯显⽰的坐标全部选中Ctrl+c下来的格式⼀样) 如:106.628788 , 29.718379106.631187 , 29.718143106.632383 , 29.716281106.628819 , 29.717013⼆、第⼀种画化:使⽤Geolocation画多边形(效果是在地图点了,才会形成多边形)// 新增编辑查看<template><div class="point"><el-header></el-header><div class="action-bar"><el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData"><el-form-item label label-width="220" prop="location"><el-input:disabled="!ifFalg"class="name-input"clearablev-model="formData.location"placeholder="名称"maxlength="30"></el-input></el-form-item><el-form-item label prop="longitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="formData.longitude"placeholder="经度 "></el-input></el-form-item><el-form-item label prop="latitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="titude"placeholder="纬度"></el-input></el-form-item><el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button> <el-button class="my-button" size="small" @click="close">关闭</el-button></el-form></div><div class="map-box"><div class="map-tool"><div v-if="ifFalg"><el-checkbox v-model="enterType">地图上描点</el-checkbox></div><!-- <el-checkbox @change="checkbox" v-model="enterType">地图上描点</el-checkbox> --><div class="longlat"><ul><li v-for="(item, index) in lnglatpoints" :key="index">{{item.longitude}} , {{titude}}<iv-if="ifFalg"class="el-icon-close"@click="deletes(item)"></i></li></ul><el-inputv-if="ifFalg"class="my-input"size="small"clearablev-model="lngLat"@keyup.enter.native="submitEnter"placeholder="请输⼊经纬度"></el-input><el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button></div></div><div class="map" id="map"><el-amapref="map"bubble:plugin="plugin":zoom="map.zoom":center="map.center":events="events"id="amap"><el-amap-polygon:events="plugin.events":path="path":draggable="draggable"fillColor="#2b83f9"fillOpacity="0.5"strokeWeight="0"strokeColor="#2b83f9"strokeOpacity="0.5"></el-amap-polygon><!-- <el-amap-marker :position="marker.position" :events="plugin.events"></el-amap-marker> --><el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker> </el-amap></div></div></div></template><script lang="ts">import * as api from '@/utils/api/index'import { Component, Vue } from 'vue-property-decorator'import eHeader from '@/components/header.vue'import { constants } from 'http2'import * as util from '@/utils/util.ts'const testLongitude = (rule: any, value: string, callback: Function) => {if (util.regExp.longitudeRegExp.test(value)) {return callback()} else {return callback(new Error('请输⼊正确的经度'))}}const testLatitude = (rule: any, value: string, callback: Function) => {if (titudeRegExp.test(value)) {return callback()} else {return callback(new Error('请输⼊正确的纬度'))}}@Component({components: {'el-header': eHeader}})export default class point extends Vue {private breadcrumbId = 0private id = ''private lngLat = ''private ifFalg = trueprivate map = {zoom: 15,center: [106.55073, 29.56471]}private path: any = []private draggable = falseprivate lnglatpoints: any = []private enterType = false // 录⼊坐标 | 地图上描点private cities = []private formData = {location: '',longitude: '',latitude: ''}plugin = {pName: 'Geolocation',events: {}}events = {}private test = 1private rules = {location: [{ required: true, message: '请输⼊接送点名称', trigger: 'blur' } ],longitude: [{ validator: testLongitude, trigger: 'blur' }],latitude: [{ validator: testLatitude, trigger: 'blur' }]}mounted() {this.id = this.$route.params.idthis.breadcrumbId = Number(this.$route.query.breadcrumbId) if (this.breadcrumbId === 2) {this.ifFalg = false}if (this.id !== '-1') {this.details()}// this.city()let _this: any = this// 地图点击事件_this.events = {click: (e: any) => {if (this.enterType) {this.path = []console.log(e.lnglat)let lnglat = e.lnglatthis.lnglatpoints.push({latitude: t,longitude: lnglat.lng})console.log(this.lnglatpoints)this.lnglatpoints.map((val: any, index: number) => {console.log(index)if (index === 0) {this.map.center = [val.longitude, titude]}let arr = [val.longitude, titude]this.path.push(arr)})// this.setFitView()}}}// 多边形点击事件_this.plugin.events = {click: (e: any) => {if (this.enterType) {this.path = []console.log(e.lnglat)let lnglat = e.lnglatthis.lnglatpoints.push({latitude: t,longitude: lnglat.lng})console.log(this.lnglatpoints)this.lnglatpoints.map((val: any, index: number) => {console.log(index)if (index === 0) {this.map.center = [val.longitude, titude]}let arr = [val.longitude, titude]this.path.push(arr)})// this.setFitView()}}}}// 获取接送范围集合details() {const loading = this.$loading({lock: true,text: '加载中...'})api.main.boss_line_point__get({ params: {param: this.id}}).then((res: any) => { if (res.data.success) {const response = res.data.datathis.formData = responselet points = res.data.data.pointsif (points != null) {for (let i = 0; i < points.length; i++) {points[i].id = i}this.lnglatpoints = pointsthis.lnglatpoints.map((val: any, index: number) => {if (index === 0) {this.map.center = [val.longitude, titude]}let arr = [val.longitude, titude]this.path.push(arr)})} else {this.map.center = [Number(this.formData.longitude),Number(titude)]bel.content = this.formData.location}setTimeout(this.setFitView, 0)} else {this.$message.error(res.data.message)}loading.close()})}// 移除经纬度deletes(data: any) {let e: any = thisthis.path = []for (let i = 0; i < e.lnglatpoints.length; i++) {if (titude === e.lnglatpoints[i].latitude &&data.longitude === e.lnglatpoints[i].longitude) {e.lnglatpoints.splice(i, 1)}}console.log(e.path)this.lnglatpoints.map((val: any, index: number) => {let arr = [val.longitude, titude]this.path.push(arr)if (index === 0) {this.map.center = [val.longitude, titude]}console.log(this.path)})}clear() {this.$confirm('确认删除绘制的接送区域?', '删除', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let self: any = thisthis.path = []this.lnglatpoints = []// this.map.center = [106.5507300000, 29.5647100000]this.lngLat = ''self.formData.points = []}).catch(() => {})}// 输⼊经纬度submitEnter() {// eslint-disable-next-lineconst illegalRegExp = /^(\D|\d*\.?\d*,*\s)|[^\d\s,\.]|^\d*\.?\d*$|(,\.|\.,)+|(\d*\.*\d*,){2,}|(\d*\.){2,}|(\d*\s){2,}|(\s\d*\.?\d*|\D)$/g const replaceWhiteSpaceRegExp = /(?<=(,|\.|\s))\s+|\s+(?=(,|\.))|^\s|\s+$/gthis.lngLat = this.lngLat.replace(replaceWhiteSpaceRegExp, '')if (illegalRegExp.test(this.lngLat)) {return this.$message.error('经纬度格式错误!')}const lnglatArray = this.lngLat.split(' ')lnglatArray.forEach(lnglatString => {const lnglatObject = {longitude: lnglatString.split(',')[0],latitude: lnglatString.split(',')[1]}this.lnglatpoints.push(lnglatObject)})this.path = []this.lnglatpoints.map((val: any, index: number) => {let arr = [val.longitude, titude]this.path.push(arr)this.lngLat = ''if (index === 0) {this.map.center = [val.longitude, titude]}})}setFitView() {const vm: any = thislet map = vm.$refs.map.$$getInstance()map.setFitView()}close() {this.$router.push({name: 'pointList'})}save() {let e: any = thislet params: any = {}if (this.id !== '-1') {// 编辑e.formData.id = this.idparams.id = this.id}e.formData.points = this.lnglatpointsif (e.formData.location === '' || e.formData.location === null) {this.$message.warning('名称不能为空!')return}if (this.lnglatpoints.length < 3 && e.formData.type === 2) {this.$message.warning('经纬度不能⼩于三组!')return}params.points = this.lnglatpointsparams.location = this.formData.locationparams.longitude = this.formData.longitudetitude = titudeif (this.id !== '-1') {api.main.boss_line_point_update_post({ data: params }).then((res: any) => { if (res.data.success) {this.$message.success('保存成功!')this.$router.push({name: 'pointList'})} else {this.$message.error(res.data.message)}})} else {api.main.boss_line_point_addAndBindLine_post({ data: params }).then((res: any) => {if (res.data.success) {this.$message.success('保存成功!')this.$router.push({name: 'pointList'})} else {this.$message.error(res.data.message)}})}}}</script><style lang="scss" scoped>ul,li {list-style: none;margin: 0;padding: 0;}.inline-form {display: flex;display: -webkit-flex;flex-direction: row;flex-wrap: wrap;.el-form-item {margin-bottom: 10px;margin-left: 15px;display: flex;}.el-button {margin-left: 15px;height: 32px;}}.action-bar {box-sizing: border-box;padding: 10px;padding-bottom: 0;border: {top: 1px solid #ddd;bottom: 1px solid #ddd;}.my-input {width: 150px;}.name-input {width: 260px;}}.el-select-dropdown__item {background-color: white;text-indent: 10px;}.claer {margin-top: 15px;float: right;}$map_height: calc(100vh - 55px - 50px - 75px - 15px); .map-box {position: relative;height: $map_height;.map-tool {position: absolute;width: 220px;z-index: 170;top: 0;left: 0;max-height: 100%;box-sizing: border-box;padding: 10px;overflow-y: auto;background-color: #fff;box-shadow: 2px 4px 7px 1px #dedede;}.map {transition: all 0.6s;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}}.swiper-box {position: relative;z-index: 161;display: flex;align-items: center;flex-direction: row;justify-content: center;width: 100%;transition: transform ease-in 0.6s;transform: translateX(0);white-space: nowrap;.swiper-item {width: 100%;height: $map_height;}}.hide-text-area {transform: translateX(-100%);}.gray-map {filter: grayscale(90%);}.longlat {margin-top: 15px;padding-bottom: 15px;ul {li {padding: 6px;background-color: #ddd;border-radius: 4px;margin-bottom: 15px;font-size: 14px;color: #666;position: relative;}}}.el-icon-close {display: inline-block;position: absolute;right: 10px;color: #000 !important;cursor: pointer;}.my-button {margin-bottom: 10px;}</style>三、第⼆种画化:使⽤AMap.MouseTool画多边形(效果是:多边形随⿏标左键点击,多边形直接跟着变化)// 新增编辑查看<template><div class="point"><el-header></el-header><div class="action-bar"><el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData"><el-form-item label prop="location"><el-input:disabled="!ifFalg"class="name-input"clearablev-model="formData.location"placeholder="名称"maxlength="30"></el-input></el-form-item><el-form-item label prop="longitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="formData.longitude"placeholder="经度 "></el-input></el-form-item><el-form-item label prop="latitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="titude"placeholder="纬度"></el-input></el-form-item><el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button><el-button class="my-button" size="small" @click="close">关闭</el-button></el-form></div><div class="map-box"><div class="map-tool"><div v-if="ifFalg"><el-checkbox >地图上描点</el-checkbox></div><div class="longlat"><ul><li v-for="(item, index) in lnglatpoints" :key="index">{{item.longitude}} , {{titude}}<iv-if="ifFalg"class="el-icon-close"@click="deletes(item)"></i></li></ul><br><div><span >输⼊范围经纬度:</span><el-inputtype="textarea"autosizeplaceholder="请输⼊内容"v-model="lnglatpointsString"></el-input></div><el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">确定</el-button><el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button></div></div><div class="map" id="map"><el-amapref="map"bubble:zoom="map.zoom":center="map.center":events="mapEvents"id="amap"><el-amap-polygon:events="plugin.events":path="path"fillColor="#2b83f9"fillOpacity="0.5"strokeWeight="0"strokeColor="#2b83f9"strokeOpacity="0.5"></el-amap-polygon><el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker></el-amap></div><div class="my-tools"><el-row><el-button type="primary" v-if="ifFalg" @click="drawPolygon()">⿏标绘制</el-button><el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</el-button></el-row></div></div></div></template><script lang="ts">同上/*** 绘制多边形*/private drawPolygon () {let vm: any = thislet map = vm.$refs.map.$$getInstance()map.plugin(['AMap.MouseTool'], function () {var mouseTool = new AMap.MouseTool(map)var drawPolygon = mouseTool.polygon()AMap.event.addListener(mouseTool, 'draw', function (e: any) {e.obj.Je.visible = falselet path = e.obj.getPath()vm.drawPolygonsToMap(path)path.forEach((point:any) => {vm.lnglatpoints.push({latitude: t,longitude: point.lng})});// vm.mapDates =path// e.obj.hide()mouseTool.close()})})}同上}</script><style lang="scss" scoped>和上⾯⼀样</style> 注意哦:1、以为这种画多边形,先需要3个点来确定初始的多边形,所以添加了⼀个功能:搜索(功能:点击搜索名称的经纬度;); 2、然后我再 ‘范围绘制' 的⽅法⾥根据“搜索”得来的经纬度,⼿动的弄了3个经纬度数组。
vue-amap geolocationcallback方法 -回复
vue-amap geolocationcallback方法-回复题目:Vue.amap.geolocationCallback方法详解及应用案例引言:随着移动互联网的快速发展,地理位置信息已经成为许多应用中不可或缺的一部分。
为了满足开发者对地理位置信息的需求,高德地图推出了Vue.amap.geolocationCallback方法。
本文将一步一步详细介绍这个方法的使用及应用案例。
第一节:Vue.amap.geolocationCallback方法简介1.1 Vue.amap.geolocationCallback方法是什么?Vue.amap.geolocationCallback方法是高德地图提供的一种获取地理位置信息的方法。
通过该方法,我们可以获取当前设备的地理位置坐标,并将其用于应用程序的开发中。
1.2 Vue.amap.geolocationCallback方法的特点- 简单易用:该方法提供了简洁明了的接口,不需要复杂的配置过程即可获取地理位置信息。
- 高精度定位:该方法利用了高德地图的底层定位技术,能够提供更高精度的定位结果。
- 兼容性强:该方法适用于各种移动设备和浏览器,无论是安卓还是iOS,无论是手机还是平板电脑,都可以正常使用。
- 异步回调:该方法采用异步回调机制,通过回调函数来获取定位结果,可以保证不阻塞主线程的正常运行。
第二节:Vue.amap.geolocationCallback方法的使用步骤2.1 引入高德地图JavaScript API在项目的HTML文件中,先引入高德地图JavaScript API的脚本文件,以提供相关的功能支持。
可以直接从高德地图官网下载最新版本的API文件,或者使用CDN方式引入。
2.2 创建Vue组件在Vue的组件中,通过Vue.amap.geolocationCallback方法来获取地理位置信息。
可以在页面中的mounted函数中调用该方法,以便在组件初始化后立即获取。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>行政区划边界</title>
<link rel="stylesheet" type="text/css"
href="/Public/css/demo.Default.css" />
<script language="javascript"
src="/maps?v=1.3&key=7de8697669288fc848e 12a08f58d995e"></script>
<script language="javascript">
var mapObj,district;
/*
*初始化地图对象,加载地图
*/
function mapInit(){
mapObj = new AMap.Map("iCenter",{
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地图中心点
zoom:10 //地图显示的缩放级别
})});
initPolygon();
}
function initPolygon(){
//加载云图层插件
mapObj.plugin('AMap.DistrictSearch', function () {
var opts = {
subdistrict: 0, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level:'city'//查询行政级别为市
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//查询成功时的回调函数,定义如何展示请求返回结果
AMap.event.addListener(district, 'complete', function(e){
var bounds = e.districtList[0].boundaries;
var polygons = [];
var arr = [];
if(bounds){
for(var i =0, l = bounds.length;i < l; i++){
//生成行政区划polygon
var polygon = new AMap.Polygon({
map:mapObj,
strokeWeight:1,
path:bounds[i],
fillOpacity:0.7,
fillColor:'#CCF3FF',
strokeColor:'#CC66CC'
});
polygons.push(polygon);
}
mapObj.setFitView();//地图自适应
}
for(var i=0;i<bounds.length;i++){
var lnglatArr = polygons[i].getPath();
for(var j=0;j<lnglatArr.length;j++){
arr.push(lnglatArr[j].toString());
}
}
document.getElementById("info").innerText = arr.join(";");
arr = [];//释放数组
});
});
}
/*
*叠加云数据图层
*/
function drawPolygon() {
var level = document.getElementById("level").value;
var name = document.getElementById("district").value;
var isClear =
document.getElementById("isClear").value;
if(district == ""){
alert("请输入行政区名称!");
return false;
}
if(isClear == 1){
mapObj.clearMap();//清除地图覆盖物
}
district.setLevel(level);//行政区查询 district
district.search(name); //行政区查询
}
</script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div style="height: 80px;width:1000px;">
<table style="width:100%;height:100%;" align="center"> <tr height="40px">
<td width="15%" align="right">选择行政区级别:</td>
<td width="35%">
<select id="level">
<option value="country">国家</option>
<option value="province">省/直辖市</option>
<option value="city" selected="selected">市</option>
<option value="district">区/县</option>
<option value="biz_area">商圈</option>
</select>
</td>
<td width="50%" rowspan="4" align="center"
height="160px">
<textarea id="info" rows="3"
style="width:100%;height:100%;padding: 2px 0px 0px 5px; font-size: 12px; color: red; overflow-y: auto"></textarea>
</td>
</tr>
<tr height="40px">
<td align="right">行政区名称:</td>
<td><input type="text" name="district"
id="district"/></td>
</tr>
<tr height="40px">
<td align="right">是否清除覆盖物:</td>
<td><select id="isClear">
<option value="1" selected="selected">是
</option>
<option value="0">否</option>
</select>
</td>
</tr>
<tr height="40px">
<td colspan="2" align="center"><input type="button" value="绘制" onclick="drawPolygon()"/></td>
</tr>
</table>
</div>
</body>
</html>。