高德map api
利用高德地图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搜索⾃动完成输⼊提⽰⾏政。
摘要:地图服务,⼤家能想到哪些?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(Application Programming Interface)是高德地图提供的一组开发接口,为开发者提供了访问高德地图底图、定位服务、导航服务等功能的能力。
开发者可以通过调用这些接口,将地图相关的功能集成到自己的移动应用中。
二、地图显示功能在移动应用中显示地图是最基本的功能之一。
使用高德地图API,开发者可以轻松地在应用中展示地图。
首先,开发者需要在高德开放平台注册一个开发者账号,并申请一个API Key,用于在应用中验证开发者身份。
接下来,可以使用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获取经纬度,根据经纬度获取城市<!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)利⽤⾼德地图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定位

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(五)路线规划先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别?回答: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、驾车最后一公里步行在最开始一段,和最后一段步行距离的时候,可以用虚线来表示。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 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。