先看效果,我做的是这样的,可以按地图位置来返回当前你点的位置(图一,二),也可以根据输入框的自动搜索(图三,四)

HTML的代码:

<div>
<input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)'/>
<div id="result1" name="result1"></div>
<div>X:<input type="text" id="lngX" name="lngX" value=""/>
<br>
Y:<input type="text" id="latY" name="latY" value=""/>
</div>
</div>
<div>
<a id='open'>地图定位</a>
</div>

JS代码:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您的Key值"></script>
<script>
var windowsArr = [];
document.getElementById('open').onclick = function() {
if (document.getElementById('mapContainer').style.display == 'none') {
document.getElementById('mapContainer').style.display = 'block';
} else {
document.getElementById('mapContainer').style.display = 'none';
}
}
var mapObj = new AMap.Map("mapContainer", {
resizeEnable: true,
view: new AMap.View2D({
resizeEnable: true,
zoom:13//地图显示的缩放级别
}),
keyboardEnable:false
}); var marker = new AMap.Marker({
map:mapObj,
bubble:true
})
var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){ document.getElementById("lngX").value=e.lnglat.getLng();
document.getElementById("latY").value=e.lnglat.getLat();
AMap.plugin('AMap.Geocoder',function() {
var geocoder = new AMap.Geocoder({
city: "010"//城市,默认:“全国”
});
geocoder.getAddress(e.lnglat,function(status,result){
if(status=='complete'){
// marker.setPosition(e.lnglat);
document.getElementById("keyword").value = result.regeocode.formattedAddress
document.getElementById("result1").innerHTML = ''
}else{
document.getElementById("result1").innerHTML = '无法获取地址'
}
})
}) });
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打开搜索结果点tip
thiss.style.background = '#CAE1FF';
}
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
thiss.style.background = "";
}
//从输入提示框中选择关键字并查询
function selectResult(index) {
if(index<0){
return;
}
if (navigator.userAgent.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 (navigator.userAgent.indexOf("MSIE") > 0) {
document.getElementById("keyword").onpropertychange = autoSearch;
}
} //输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
//清空地图上的InfoWindow和Marker
windowsArr = [];
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 #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
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&infowindow
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"http://webapi.amap.com/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 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) {
var nowPosition = mar.getPosition(),
lng_str = nowPosition.lng,
lat_str = nowPosition.lat;
infoWindow.open(mapObj, nowPosition); document.getElementById("lngX").value = lng_str;
document.getElementById("latY").value = lat_str;
};
AMap.event.addListener(mar, "mouseover", 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){
if(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){
if(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>

基本就是这样了。直接拷贝就能用。能实现我一开始说的效果。

PS:转载请注明来源。

使用高德地图JS获取当前位置和经纬度的更多相关文章

  1. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  2. HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

  3. 使用高德地图SDK获取定位信息

    使用高德地图SDK获取定位信息 第一步: 在高德官网下载SDK,如我这里需要获取定位信息,故仅下载"定位功能" 第二步: 注册成为开发者,并创建应用获取相应的key.其中,在使用A ...

  4. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  5. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  6. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  7. 高德地图 js api 使用

    使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js  <script src="http://webapi. ...

  8. Android中通过GPS或NetWork获取当前位置的经纬度

    今天在Android项目中要实现一个通过GPS或NetWork来获取当前移动终端设备的经纬度功能.要实现该功能要用到Android Framework 中的 LocationManager 类.下面我 ...

  9. 高德地图 JS API - 根据经纬度获取周边建筑地标

    像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...

随机推荐

  1. Vs code调试Dart语言

    1.下载Dart SDK,地址:Dart Windows下载 安装稳定版本,安装完看看有没有配置系统变量. 2.在VS code中安装Dart和Code Runner插件: 3.如果Dart有乱码输出 ...

  2. python执行系统命令后获取返回值的几种方式集合

    python执行系统命令后获取返回值的几种方式集合 今天小编就为大家分享一篇python执行系统命令后获取返回值的几种方式集合,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 第一种情 ...

  3. cached占比过高

    Linux手动释放缓存的方法Linux释放内存的命令:syncecho 1 > /proc/sys/vm/drop_caches drop_caches的值可以是0-3之间的数字,代表不同的含义 ...

  4. hadoop异常: java.io.EOFException: Unexpected end of input stream

    执行hadoop任务时报错: -- ::, INFO [main] org.apache.hadoop.mapred.MapTask: Processing --//app1@flume23_1000 ...

  5. php自定义错误处理函数

    function myErrorHandler($errno, $errstr, $errfile, $errline) { echo "<b>Custom error:< ...

  6. swift 第六课 scrollview xib 的使用

    现在 xib,stroyBoard 这种图形话的编辑写代码,越来越简单.以前scrollview 这样的控件不会用xib ,网上查了 好多的资料.现在把步骤逐渐的写出来, 这里顺便写个Demo ,是一 ...

  7. Django:(07)数据库

    一.ORM框架 ORM ,Object relational mapping 对象关系映射. 把类和数据库表对应,把对象和表记录对应,通过类和对象操作数据库表中的数据,而不需要编写SQL语句. Dja ...

  8. 刀塔OMG塔防1.26b单机版使用方法

    使用方法 1.确保魔兽的版本为1.26以上(低版本会报错),如果版本不对用附件中的版本转换器转一下 2.把 omg.w3x 复制到 魔兽的MAPS文件夹 WarcraftIII 游戏根目录\Maps\ ...

  9. 自助机dmv?鸡肋

    今天终于扛着懒癌去了一趟所谓的dmv自动机(dmv now kiosk),发现此机器只处理有关vehicle的三种事项,比如vehicle的new registration之类的,如果是其它事情还是得 ...

  10. 六扇门团队作业 ——《DorMi宿舍管理系统需求分析》

    团队作业 --<需求分析> 一.格式描述 这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 六扇门 这个作业的目标 通过对用户 ...