高德地图之经纬度

本文把高德地图的鼠标点击获取经纬度与点标记与地理编码融合到了一起

首先要创建自己的应用,并且添加key(服务用到的JavaScript API)

先把获取经纬度的代码复制过来,进行修改取消地图的点击操作。放到marker点击效果里

var clickEventListener = map.on('click', function(e) {

document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()

});

并且在select方法里面添加地图监听

function select(e) {

AMap.event.addListener(placeSearch, "complete", keywordSearch_CallBack);//返回地点查询结果

placeSearch.setCity(e.poi.adcode);

placeSearch.search(e.poi.name);  //关键字查询查询

}

keywordSearch_CallBack这个方法用来获取marker的个数,来对marker进行修改

function keywordSearch_CallBack(data) {

var resultStr = "";

var poiArr = data.poiList.pois;

var resultCount = poiArr.length;

for (var i = 0; i < resultCount; i++) {

addmarker(i, poiArr[i]);

}

map.setFitView();

}

添加marker并且对窗体进行了修改

function addmarker(i, d) {    

var lngX = d.location.getLng();      

var latY = d.location.getLat();     

var markerOption = {          

map:map,          

icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",          

zIndex:200,       

clickable:true,        

offset:new AMap.Pixel(-10,-34),        

position:new AMap.LngLat(lngX, latY)      };             

 var mar = new AMap.Marker(markerOption);               

 marker.push(new AMap.LngLat(lngX, latY));        

var infoWindow = new AMap.InfoWindow({          

content:"<h3><font color='#00a6ac'>" + (i + 1) + ". " + d.name + "</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(map, mar.getPosition());};      

AMap.event.addListener(mar, "click", aa);      

AMap.event.addListener(mar,'click',getLnglat); }//marker点击效果

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 + "

电话:" + tel + "类型:" + type;     

 return str;  }

//鼠标在地图上点击,获取经纬度坐标

function getLnglat(e) {

document.getElementById("lngX").value = e.lnglat.getLng();

document.getElementById("latY").value = e.lnglat.getLat();

}

此时效果已经实现的差不多,就差一步,当文本框里面有经纬度的时候,在地图上显示当前位置即可

$(document).ready(function(){

if($("#lngX").val()!=""){

var lngX = $("#lngX").val();

var latY = $("#latY").val();

lnglatXY = [lngX, latY]; //已知点坐标

//逆地理编码

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

var marker = new AMap.Marker({  //加点

map: map,

position: lnglatXY

});

map.setFitView();

}

});

END

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoot...
    wangyw阅读 592评论 0 0
  • 今天回湘潭啦~在火车上。 这次来武汉这两天,出来散散心,出来找人聊聊天,挺好的一次旅行。好多事想开了,也想通了,人...
    昂昂昂昂昂呀阅读 362评论 0 0
  • 小时候很可爱,喜欢和同学在一些成语后加上语助词。记忆最深刻的:光阴似箭——嗖!嗖!嗖!时光如流水——哗啦啦啦!哗啦...
    九丑_阅读 544评论 4 5
  • “2015年11月份的时候,虎嗅上面有篇文章《只做微信公号的你,正在输掉内容创业的下半场》(作者:王记超)提到,从...
    新媒体课堂阅读 670评论 0 1
  • 今天偶然看到推送,让我注意的关键词是“滚石”,这个曾经出了大批影响我这个年纪人的歌曲,它们的旋律,也是我们青春的记...
    芮灵翾阅读 205评论 0 0