高德map api

合集下载

利用高德地图javascriptAPI做一个自己的地图

利用高德地图javascriptAPI做一个自己的地图

利⽤⾼德地图javascriptAPI做⼀个⾃⼰的地图 最近由于项⽬中需要制作⼀个地图,⽤来选择活动地点,我就花了两天利⽤⾼德地图的javascriptAPI⾃制了⼀个地图的demo。

在这了记录⼀下我学习的过程。

⼀、进⼊官⽹,再找到⾼德地图的开放平台,我是做前端的,所以使⽤的是。

地图的功能很多,使⽤API可以⾃⼰定制⾃⼰想要的功能。

在使⽤前需要⾃⼰申请⼀个Key,引⼊API的时候会⽤到这个key。

⼆、详细看⼀下左边的那⼀列各个⾥⾯的内容,看完了基本就知道怎么回事了,它提供的javascriptAPI其实就是⼀个接⼝,调⽤它的相应的接⼝就可以得到⾃⼰需要的数据。

⾄于怎么调⽤接⼝,⾥⾯都讲的很清楚。

三、我觉得最有⽤,上⼿最快的位置还是那个实例中⼼,⾥⾯有很多不同的例⼦。

基本能满⾜各种简单需求,我把其中的三个综合了⼀下,就实现了我想要的基本功能。

下⾯是完整的代码页⾯,复制下来保存为html就可以看到我的那个效果了。

(代码后⾯有张截图,可以看下效果)<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>输⼊提⽰后查询</title><style type="text/css">/************************* Just Reset Browser Default CSS : BEGIN ***************************/html {background-color: #fff;}body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p {margin: 0;padding: 0;font-family: "微软雅⿊";}h3 {+ font-size : 14 px;_font-size: 14px;}img {border: none;}.c {clear: both;}ul, ol, li {list-style: none;}/*清除浮动*/.clearfix:after {content: ".";visibility: hidden;display: block;height: 0;overflow: hidden;clear: both;}/* no ie mac \*/* html .clearfix {height: 1%;}/* end */* + html .clearfix {height: 1%;}body {font: 12px / 1.5em 微软雅⿊, Arial, Verdana, Helvetica, sans-serif;color: #333;}button, input, select, textarea {color: #999;}input[type="button"] {padding: 0 5px;color: #333;}.demo_box {float: left;width: 620px;height: 500px;}/* map style */#iCenter {float: left;width: 650px;height: 500px;margin-left: 5px;margin-right: 10px;border: 1px solid #F6F6F6;}#r_title {line-height: 28px;padding-left: 5px;background-color: #D1EEEE;font-weight: bold;}#result {overflow: auto;margin-bottom: 5px;/* width:661px;height: 255px;*/}/* 结果项 */#result .sub_result {font-size: 12px;/*padding:0px 0 4px 2px;*/border-bottom: 1px solid #C1FFC1;}#result .sub_result .detail {}#result .sub_result .detail h3 {color: #00A6AC;}a {color: #067EC0;text-decoration: none;}a:hover {text-decoration: underline;}.note {color: #999;}/*** layerout stylesheet ***//* 修改背景URL */div.change {background-image: url(/20110909/img/map/marker-h.png); }div.change div {background-image: url(/20110909/img/map/marker-h-l.gif); }/*** copied from demo #39 添加⾃定义点覆盖物 ***//* 定义⾃定义点样式 */.markerContentStyle {position: relative;}.markerContentStyle span {background-color: #FFFFFF;color: #FF1493;width: 120px;heigth: 80px;border: 2px solid #D8BFD8;FONT-FAMILY:华⽂⾏楷;position: absolute;top: -10px;left: 25px;white-space: nowrap -webkit-border-radius : 5 px;border-radius: 5px;}/*** copied from demo #43 添加⾃定义信息窗体 ***//* 定义⾃定义信息窗体样式 */ {position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px #B7B6B6;border-radius: 8px;background-color: rgba(255, 255, 255, 0.9);transition-duration: 0.25s;}:hover {box-shadow: 0px 0px 15px #0CF;}-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}-top img:hover {box-shadow: 0px 0px 5px #000;}-middle {font-size: 12px;padding: 10px;line-height: 21px;}-bottom {height: 0px;width: 100%;clear: both;text-align: center;}-bottom img {position: relative;z-index: 104;}input.inputTextStyle{width: 400px;height: 24px;font-size: 16px;margin: 5px;padding: 2px;input.btn{color: #000000;height: 30px;font-size: 16px;margin: 5px;padding: 2px;display:inline;}b.b_text{font-size: 16px;margin: 5px 0px 5px 10px;_padding-bottom:2px;_margin-left: 20px;_margin-bottom: 10px;*padding-bottom:2px;*margin-bottom: 10px;display:inline;*width:1;width: auto;overflow: auto;*overflow:visible;zoom:1;}/*** -------------------------***/</style></head><body><div><b class="b_text">活动地点:</b><input id="aim" class="inputTextStyle" type="text"/><input class="btn" type="button" value="在地图上选择" onclick="showMap();"/></div><div id="mapBg" style="position: absolute;display: none;"><div id="iCenter"></div><div class="demo_box"><div><b class="b_text">请输⼊搜索关键字:</b><input id="keyword" onkeyup="keydown();" class="inputTextStyle" type="text"/><div id="result1" name="result1" style="overflow: auto; width: 95%; border: 1px solid gray;display: none;"></div> </div><div id="r_title"><b>查询结果:</b></div><div id="result"></div></div></div><script language="javascript" src="/maps?v=1.3&key=608d75903d29ad471362f8c58c550daf"></script> <script language="javascript">var mapObj; //地图对象var lnglatXY; //当前对象坐标var aimAddress; //当前对象地址var geocoderMarker = undefined; //逆编码跟随⿏标移动视图var searchMarker = []; //搜索结果信息标记var windowsArr = []; //搜索结果地图信息var addressArr = []; //搜索结果地址集合function showMap(){ //显⽰地图var self = this;var mapEle = document.getElementById("mapBg");mapEle.style.display = "block";self.mapInit();}function makeSure(){ //点击确认var self = this;var aim = document.getElementById("aim");aim.value = aimAddress || "";}function mapInit() { //创建地图并绑定监听事件var self = this;mapObj = new AMap.Map("iCenter", {view: new AMap.View2D({//center:new AMap.LngLat(116.397428,39.90923),//地图中⼼点zoom: 12 //地图显⽰的缩放级别})});var listener = AMap.event.addListener(mapObj, "click", function (e) {mapObj.clearMap(); // 清楚所有覆盖物lnglatXY = e.lnglat;var listenMarker = new AMap.Marker({map: mapObj,position: e.lnglat,icon: "/images/0.png",offset: new AMap.Pixel(-10, -34)});mapObj.setCenter(lnglatXY);self.geocoder();});}function geocoder() { //通过坐标找到具体地址var MGeocoder;//加载地理编码插件mapObj.plugin(["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});//返回地理编码结果AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);//逆地理编码MGeocoder.getAddress(lnglatXY);});//加点var marker = new AMap.Marker({map: mapObj,icon: new AMap.Icon({image: "/Public/images/js/mark.png",size: new AMap.Size(58, 30),imageOffset: new AMap.Pixel(-32, -0)}),position: lnglatXY,offset: new AMap.Pixel(-5, -30)});mapObj.setFitView();function onMouseOver(e) {var coor = e.split(',');var lnglat = new AMap.LngLat(coor[0], coor[1]);if (!geocoderMarker) {geocoderMarker = new AMap.Marker({map: mapObj,icon: "/images/0.png",position: lnglat,offset: new AMap.Pixel(-10, -34)});} else {geocoderMarker.setPosition(lnglat);}mapObj.setFitView();}//回调函数function geocoder_CallBack(data) {geocoderMarker = undefined;var resultStr = "";var roadinfo = "";var poiinfo = "";var address;//返回地址描述address = data.regeocode.formattedAddress;aimAddress = address;makeSure(); //把当前地址赋值给⽂本框//返回周边道路信息roadinfo += "<table style='width:600px'>";for (var i = 0; i < data.regeocode.roads.length; i++) {var color = (i % 2 === 0 ? '#fff' : '#eee');roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路:" + data.regeocode.roads[i].name + "</td><td>⽅向:" + data.regeocode.roads[i].direction + "</td><td>距离:" + data.regeocode.roads[i].distance }roadinfo += "</table>";//返回周边兴趣点信息poiinfo += "<table style='width:600px;cursor:pointer;'>";for (var j = 0; j < data.regeocode.pois.length; j++) {var color = j % 2 === 0 ? '#fff' : '#eee';poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>兴趣点:" + data.regeocode.pois[j].name + "</td><td>类型:}poiinfo += "</table>";//返回结果拼接输出resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>:" + address + "<hr/><b>周边道路信息</b>:<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>:<br/>"document.getElementById("result").innerHTML = resultStr;}//输⼊提⽰function autoSearch() {var keywords = document.getElementById("keyword").value;var auto;//加载输⼊提⽰插件mapObj.plugin(["AMap.Autocomplete"], function() {var autoOptions = {city: "" //城市,默认全国};auto = new AMap.Autocomplete(autoOptions);//查询成功时返回查询结果if ( keywords.length > 0) {AMap.event.addListener(auto,"complete",autocomplete_CallBack);auto.search(keywords);}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);msearch.search(text); //关键字查询查询});function focus_callback() {if (erAgent.indexOf("MSIE") > 0) {document.getElementById("keyword").onpropertychange = autoSearch;}}//输出关键字查询结果的回调函数function placeSearch_CallBack(data) {//清空地图上的InfoWindow和MarkerwindowsArr = [];searchMarker = [];addressArr = [];mapObj.clearMap();var resultStr1 = "";var poiArr = data.poiList.pois;var resultCount = poiArr.length;for (var i = 0; i < resultCount; i++) {addressArr[i] = poiArr[i].location;resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onclick='autoClickMap(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0 resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";addmarker(i, poiArr[i]);}mapObj.setFitView();document.getElementById("result").innerHTML = resultStr1;document.getElementById("result").style.display = "block";}function autoClickMap(pointid, thiss){mapObj.clearMap();lnglatXY = addressArr[pointid];mapObj.setCenter(lnglatXY);geocoder();}//⿏标滑过查询结果改变背景样式,根据id打开信息窗体function openMarkerTipById1(pointid, thiss) {thiss.style.background = '#CAE1FF';windowsArr[pointid].open(mapObj, searchMarker[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);searchMarker.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 aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};AMap.event.addListener(mar, "click", aa);}//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>。

【高德地图API】从零开始学高德JSAPI(四)搜索服务——POI搜索自动完成输入提示行政。。。

【高德地图API】从零开始学高德JSAPI(四)搜索服务——POI搜索自动完成输入提示行政。。。

【⾼德地图API】从零开始学⾼德JSAPI(四)搜索服务——POI搜索⾃动完成输⼊提⽰⾏政。

摘要:地图服务,⼤家能想到哪些?POI搜素,输⼊提⽰,地址解析,公交导航,驾车导航,步⾏导航,道路查询(交叉⼝),⾏政区划等等。

如果说覆盖物Marker是地图的⾻骼,那么服务,就是地图的⽓⾎。

有个各种各样的地图服务,我们的地图应⽤才能变得有⾎有⾁,活灵活现。

第四篇拆成了⼏个要点,本篇主要讲搜索服务。

包括周边搜索,关键词搜索,范围搜索,搜索提⽰(⾃动完成,输⼊提⽰),⾏政区域,交叉路⼝,检索⾃有数据(云图)。

⽰意图1:⾃动完成,输⼊提⽰⽰意图2:云图,⾃有数据检索,A-H图标显⽰,⿇点图---------------------------------------------------------------------------------------⼀、POI搜索1、关键字查询使⽤search⽅法,传⼀个关键词参数即可。

MSearch.search('东⽅明珠'); //关键字查询完整代码://关键词查询function placeSearch1() {var MSearch;mapObj.plugin(["AMap.PlaceSearch"], function() {MSearch = new AMap.PlaceSearch({ //构造地点查询类pageSize:10,pageIndex:1,city:"021" //城市});AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果MSearch.search('东⽅明珠'); //关键字查询});}⽰意图:2、输⼊提⽰html部分:<div class="autoclass"><input type="text" id="keyword" name="keyword" value="" style="width: 95%;"/><div id="result1" class="autobox" name="result1"></div></div>JS部分:在地图初始化时,添加【⾃动完成/输⼊提⽰】插件。

移动应用开发中的高德地图API使用指南

移动应用开发中的高德地图API使用指南

移动应用开发中的高德地图API使用指南随着移动应用的普及和发展,地图应用已经成为人们日常生活的必备工具。

在移动应用开发过程中,使用高德地图API能够为应用增加定位、导航、搜索等功能,提升用户体验。

本文将为大家介绍高德地图API的使用指南,帮助开发者更加灵活和高效地使用这一强大的工具。

一、高德地图API概述高德地图API(Application Programming Interface)是高德地图提供的一组开发接口,为开发者提供了访问高德地图底图、定位服务、导航服务等功能的能力。

开发者可以通过调用这些接口,将地图相关的功能集成到自己的移动应用中。

二、地图显示功能在移动应用中显示地图是最基本的功能之一。

使用高德地图API,开发者可以轻松地在应用中展示地图。

首先,开发者需要在高德开放平台注册一个开发者账号,并申请一个API Key,用于在应用中验证开发者身份。

接下来,可以使用API提供的地图展示接口,将地图显示在应用的指定位置。

开发者可以设置地图的中心点、缩放级别、地图类型等属性,以满足不同场景下的需求。

三、地理编码和逆地理编码通过地理编码和逆地理编码,开发者可以将地理坐标与地址信息进行转换。

地理编码是将地址转换为地理坐标的过程,逆地理编码则是将地理坐标转换为地址的过程。

使用高德地图API提供的接口,开发者可以根据用户提供的详细地址,获取对应的经纬度信息,并在地图上标注出来;或者根据用户提供的经纬度信息,获取对应的地址信息,并显示在应用中。

四、定位功能定位是移动应用中常见的功能需求之一。

高德地图API提供了定位服务接口,可以帮助应用获取用户的地理位置信息。

开发者可以通过调用接口,获得用户的经纬度、精确度等信息,并在地图上定位用户的当前位置。

同时,高德地图API还提供了地理围栏功能,可以实现对指定区域进行监控和提醒,为应用增加更多的定位功能。

五、导航功能导航是许多应用中不可或缺的功能之一。

高德地图API提供了多种导航接口,可以帮助应用实现步行、驾车、公交等不同方式的导航功能。

【高德地图API】如何制作自己的旅游地图?

【高德地图API】如何制作自己的旅游地图?

【⾼德地图API】如何制作⾃⼰的旅游地图?“旅⾏的梦想并不遥远,只要⼀颗流浪四⽅的⼼。

”——唐⼈⽴。

最早认识唐⼈⽴的时候,他还是⼤⼆的学⽣。

他独⾃完成了“南京20年规划地图”。

⼏年前,他完成了⾃⼰的第⼀本著作,逃学去旅⾏《⼀个⼈⾛世界——⼤学4年200城的旅⾏》。

⽽现在,他正执⾏着他的“辞职去旅⾏”计划。

他好⼼的⽼板还多给他发了⼀个⽉的⼯资。

从南京,到台湾,从曼⾕到斯⾥兰卡……2个⽉来,唐⼈⽴⾛过太多地⽅。

是他原创的图⽚和⽂字,让我渐渐对⾃助游产⽣了兴趣,并决定记录下旅游的每⼀刻。

于是,我开始着⼿制作了这个旅⾏地图。

可能它还不够完善,但的确它能给我们带来太多的正能量。

希望有越来越多的⼈,能够⽤这种⽅式,去记录⾃⼰的旅途。

THX。

代码其实很简单,简单的地图展⽰,简单的覆盖物,简单的信息窗⼝。

然后将下⾯的代码复制到你的⽹站上,并使⽤你⾃⼰的key。

第⼀步、地图展⽰地图级别在国内建议12-18,国外建议在4-6.var mapObj;//初始化地图对象,加载地图function mapInit(){mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(121.498586,31.239637),level:17});addBuildings();}第⼆步、添加覆盖物覆盖物,就是marker,这⾥⽤的默认的覆盖物。

蓝⾊的,挺好看。

//实例化点标记function addMarker(){marker=new AMap.Marker({icon:"/images/marker_sprite.png",position:new AMap.LngLat(116.405467,39.907761)});marker.setMap(mapObj); //在地图上添加点}第三步、添加信息窗⼝信息窗⼝⽤了⾃定义信息窗⼝,因为觉得兰蓝⾊的⽐较好看。

高德地图JSAPI获取经纬度,根据经纬度获取城市

高德地图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>。

高德地图api实现地址和经纬度的转换(python)

高德地图api实现地址和经纬度的转换(python)

⾼德地图api实现地址和经纬度的转换(python)利⽤⾼德地图web服务api实现地理/逆地址编码api使⽤具体⽅法请查看官⽅⽂档1.利⽤python第三⽅库requests实现1#!/usr/bin/env python32#-*- coding:utf-8 -*-3'''4利⽤⾼德地图api实现地址和经纬度的转换5'''6import requests78def geocode(address):9 parameters = {'address': address, 'key': 'cb649a25c1f81c1451adbeca73623251'}10 base = '/v3/geocode/geo'11 response = requests.get(base, parameters)12 answer = response.json()13print(address + "的经纬度:", answer['geocodes'][0]['location'])1415if__name__=='__main__':16#address = input("请输⼊地址:")17 address = '北京市海淀区'18 geocode(address)2.基于http协议利⽤标准库http.client实现1#!/usr/bin/env python32#-*- coding:utf-8 -*-3'''4利⽤⾼德地图api实现地址和经纬度的转换5'''678import http.client9import json10from urllib.parse import quote_plus1112 base = '/v3/geocode/geo'13 key = 'cb649a25c1f81c1451adbeca73623251'1415def geocode(address):16 path = '{}?address={}&key={}'.format(base, quote_plus(address), key)17#print(path)18 connection = http.client.HTTPConnection('',80)19 connection.request('GET', path)20 rawreply = connection.getresponse().read()21#print(rawreply)22 reply = json.loads(rawreply.decode('utf-8'))23print(address + '的经纬度:',reply['geocodes'][0]['location'])2425if__name__=='__main__':26#address = input("请输⼊你的地址:")27 address = '北京市朝阳区'28 geocode(address)3.利⽤基于传输层上socket实现1#!/usr/bin/env python32#-*- coding:utf-8 -*-34import socket5from urllib.parse import quote_plus67 request_text = """\8GET /v3/geocode/geo?address={}&key=cb649a25c1f81c1451adbeca73623251 HTTP/1.1\r\n\9Host: :80\r\n\10User-Agent: search4.py\r\n\11Connection: close\r\n\12\r\n\13"""1415def geocode(address):16 sock = socket.socket()17 sock.connect(('', 80))18 request = request_text.format(quote_plus(address))19 sock.sendall(request.encode('ascii'))20 raw_reply = b''21while True:22 more = sock.recv(4096)23if not more:24break25 raw_reply += more26print(raw_reply.decode('utf-8'))2728if__name__=='__main__':29#address = input("请输⼊地址:")30 address = '北京市朝阳区'31 geocode(address)。

高德MapABC API for Android CellID定位

高德MapABC API for Android CellID定位

4
3.
3 LocationManagerProxy 方法一览
3.1 概述
常量定义不 LocationManager 一致。构造方法不原 class 丌一样,其他不原有方法诧义兼容。因 此下面丌解释诧义,请参考 Android 平台文档。
3.2 常量
public static final String GPS_PROVIDER = LocationManager.GPS_PROVIDER; //GPS 定 位提供者名称
MapABC 手机 Cell 定位 API 直接使用了类 Criteria,以及接口 LocationProvider,“重载”了 LocationManager 及 LocationProvider。应用程序通过使用 API,可以无缝的在 Cell 定位及标准的
定位方式(如 GPS)定位间切换。
注 意 使 用 Cell 定 位 的 应 用 , 需 要 添 加 权 限 ACCESS_COARSE_LOCATION。
READ_PHONE_STATE 和
2.1 Android 平台原有机制
应用程一组 Location Provider 请求戒取消位置服务 其他请求
上图中,应用程序通过 Location Manager 可以做 3 大类请求: A.得到一个戒一组 LocationProvider: 得到一组 provider 名称,根据某名称,得到某一具体 Provider 等等。 B.请求戒取消位置服务: 请求戒取消位置更新和状态更新。 C.其他类请求,如针对 GPS Provider 和 Test Provider 的与属请求。
例,然后通过此类向系统申请定位支持。 2. 定位方法有多种,每一种都封装为一个 LocationProvider 的子类,如 GPS 定位,Cell 定位,IP 定

【高德地图API】从零开始学高德JS API(五)路线规划

【高德地图API】从零开始学高德JS API(五)路线规划

【高德地图API】从零开始学高德JS API(五)路线规划先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别?回答:1、路线规划,指的是为用户提供3条路线推荐。

【高德】在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的。

导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息。

2、我们这里说的步行导航和驾车导航,严格的说,应该是路线规划。

从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据;如果是步行,过街天桥、地下通道、人行道做为搜索数据。

-------------------------------------------------------------------------------------------------------一、路线规划——驾车1、驾车路线规划有三种策略,分别是最短时间、最少费用、最短路径、规避拥堵(参考了实时交通数据,这个比较NB)。

LEAST_TIME,LEAST_FEE,LEAST_DISTANCE,REAL_TRAFFIC我们在这里采取驾车插件来做。

代码://驾车导航function driving_route() {clearMap();mapObj.plugin(["AMap.Driving"], function() {var DrivingOption = {policy: AMap.DrivingPolicy.LEAST_TIME };MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线});}示意图:2、驾车最后一公里步行在最开始一段,和最后一段步行距离的时候,可以用虚线来表示。

{售后服务}高德服务接口说明新版

{售后服务}高德服务接口说明新版

{售后服务}高德服务接口说明新版
高德地图作为国内领先的地理信息服务提供商,不仅提供了精准的地图数据和导航服务,还为用户提供了完善的售后服务。

下面将对高德地图的售后服务接口进行详细的说明。

3.技术支持API:高德地图为开发者提供了专门的技术支持API,用户可以通过该接口获取高德地图开发者平台的技术支持信息。

用户可以了解到最新的技术文档、开发指南、常见问题及解决方案等,以帮助开发者解决技术上的问题。

4.问题反馈API:用户使用高德地图产品时,遇到问题可以通过问题反馈API进行反馈。

用户可以描述问题的具体内容和出现的情况,并提供相应的截图或录像等辅助材料。

高德地图的技术人员会仔细分析用户的问题,并尽快给出解决方案或回复。

5.帮助中心API:高德地图还提供了帮助中心API,用户可以通过该接口获取到高德地图的帮助中心的相关信息。

帮助中心包括了各类教程、常见问题及解答、使用说明等,用户可以根据需要查阅相关的帮助文档,解决自己的问题。

6.售后服务投诉API:如果用户对高德地图的售后服务不满意,可以通过售后服务投诉API进行投诉。

用户可以详细描述投诉的内容和原因,高德地图将会尽快处理用户的投诉,并采取相应的措施改进售后服务。

百度、高德及Google地图API比较研究

百度、高德及Google地图API比较研究

百度、高德及Google地图API比较研究作者:向玉云高爽陈云红黄嘉成许新华来源:《软件导刊》2017年第09期摘要:随着网络日益发展及城市道路日益完善,地图服务呈现多样化趋势,地图开发产业得到长足发展,市场涌现出大量各有所长的地图API。

利用地图开发商官网提供的资料,结合实际开发经验,将百度地图API、高德地图API、Google Maps API进行了比较研究,以帮助开发者开发出更加优秀的地图导航APP或Web网页,帮助使用者按功能选择地图APP。

关键词:API;百度地图API;高德地图API;Google Maps APIDOI:10.11907/rjdk.171478中图分类号:TP301 文献标识码:A 文章编号:1672-7800(2017)009-0019-03Abstract:With the development of network and the city road is increasingly perfect, the map service began to appear its diversification, thus the development of the map industry has been promated.At the same time, a large of map APIs which have their own feature have poured into market.By consulting information provided by the official website and combining with our experience of development, the artical aims to compare Baidu map API,Google Maps API and lbs amap API with each other to help developers develop more excellent application or web which can be used to navigate.Key Words:API; Baidu map API; Lbs Amap API; Google Maps API0 引言API(Application Programming Interface)即应用程序编程接口是预先定义的函数,提供应用程序与开发人员访问例程的能力,无需访问源代码或了解内部工作机制[1]。

ANDROID高德API的使用

ANDROID高德API的使用
//个性化定制信息窗口marker对象 @Override public View getInfoWindow(final Marker marker) {……} aMap.setOnInfoWindowClickListener(new OnInfoWindowClickListener() {……}); } ---------------------------------------------分割线-------------------------------------------
// 自定义系统定位小蓝点 MyLocationStyle myLocationStyle = new MyLocationStyle(); myLocationStyle.myLocationIcon(BitmapDescriptorFactory
.fromResource(R.drawable.location_marker)); myLocationStyle.strokeColor(Color.BLUE); myLocationStyle.strokeWidth(1); aMap.setMyLocationStyle(myLocationStyle); mAMapLocManager = LocationManagerProxy.getInstance(this);
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_CONFIGURATION" /> ---------------------------------------------分割线-------------------------------------------

解析高德地图api获取省市区,生成最新三级联动sql表

解析高德地图api获取省市区,生成最新三级联动sql表

解析⾼德地图api获取省市区,⽣成最新三级联动sql表前⾔: 最近项⽬中⽤到了全国省市区三级信息,但是⽹上找到的信息都是⽐较旧的信息。

与现在最新的地区信息匹配不上。

后来想到⾼德地图上可能有这些信息。

所以解析了⼀下api接⼝,⽣成了相关省市区的sql信息。

(注意:这⾥⾯没有港台地区)具体的请参看⾼德地图⽂档。

alibaba.fastjson解析+mysql表  具体数据接⼝: 申请的key 注意:如果想调⽤此接⼝需要申请⼀个key,免费的,注册就可以获取3、java代码如下:@RequestMapping("/getAll")public Object getMasterList() throws Exception {HttpClientResult result = HttpClientUtils.doGet("https:///v3/config/district?subdistrict=4&key=⾃⼰申请的key");String jsonString = result.getContent();//数据结构如下/* String jsonString = "{\n" +" \"status\": \"1\",\n" +" \"info\": \"OK\",\n" +" \"infocode\": \"10000\",\n" +" \"count\": \"1\",\n" +" \"suggestion\": {\n" +" \"keywords\": [],\n" +" \"cities\": []\n" +" },\n" +" \"districts\": [{\n" +" \"citycode\": [],\n" +" \"adcode\": \"100000\",\n" +" \"name\": \"中华⼈民共和国\",\n" +" \"center\": \"116.3683244,39.915085\",\n" +" \"level\": \"country\",\n" +" \"districts\": [{\n" +" \"citycode\": [],\n" +" \"adcode\": \"410000\",\n" +" \"name\": \"河南省\",\n" +" \"center\": \"113.665412,34.757975\",\n" +" \"level\": \"province\",\n" +" \"districts\": [{\n" +" \"citycode\": \"0393\",\n" +" \"adcode\": \"410900\",\n" +" \"name\": \"濮阳市\",\n" +" \"center\": \"115.041299,35.768234\",\n" +" \"level\": \"city\",\n" +" \"districts\": [{\n" +" \"citycode\": \"0393\",\n" +" \"adcode\": \"410923\",\n" +" \"name\": \"南乐县\",\n" +" \"center\": \"115.204336,36.075204\",\n" +" \"level\": \"district\",\n" +" \"districts\": [{\n" +" \"citycode\": \"0393\",\n" +" \"adcode\": \"410923\",\n" +" \"name\": \"福坎镇\",\n" +" \"center\": \"115.398,36.0869\",\n" +" \"level\": \"street\",\n" +" \"districts\": []\n" +" }]\n" +" }]\n" +" }]\n" +" }]\n" +" }]\n" +"}";//result.getContent();*/JSONObject jsonObject = JSONObject.parseObject(jsonString);//获取到国家及下⾯所有的信息开始循环插⼊,这⾥可以写成递归调⽤,但是不如这样⽅便查看、理解JSONArray countryAll = jsonObject.getJSONArray("districts");for (int i = 0; i < countryAll.size(); i++) {JSONObject countryLeve0 = countryAll.getJSONObject(i);String citycode0 = countryLeve0.getString("citycode");String adcode0 = countryLeve0.getString("adcode");String name0 = countryLeve0.getString("name");String center0 = countryLeve0.getString("center");String country = countryLeve0.getString("level");int level = 0;if (country.equals("country")) {level = 0;}//插⼊国家Integer id1 = insert(0, adcode0, citycode0, name0, center0, level, name0);JSONArray province0 = countryLeve0.getJSONArray("districts");for (int j = 0; j < province0.size(); j++) {JSONObject province1 = province0.getJSONObject(j);String citycode1 = province1.getString("citycode");String adcode1 = province1.getString("adcode");String name1 = province1.getString("name");String center1 = province1.getString("center");String province = province1.getString("level");int level1 = 0;if (province.equals("province")) {level1 = 1;}//插⼊省Integer id2 = insert(id1, adcode1, citycode1, name1, center1, level1, name0, name1);JSONArray city0 = province1.getJSONArray("districts");for (int z = 0; z < city0.size(); z++) {JSONObject city2 = city0.getJSONObject(z);String citycode2 = city2.getString("citycode");String adcode2 = city2.getString("adcode");String name2 = city2.getString("name");String center2 = city2.getString("center");String city = city2.getString("level");int level2 = 0;if (city.equals("city")) {level2 = 2;}//插⼊市Integer id3 = insert(id2, adcode2, citycode2, name2, center2, level2, name0, name1, name2);JSONArray street0 = city2.getJSONArray("districts");for (int w = 0; w < street0.size(); w++) {JSONObject street3 = street0.getJSONObject(w);String citycode3 = street3.getString("citycode");String adcode3 = street3.getString("adcode");String name3 = street3.getString("name");String center3 = street3.getString("center");String street = street3.getString("level");int level3 = 0;if (street.equals("street")) {level3 = 2;}//插⼊区县insert(id3, adcode3, citycode3, name3, center3, level3, name0, name1, name2, name3);// JSONArray street = street3.getJSONArray("districts");//有需要可以继续向下遍历}}}}return getSuccessResult();}/*** 公共的插⼊⽅法** @param parentId ⽗id* @param citycode 城市编码* @param adcode 区域编码街道没有独有的adcode,均继承⽗类(区县)的adcode* @param name 城市名称(⾏政区名称)* @param center 地理坐标* @param level 等级 0 国家,1省,...依次排* @param mergeName 把名称拼接成全名* @return*/public Integer insert(Integer parentId, String citycode, String adcode, String name, String center, int level, String... mergeName) {// \"citycode\": [],\n" +// " \"adcode\": \"100000\",\n" +// " \"name\": \"中华⼈民共和国\",\n" +// " \"center\": \"116.3683244,39.915085\",\n" +// " \"level\": \"country\",\n" +RegionAmap record = new RegionAmap();if (!adcode.equals("[]")) {record.setAdcode(adcode);}record.setCitycode(Integer.parseInt(citycode));record.setCenter(center);record.setLevel(level);record.setName(name);record.setParentId(parentId);String megName = "";for (int i = 0; i < mergeName.length; i++) {megName = megName + mergeName[i];if (i < mergeName.length - 1) {megName = megName + ",";}}record.setMergerName(megName);regionAmapMapperCustom.insertSelective(record);return record.getCitycode();}/*** ⽣成的sql顺序重新排序** @return*/@RequestMapping("/order")public Object order() {RegionAmapExample example = new RegionAmapExample();example.setOrderByClause("citycode, adcode");List<RegionAmap> selectByExample = regionAmapMapperCustom.selectByExample(example);for (RegionAmap regionAmap : selectByExample) {RegionOrder record = new RegionOrder();record.setAdcode(regionAmap.getAdcode());record.setCitycode(regionAmap.getCitycode());record.setCenter(regionAmap.getCenter());record.setLevel(regionAmap.getLevel());record.setMergerName(regionAmap.getMergerName());record.setName(regionAmap.getName());record.setParentId(regionAmap.getParentId());regionOrderMapper.insertSelective(record);}return getSuccessResult();}注意:第⼀次调⽤接⼝解析的省市区不是按顺序解析,需要调⽤排序接⼝重新⽣成。

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

通过⾼德地图API获得某条道路上的所有坐标⽤于描绘道路的⽅法产品提出的⼀个需求是, 通过道路名字, 把道路描绘出来. 这功能在各⼤地图上都是可以看到的, 所以他们觉得做出来也很简单.但是百度地图本⾝是没有任何接⼝可以查询这个信息. ⽹上能找到的⽅法, ⽆⾮都是通过导航接⼝, 定义道路的起点和终点进⾏描绘. 但这种⽅法只要仔细推敲就有不妥:1. 如果道路有分岔怎么办? 每个分岔⼝都找出来然后不断调⽤导航接⼝吗?2. 如果道路是弯曲⽽不是直线怎么办? 导航⾛的是最近线路, 不⼀定会完全跟着某条路来⾛啊.所以导航的⽅法并不完美. 我希望制找到的⽅法是最简单的, 通过路名就要找到整条道路的坐标数据. 但是这谈何容易? 研究过⾼德地图的都知道, 在javascript api⾥有虽然有这个⽅法但在web api⾥就只有, 搜索出来的对象是place对象, ⾥⾯的数据并不⾜以描绘道路.那能不能调⽤javascript api的⽅法, 通过抓包看看他是怎样调⽤web api的呢? 测试代码html如下.<!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/main.css?v=1.0" rel="external nofollow" /><script type="text/javascript"src="/maps?v=1.3&key=您申请的key值"></script><style type="text/css">#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}</style></head><body><div id="mapContainer"></div><div id="panel"></div><script type="text/javascript">var map = new AMap.Map("mapContainer", {resizeEnable: true});AMap.service(["AMap.RoadInfoSearch"], function() {var roadSearch = new AMap.RoadInfoSearch({ //构造地点查询类pageSize: 5,pageIndex: 1,city: "020"});//关键字查询roadSearch.roadInfoSearchByRoadName('元岗路', function(status, result) {alert(result.roadInfo[0].path[0]);});});</script>抓包后获取到⼀条⾮常有⽤的信息, 有这么⼀条调⽤返回的信息⾥有⼀段⾮常有⽤的结果, 就是roads数组,roads:[{id: "020F49F010********", name: "元岗路", citycode: "020", width: "12", type: "次要道路(城市次⼲道)",…},…]0:{id: "020F49F010********", name: "元岗路", citycode: "020", width: "12", type: "次要道路(城市次⼲道)",…}进⼀步分析这个数组的第⼀个结果, 应该就是roadInfo对象,⾥⾯⼜存在⼀个polylines数组, 看起来⾮常像是⼀段段路的坐标列表.polylines:0:"113.3395181,23.16999083;113.3395219,23.17012167;113.3395264,23.17016972;113.3395328,23.17021472;113.3395481,23.17026139;113.3395786,23.17032556;113.3396211,23.17040139;113.33982 1:"113.3367803,23.1771625;113.3364894,23.17720583;113.3362911,23.17723556;113.3362022,23.17724806;113.3361247,23.17725278;113.3360547,23.17724611;113.3359106,23.17722222;113.335815 2:"113.3416042,23.17464861;113.3416194,23.1746825;113.3419189,23.17532083;113.3421011,23.17574861;113.3422519,23.17612111;113.3422869,23.17621917;113.3423011,23.17629222;113.342310 ...说到这⾥, 不得不提⼀下地图的道路是怎么画出来的.只要将道路放⼤, 就会发现各⼤地图都是⽤直线⼀段⼀段地把整条道路描绘出来, 所以说, 很可能这⼀段⼀段的数据就是上⾯道路信息的数组!接下来就是要验证这个想法, ⽅法就是把上⾯得到的数组上的坐标, 放到⾥验证. 经过仔细验证, 果然数组的每组坐标列表, 就是代表⼀⼩段道路!既然这样就直接使⽤上⾯那个抓出来的restapi来⽤吧, 谁知道⼀把那个url放浏览器就傻眼了, 返回了以下东西.jsonp_749020_({"status":"0","info":"INVALID_USER_DOMAIN","infocode":"10006"})看来这接⼝不能这么照搬地调⽤啊, 必须找出⾼德web api的套路. 于是⼜参考了⼀下他的是怎么使⽤的, ⽂档给出的例⼦是这样的:到此这篇关于通过⾼德地图API获得某条道路上的所有坐标⽤于描绘道路的⽅法的⽂章就介绍到这了,更多相关⾼德地图API描绘道路内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!。

js调用高德地图API获取地理信息进行定位

js调用高德地图API获取地理信息进行定位

js调⽤⾼德地图API获取地理信息进⾏定位<script type="text/javascript" src="/maps?v=1.3&key=(需要⾃⼰去⾼德官⽹获取)"></script><script type="text/javascript">var map = new AMap.Map('mapContainer', {resizeEnable: true})map.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// 是否使⽤⾼精度定位,默认:trueenableHighAccuracy: true,// 设置定位超时时间,默认:⽆穷⼤timeout: 10000,// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:falsezoomToAccuracy: true,// 定位按钮的排放位置, RB表⽰右下buttonPosition: 'RB'})// 获取当前位置信息geolocation.getCurrentPosition();// 监听获取位置信息成功的回调函数AMap.event.addListener(geolocation, 'complete', onComplete);// 监听获取位置信息错误的回调函数AMap.event.addListener(geolocation, 'error', onError);function onComplete (data) {// data是具体的定位信息addComp = data.addressComponent;// 获取信息中的省市区并放⼊到输⼊框中$("#fsenderAddress").val(addComp.province+"-"+addComp.city+"-"+addComp.district).trigger("change");$("#fsenderCountyCode").val(addComp.adcode);let fsenderMsg = {'fsenderAddress':$("#fsenderAddress").val(),'fsenderCountyCode':$("#fsenderCountyCode").val()}window.sessionStorage.setItem('fsendMsg', JSON.stringify(fsenderMsg));}function onError (error) {// 定位出错console.log(error)}})</script>。

高德地图API 城市编码对照表

高德地图API 城市编码对照表

高德地图API 城市编码对照表高德软件有限公司2013年7月·北京法律声明版权所有©2013,高德集团。

保留一切权利。

本文档包含的所有内容除特别声明之外,版权均属于高德集团所有,受《中华人民共和国著作权法》及相关法律法规和中国加入的所有知识产权方面的国际条约的保护。

未经本公司书面许可,任何单位和个人不得以任何方式(电子或机械,包括影印)翻印或转载本文档的任何部分,否则将视为侵权,高德集团保留依法追究其法律责任的权利。

高德地图API 的一切有关权利属于高德集团所有。

本文档并不代表供应商或其代理的承诺,高德集团可在不作任何申明的情况下对本文档内容进行修改。

本文档中所涉及的软件产品及其后续升级产品均由高德集团制作并负责全权销售。

本文档中提到的其它公司及其产品的商标所有权属于该商标的所有者。

高德地图高德地图API 欢迎用户的任何建议或意见。

2 | 高德软件有限公司直辖市"code":"010","city":"北京","code":"021","city":"上海","code":"022","city":"天津","code":"023","city":"重庆",安徽"code":"0551","city":"合肥","code":"0553","city":"芜湖","code":"0556","city":"安庆","code":"0552","city":"蚌埠","code":"0558","city":"亳州","code":"0565","city":"巢湖","code":"0566","city":"池州","code":"0550","city":"滁州","code":"1558","city":"阜阳","code":"0559","city":"黄山","code":"0561","city":"淮北","code":"0554","city":"淮南","code":"0564","city":"六安","code":"0555","city":"马鞍山", "code":"0557","city":"宿州",高德软件有限公司| 3"code":"0563","city":"宣城",福建"code":"0591","city":"福州","code":"0592","city":"厦门","code":"0595","city":"泉州","code":"0597","city":"龙岩","code":"0593","city":"宁德","code":"0599","city":"南平","code":"0594","city":"莆田","code":"0598","city":"三明","code":"0596","city":"漳州",甘肃"code":"0931","city":"兰州","code":"0943","city":"白银","code":"0932","city":"定西","code":"0935","city":"金昌","code":"0937","city":"酒泉","code":"0933","city":"平凉","code":"0934","city":"庆阳","code":"1935","city":"武威","code":"0938","city":"天水", 4 | 高德软件有限公司"code":"0941","city":"甘南","code":"1937","city":"嘉峪关", "code":"0930","city":"临夏","code":"2935","city":"陇南",广东"code":"020","city":"广州","code":"0755","city":"深圳","code":"0756","city":"珠海","code":"0769","city":"东莞","code":"0757","city":"佛山","code":"0752","city":"惠州","code":"0750","city":"江门","code":"0760","city":"中山","code":"0754","city":"汕头","code":"0759","city":"湛江","code":"0768","city":"潮州","code":"0762","city":"河源","code":"0663","city":"揭阳","code":"0668","city":"茂名","code":"0753","city":"梅州","code":"0763","city":"清远","code":"0751","city":"韶关",高德软件有限公司| 5"code":"0662","city":"阳江","code":"0766","city":"云浮","code":"0758","city":"肇庆",广西"code":"0771","city":"南宁","code":"0779","city":"北海","code":"0770","city":"防城港","code":"0773","city":"桂林","code":"0772","city":"柳州","code":"1771","city":"崇左","code":"1772","city":"来宾","code":"0774","city":"梧州","code":"0778","city":"河池","code":"0775","city":"玉林","code":"1755","city":"贵港","code":"1774","city":"贺州","code":"0777","city":"钦州","code":"0776","city":"百色",贵州"code":"0851","city":"贵阳","code":"0853","city":"安顺", 6 | 高德软件有限公司"code":"0858","city":"六盘水", "code":"0857","city":"毕节","code":"0855","city":"黔东南", "code":"0859","city":"黔西南", "code":"0854","city":"黔南","code":"0856","city":"铜仁",海南"code":"0898","city":"海口","code":"0899","city":"三亚","code":"0802","city":"白沙县", "code":"0801","city":"保亭县", "code":"0803","city":"昌江县", "code":"0804","city":"澄迈县", "code":"0806","city":"定安县", "code":"0807","city":"东方","code":"2802","city":"乐东县", "code":"1896","city":"临高县", "code":"0809","city":"陵水县", "code":"1894","city":"琼海","code":"1899","city":"琼中县", "code":"1892","city":"屯昌县", "code":"1898","city":"万宁",高德软件有限公司| 7"code":"1897","city":"五指山","code":"0805","city":"儋州",河北"code":"0311","city":"石家庄","code":"0312","city":"保定","code":"0314","city":"承德","code":"0310","city":"邯郸","code":"0315","city":"唐山","code":"0335","city":"秦皇岛","code":"0317","city":"沧州","code":"0318","city":"衡水","code":"0316","city":"廊坊","code":"0319","city":"邢台","code":"0313","city":"张家口",河南"code":"0371","city":"郑州","code":"0379","city":"洛阳","code":"0378","city":"开封","code":"0374","city":"许昌","code":"0372","city":"安阳","code":"0375","city":"平顶山", 8 | 高德软件有限公司"code":"0391","city":"焦作","code":"1391","city":"济源","code":"0395","city":"漯河","code":"0377","city":"南阳","code":"0393","city":"濮阳","code":"0398","city":"三门峡", "code":"0370","city":"商丘","code":"0373","city":"新乡","code":"0376","city":"信阳","code":"0396","city":"驻马店", "code":"0394","city":"周口",黑龙江"code":"0451","city":"哈尔滨", "code":"0459","city":"大庆","code":"0452","city":"齐齐哈尔", "code":"0454","city":"佳木斯", "code":"0457","city":"大兴安岭", "code":"0456","city":"黑河","code":"0468","city":"鹤岗","code":"0467","city":"鸡西","code":"0453","city":"牡丹江", "code":"0464","city":"七台河",高德软件有限公司| 9"code":"0469","city":"双鸭山","code":"0458","city":"伊春",湖北"code":"027","city":"武汉","code":"0710","city":"襄阳","code":"0719","city":"十堰","code":"0714","city":"黄石","code":"0711","city":"鄂州","code":"0718","city":"恩施","code":"0713","city":"黄冈","code":"0716","city":"荆州","code":"0724","city":"荆门","code":"0722","city":"随州","code":"0717","city":"宜昌","code":"1728","city":"天门","code":"2728","city":"潜江","code":"0728","city":"仙桃","code":"0712","city":"孝感","code":"0715","city":"咸宁","code":"1719","city":"神农架",湖南10 | 高德软件有限公司"code":"0730","city":"岳阳", "code":"0732","city":"湘潭", "code":"0736","city":"常德", "code":"0735","city":"郴州", "code":"0734","city":"衡阳", "code":"0745","city":"怀化", "code":"0738","city":"娄底", "code":"0739","city":"邵阳", "code":"0737","city":"益阳", "code":"0746","city":"永州", "code":"0733","city":"株洲", "code":"0744","city":"张家界", "code":"0743","city":"湘西", 吉林"code":"0431","city":"长春", "code":"0432","city":"吉林", "code":"1433","city":"延边", "code":"0436","city":"白城", "code":"0439","city":"白山", "code":"0437","city":"辽源", "code":"0434","city":"四平", "code":"0438","city":"松原",江苏"code":"025","city":"南京","code":"0512","city":"苏州","code":"0519","city":"常州","code":"0518","city":"连云港","code":"0523","city":"泰州","code":"0510","city":"无锡","code":"0516","city":"徐州","code":"0514","city":"扬州","code":"0511","city":"镇江","code":"0517","city":"淮安","code":"0513","city":"南通","code":"0527","city":"宿迁","code":"0515","city":"盐城",江西"code":"0791","city":"南昌","code":"0797","city":"赣州","code":"0792","city":"九江","code":"0798","city":"景德镇","code":"0796","city":"吉安","code":"0799","city":"萍乡", 12 | 高德软件有限公司"code":"0790","city":"新余", "code":"0795","city":"宜春", "code":"0701","city":"鹰潭", "code":"0794","city":"抚州",辽宁"code":"024","city":"沈阳", "code":"0411","city":"大连", "code":"0412","city":"鞍山", "code":"0415","city":"丹东", "code":"0413","city":"抚顺", "code":"0416","city":"锦州", "code":"0417","city":"营口", "code":"0414","city":"本溪", "code":"0421","city":"朝阳", "code":"0418","city":"阜新", "code":"0429","city":"葫芦岛", "code":"0419","city":"辽阳", "code":"0427","city":"盘锦", "code":"0410","city":"铁岭",内蒙古"code":"0471","city":"呼和浩特", "code":"0472","city":"包头","code":"0477","city":"鄂尔多斯","code":"0474","city":"乌兰察布","code":"0473","city":"乌海","code":"0482","city":"兴安盟","code":"0470","city":"呼伦贝尔","code":"0475","city":"通辽","code":"0483","city":"阿拉善盟","code":"0478","city":"巴彦淖尔","code":"0479","city":"锡林郭勒",宁夏"code":"0951","city":"银川","code":"0952","city":"石嘴山","code":"0954","city":"固原","code":"0953","city":"吴忠","code":"1953","city":"中卫",青海"code":"0971","city":"西宁","code":"0973","city":"黄南","code":"0976","city":"玉树","code":"0975","city":"果洛","code":"0972","city":"海东",14 | 高德软件有限公司"code":"0974","city":"海南", "code":"0970","city":"海北", 山东"code":"0531","city":"济南", "code":"0532","city":"青岛", "code":"0631","city":"威海", "code":"0535","city":"烟台", "code":"0536","city":"潍坊", "code":"0538","city":"泰安", "code":"0543","city":"滨州", "code":"0534","city":"德州", "code":"0546","city":"东营", "code":"0530","city":"菏泽", "code":"0537","city":"济宁", "code":"0635","city":"聊城", "code":"0539","city":"临沂", "code":"0634","city":"莱芜", "code":"0633","city":"日照", "code":"0533","city":"淄博", "code":"0632","city":"枣庄", 山西"code":"0351","city":"太原","code":"0352","city":"大同","code":"0356","city":"晋城","code":"0354","city":"晋中","code":"0357","city":"临汾","code":"0358","city":"吕梁","code":"0349","city":"朔州","code":"0350","city":"忻州","code":"0359","city":"运城","code":"0353","city":"阳泉",陕西"code":"029","city":"西安","code":"0915","city":"安康","code":"0917","city":"宝鸡","code":"0916","city":"汉中","code":"0914","city":"商洛","code":"0919","city":"铜川","code":"0913","city":"渭南","code":"0910","city":"咸阳","code":"0911","city":"延安","code":"0912","city":"榆林",四川16 | 高德软件有限公司"code":"0816","city":"绵阳", "code":"0832","city":"资阳", "code":"0827","city":"巴中", "code":"0838","city":"德阳", "code":"0818","city":"达州", "code":"0826","city":"广安", "code":"0839","city":"广元", "code":"0833","city":"乐山", "code":"0830","city":"泸州", "code":"1833","city":"眉山", "code":"1832","city":"内江", "code":"0817","city":"南充", "code":"0812","city":"攀枝花", "code":"0825","city":"遂宁", "code":"0831","city":"宜宾", "code":"0835","city":"雅安", "code":"0813","city":"自贡", "code:"0837","city":"阿坝", "code":"0836","city":"甘孜", "code":"0834","city":"凉山", 西藏"code":"0891","city":"拉萨","code":"0892","city":"日喀则","code":"0897","city":"阿里","code":"0895","city":"昌都","code":"0894","city":"林芝","code":"0896","city":"那曲","code":"0893","city":"山南",新疆"code":"0991","city":"乌鲁木齐","code":"0993","city":"石河子","code":"0995","city":"吐鲁番","code":"0999","city":"伊犁","code":"0997","city":"阿克苏","code":"0906","city":"阿勒泰","code":"0996","city":"巴音","code":"0909","city":"博尔塔拉","code":"0994","city":"昌吉","code":"0902","city":"哈密","code":"0903","city":"和田","code":"0998","city":"喀什","code":"0990","city":"克拉玛依","code":"0908","city":"克孜勒","code":"0901","city":"塔城",18 | 高德软件有限公司云南"code":"0871","city":"昆明", "code":"0877","city":"玉溪", "code":"0878","city":"楚雄", "code":"0872","city":"大理", "code":"0873","city":"红河", "code":"0874","city":"曲靖", "code":"0691","city":"西双版纳", "code":"0870","city":"昭通", "code":"0875","city":"保山", "code":"0692","city":"德宏", "code":"0887","city":"迪庆", "code":"0888","city":"丽江", "code":"0883","city":"临沧", "code":"0886","city":"怒江", "code":"0879","city":"普洱", "code":"0876","city":"文山",浙江"code":"0571","city":"杭州", "code":"0574","city":"宁波", "code":"0573","city":"嘉兴", "code":"0575","city":"绍兴", "code":"0577","city":"温州","code":"0580","city":"舟山","code":"0572","city":"湖州","code":"0579","city":"金华","code":"0578","city":"丽水","code":"0576","city":"台州","code":"0570","city":"衢州",特别行政区"code":"1852","city":"香港","code":"1852","city":"澳门", 20 | 高德软件有限公司。

Android Map 开发之高德地图

Android Map 开发之高德地图

Android Map 开发之高德地图如何把 API 添加到我的Android 工程中?创建工程,将从网站下载的AMap_Android_Api_Lib 文件中的MapApi.jar 包拷贝到Libs 文件夹下,Libs 下的文件目录如下所示:当MapApi.jar 在Libs 文件夹中后,就表示将高德地图Android API 库文件引入工程中了,您就可以在您的程序中使用高德地图API 了。

在manifest 中设置相应的权限下面介绍在程序开发中需注意的问题:必须在AndroidManifest.xml 中设置相应的权限,添加代码如下:<uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permi ssion><uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"></uses-permiss ion><uses-permissionandroid:name="android.permission.INTERNET"></uses-permission><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"></uses-permiss ion><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permi ssion><uses-permissionandroid:name="android.permission.READ_PHONE_STATE"></uses-permission> <uses-permissionandroid:name="android.permission.CHANGE_WIFI_STATE"></uses-permission ><uses-permissionandroid:name="android.permission.ACCESS_WIFI_STATE"></uses-permission >注意此添加权限代码与<application>同级。

【高德地图API】从零开始学高德JSAPI(三)覆盖物——标注折线多边形信息窗口聚合mar。。。

【高德地图API】从零开始学高德JSAPI(三)覆盖物——标注折线多边形信息窗口聚合mar。。。

【⾼德地图API】从零开始学⾼德JSAPI(三)覆盖物——标注折线多边形信息窗⼝聚合mar。

摘要:覆盖物,是⼀张地图的灵魂。

有覆盖物的地图,才是完整的地图。

在⼀张地图上,除了底层的底图(⽡⽚图,⽮量图),控件(有功能可操作的⼯具),最重要最不可缺少的就是覆盖物了。

覆盖物有多种,包括,标注、折线、多边形、信息窗⼝、聚合marker、⿇点图和图⽚覆盖物。

本⽂会详细介绍每⼀种覆盖物的概念,添加⽅法,修改⽅法,移除⽅法等。

最后会提供⽰例和源代码下载。

-------------------------------------------------------------------------------------------------⼀、标注marker最常见的覆盖物就是标注(marker),⽤它可以标⽰出店铺的位置,你所在的位置,连锁店的分布图等,可以把标注简单理解为1个点。

温馨有爱的⼩贴⼠:标注marker的图⽚可以是gif图,让marker“动”起来。

1、添加标注——“可爱的赵灵⼉”icon是标注的图⽚地址,想⽤什么图⽚,就把图⽚地址放在这⾥。

position是标注的位置,经纬度。

//实例化markerfunction addMarker(){marker=new AMap.Marker({icon:"zhao.gif",position:new AMap.LngLat(116.405467,39.907761)});marker.setMap(mapObj); //在地图上添加点}2、修改标注——“⼀秒钟变拓跋⽟⼉”setContent是⽤于改变⽂字说明,⽀持html5;setPosition是⽤于改变标注的位置。

marker.setContent(markerContent);//更新点标记内容marker.setPosition(new AMap.LngLat(116.391467,39.927761)); //更新点标记位置3、清除覆盖物对于制定marker,可以单独清除每⼀个覆盖物:marker.setMap(null);清除地图上全部覆盖物,⽤:mapObj.clearMap();⼆、聚合marker1、增加⼀个marker温馨⼩贴⼠:不如icon的值为空,就会调⽤⾼德默认的marker哟,也蛮漂亮的。

高德地图API,获取和设置zoom级别和中心点

高德地图API,获取和设置zoom级别和中心点

⾼德地图API,获取和设置zoom级别和中⼼点双击可以调整⾼德地图的级别zoom 改变初始地图的级别,zoom值越⾼,相当于⿏标双击放⼤,内容越详细,范围越⼩center 改变初始地图的中⼼点,是⼀个数组,包含经纬度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }</style></head><body><div id="container"></div><script>new AMap.Map("container",{zoom:12,//初始化地图级别center:[120,30]//初始化地图中⼼点});</script></body></html>getZoom() 获取级别getCenter() getCenter().toString() 获取中⼼点<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }</style></head><body><div id="container"></div><script>var map=new AMap.Map("container");console.log(map.getZoom());//获取级别console.log(map.getCenter());//获取中⼼点console.log(map.getCenter().toString());</script></body></html>on("moveend") 监听移动停⽌事件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }</style></head><body><div id="container"></div><script>var map=new AMap.Map("container");map.on("moveend",function(){console.log(map.getZoom());//获取级别console.log(map.getCenter().toString());//获取中⼼点})</script></body></html>on("zoomend") 双击结束事件,改变级别事件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }</style></head><body><div id="container"></div><script>var map=new AMap.Map("container");map.on("zoomend",function(){console.log(map.getZoom());//获取级别console.log(map.getCenter().toString());//获取中⼼点})</script></body></html>setZoom() 设置地图级别<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }</style></head><body><div id="container"></div><script>var map=new AMap.Map("container");//设置地图级别setTimeout(function(){map.setZoom(15);},3000);</script></body></html>通过事件设置zoom<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }#setZoomNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style></head><body><div id="container"></div><div id="setZoomNode"><input type="text" id="zoomVal"><button id="zoomBtn">设置zoom</button></div><script>var map=new AMap.Map("container");//设置地图级别zoomBtn.onclick=function(){map.setZoom(zoomVal.value);}</script></body></html>setCenter([ ]) 设置地图中⼼点<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }#setZoomNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style></head><body><div id="container"></div><script>var map=new AMap.Map("container");//设置地图中⼼点setTimeout(function(){map.setCenter([121.11,30]);},1000);</script></body></html>通过事件设置地图中⼼点<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }#setCenterNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style></head><body><div id="container"></div><div id="setCenterNode">x <input type="text" id="xVal"><br>y <input type="text" id="yVal"><br><button id="btn">设置中⼼点</button></div><script>var map=new AMap.Map("container");//设置地图中⼼点btn.onclick=function(){map.setCenter([xVal.value,yVal.value]);}</script></body></html>setZoomAndCenter 同时设置zoom和center<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>map</title><script type="text/javascript" src="https:///maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script><style>*{margin:0;padding:0;}#container {width:100%; height: 100%;top:0;left:0;position: absolute; }#setZoomNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;} </style></head><body><div id="container"></div><div id="setZoomNode">级别<input type="text" id="zoomVal"><br>中⼼点x <input type="text" id="xVal"><br>中⼼点y <input type="text" id="yVal"><br><button id="btn">设置中⼼点和zoom</button></div><script>var map=new AMap.Map("container");//设置地图中⼼点btn.onclick=function(){map.setZoomAndCenter(zoomVal.value,[xVal.value,yVal.value]);}</script></body></html>。

结合react-amap使用高德地图的原生API

结合react-amap使用高德地图的原生API

结合react-amap使⽤⾼德地图的原⽣API⼲货,⽆话1、react-create-app,创建新react项⽬;2、npm install react-amap,引⼊⾼德地图的封装;3、编写组件index.js:import React from "react";import ReactDOM from "react-dom";import Map from "./Map3";let mapData = {city: "北京",mapCenter:[116.418261, 39.921984], //城市定位,经纬度定位只能选择1个mapZoom: 10, //地图缩放mapKey: '12345678d98aff1166e51962f108bb24', //你的⾼德keystatus: { //是否⽀持放⼤拖拽zoomEnable: true,dragEnable: true,},mapMaker :[ //marker标记点(list){lnglat:[116.401728,39.911984],text:'要显⽰的内容1'},{lnglat:[116.436691,39.921984],text:'要显⽰的内容2'}],plugins:['ToolBar']};ReactDOM.render(<div style ={{width:"100%",height:"100%"}}><Map title="map" mapData={mapData}/></div>,document.getElementById("root")); 注意render⽅法内引⽤了Map组件,因此要编写⼀个Map3.js,提供这个组件4、编写Map3.js组件import React, { Component } from "react";import { Map, Marker } from 'react-amap';import ZoomCtrl from './zoom';class WebMap3 extends Component {constructor(props) {super(props);this.data = props;//地图事件this.amapEvents = {created: (mapInstance) => {var marker = new AMap.Marker({// 经纬度对象,也可以是经纬度构成的⼀维数组[116.39, 39.9]position: new AMap.LngLat(116.39, 39.9),title: '北京!!'});mapInstance.add(marker);}};//点位事件this.markerEvents = {click: (markerInstance) => {this.Position = [markerInstance.lnglat.lng,t];this.setState({isShow: true,});}};}render() {let {city, mapCenter, mapZoom, mapKey, status, plugins} = this.data.mapData;return (<div style ={{width:"100%",height:"95%"}}><Map amapkey={mapKey} city={city} zoom={mapZoom} center={mapCenter} status={status} plugins={plugins} events={this.amapEvents}>{this.data.mapData.mapMaker.map((comment) => (<Marker position={comment.lnglat} events={this.markerEvents}></Marker>))}<ZoomCtrl /></Map></div>);}}export default WebMap3; 注意标红部分,会报错这个是关键!有两个办法解决,分别见下⾯的5.1和5.25、解决react下找不到原⽣⾼德地图AMap类的问题5.1 ⽅法1暴⼒⼿段,直接搞定。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

AutoNavi Map API功能规格说明书最后更新时间:2010年6月9日© 2010高德软件有限公司保留版权.目录简介 (3)API概述 (3)com.autonavi.mapapi包的描述信息 (3)AutoNavi Map API特点: (3)兼容android map 接口及功能 (4)Interface (5)Interface ItemizedOverlay.OnFocusChangeListener (5)Interface Overlay.Snappable (5)Interface Projection (6)Classes (8)Class GeoPoint (8)Class ItemizedOverlay<Item extends OverlayItem> (9)Class MapActivity (15)Class MapController (18)Class MapView (21)Class youtParams (29)Class MyLocationOverlay (33)Class Overlay (39)Class OverlayItem (42)Class TrackballGestureDetector (45)Enum (47)Enum MapView.ReticleDrawMode (47)简介简介API概述AutoNavi Map API是高德软件公司提供的调用地图的接口方法。

文档中定义了14个对象类及接口。

用户的应用程序可以通过AutoNavi Map API提供的接口方法操作地图数据,实现位置相关或地图相关应用。

例如,通过调用AutoNavi Map API,将地图数据整合到自己的应用中,可以将商户的地理位置信息在地图上进行标注,以很直观的形式展现给使用者。

com.autonavi.mapapi包的描述信息本地图包可支持第三方应用显示和控制高德的地图接口功能。

要创建一个地图,需要在一个页面布局中扩展MapActivity及实现MapView类。

您必须设置"android:apiKey"才能在您的应用中使用MapView获取地图数据。

在模拟器环境中,您可以通过申请调试API秘钥,进行程序开发。

但在发布时,您必须申请签名证书的API秘钥,并替换MapView中的调试API秘钥。

AutoNavi Map API特点:1.简单:用户场景-- 新手也能做出功能强大的地图应用:小李是大学在校生,一直酷爱编写程序。

在使用android平台手机后一直想自己试做一个应用程序。

在的网站上下载了api程序包和样例代码后,很容易的就开发出了简单实用的地图应用,这让小李一直兴奋不已。

2.移植性强:用户场景--原有基于Android Map API的应用程序移植方便:如某知名跨国公司开发的一款基于Android Map的应用服务软件,在国外非常受欢迎,用户普及率很高。

想将此应用移植到中国市场进行推广,但Android Map在中国市场的不被支持。

该公司用AutoNavi Map API提供的数据包直接替换Android Map API,没有进行很复杂的代码修改,所有的接口调用甚至函数名都不需要变动,直接就可以使应用正常工作,方便移植性广受好评。

3.强大的标记点:用户场景--在地图上任意指定位置进行标记:某知名的点评网站通过调用AutoNavi Map API地图数据开发了一款提供位置服务的应用软件。

并将商户的地理信息在地图上进行标注,绘制相应的位置信息描述后,网站信息的展现更加直观了,实用功能性更强。

用户可以便捷的查询到商户所在的地理位置。

使网站的用户访问量明显提升了。

4.准确高效的定位功能:用户场景--随时随地查询定位:某知名的搜索房屋信息的网站开发了一款基于AutoNavi Map API的提供了定位功能的手机应用软件。

小李是房地产的销售,他经常要带客户去转楼盘。

在这款有定位功能应用的帮助下,他可以清晰辨别自己所处的方位,以及周边楼盘环境情况。

他总能高效的完成工作,得到客户的肯定。

兼容android map 接口及功能用户在阅读下面的文档时,可以通过各个相似功能对象的对比加深对API类方法、属性、用途的理解,从而更好地应用API类服务于自己的领域。

PART IInterfaceCHAPTER 1Interface ItemizedOverlay.OnFocusChangeListener Overview这个接口用于对item焦点变化感兴趣的监听器。

MethodonFocusChangedvoid onFocusChanged(ItemizedOverlay overlay, OverlayItem newFocus)在绘制方法中调用,所以这里除了发送消息之类的动作,不要做任何其它的动作。

Parameters:overlay - 执行这个调用的OverlaynewFocus - 新焦点选中的item, 如果没有则为nullCHAPTER 2Interface Overlay.SnappableOverviewpublic static interface Overlay.SnappableOverlay的接口定义,这个overlay包含的项目可被对齐(例如,当用户触发一个缩放时,这函数可被调用允许用户把缩放框和一个兴趣点对齐)。

MethodonSnapToItemboolean onSnapToItem(int x, int y, android.graphics.Point snapPoint, MapView mapView)检查给定的(x,y)是否和引起当前行为(如缩放)的item足够靠近。

参数:x - 屏幕的x坐标y - 屏幕的y坐标snapPoint - 存放对于给定(x,y)最近的兴趣点(屏幕坐标)。

如果没有对齐则不可触摸。

mapView - 申请对齐的MapView。

使用MapView.getProjection()在屏幕像素和经纬度之间做转换。

返回值:是否去对齐兴趣点。

CHAPTER 3Interface ProjectionOverviewpublic interface ProjectionProjection接口用于屏幕像素点坐标系统和地球表面经纬度点坐标系统之间的变换。

方法MapView.getProjection().返回一个Projection。

MethodtoPixelsandroid.graphics.Point toPixels(GeoPoint in, android.graphics.Point out)把给定的GeoPoint变换到相对于MapView左上角的屏幕像素坐标。

MapView提供了这种投影变换。

参数:in –待变换的一对经纬度out –一个用于输出预先存在的对象;如果为空,将返回一个新分配的像素点。

fromPixelsGeoPoint fromPixels(int x, int y)该方法用给定的像素坐标创建一个新的GeoPoint。

给定的像素点是以MapView的左上角为原点的坐标系统,MapView提供了这个像素转换器(PixelConverter)。

metersToEquatorPixelsfloat metersToEquatorPixels(float meters)该方法把以米为计量单位的距离(沿赤道)在当前缩放水平下转换到一个以像素(水平)为计量单位的距离。

在默认的Mercator投影变换下,对于给定的距离,当远离赤道时,变换后确切的像素数量会增加。

参数:meter –以米为单位的距离返回值:相对给定距离的像素数量。

在当前的缩放水平,如果沿赤道测量,返回值可能是个近似值。

PART IIClassesCHAPTER 1Class GeoPointOverviewpublic class GeoPoint extends ng.Object不可变类,表示一对经度和纬度值,以微度的整数形式存储.ConstructorGeoPointpublic GeoPoint(int latitudeE6, int longitudeE6)用给定的经度和纬度构造一个GeoPoint,单位微度(度* 1E6).参数:latitudeE6 - 该点的纬度. 为保持Mercator投影精确度,其取值范围是[-80,80]。

longitudeE6 - 该点的经度. 可被规范化到(-180, 180]。

GeoPoint (坐标位置偏转)public GeoPoint(double lat, double lon, MapActivity cnt)说明:用给定的屏幕的坐标值和当前创建MapView的MapActivity进行坐标位置偏转,构造一个GeoPoint.参数:lat - 该点的屏幕横坐标x.lon - 该点的屏幕纵坐标y.cnt- 当前创建MapView的MapActivity.MethodgetLatitudeE6public int getLatitudeE6()返回GeoPoint对象的纬度,单位微度(度* 1E6).返回值:纬度.getLongitudeE6public int getLongitudeE6()返回GeoPoint对象的经度,单位微度(度* 1E6).返回值:经度.toStringpublic ng.String toString()覆盖:类ng.Object中的toString方法equalspublic boolean equals(ng.Object object)覆盖:类ng.Object中equals 方法hashCodepublic int hashCode()覆盖:类ng.Object中hashCode方法CHAPTER 2Class ItemizedOverlay<Item extends OverlayItem> Overviewpublic abstract class ItemizedOverlay<Item extends OverlayItem> extends Overlay implements Overlay.SnappableItemizedOverlay是Overlay的一个基类,它包含了一个OverlayItems列表。

它处理从南到北的排序,用于绘制、创建平移边界、为每个点绘制标记点,和维护一个焦点选中的item,同时也负责把一个屏幕点击匹配到item上去,分发焦点改变事件给备选的监听器。

ConstructorItemizedOverlaypublic ItemizedOverlay(android.graphics.drawable.Drawable defaultMarker)说明:创建一个新的ItemizedOverlay。

相关文档
最新文档