JAVA学习笔记_AMAP_拖拽选址及地理信息显示
2017-08-26 16:16
471 查看
JS-API;http://lbs.amap.com/api/javascript-api/summary/
实现效果:
官网申请 key值,项目中引入UI组件库
js部分代码:
实现效果:
官网申请 key值,项目中引入UI组件库
js部分代码:
//先获取到当前地址 var address = document.getElementById('address1').value; AMap.plugin('AMap.Geocoder',function(){ var geocoder = new AMap.Geocoder({ }); // 通过地址得到经纬度 geocoder.getLocation(address,function(status,result){ if(status=='complete' && result.geocodes.length){ console.log(result.geocodes[0].location); var lng = result.geocodes[0].location.lng; var lat = result.geocodes[0].location.lat; console.log(lng + "," +lat); // 调用拖拽事件 getPositionPicker(lng, lat); } }); // 通过经纬度或取到地址 geocoder.getAddress(lnglatXY, function(status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即,result.regeocode.formattedAddress console.log(result.regeocode.formattedAddress); }else{ //获取地址失败 } }); });
function getPositionPicker(lng, lat){ AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) { console.log(lng + "," +lat+"skdgfkshfsdkfhksdfhkshfirgre"); var map = new AMap.Map('mapdiv', { center: [lng, lat],//地图中心点 zoom: 16, scrollWheel: false }) var positionPicker = new PositionPicker({ mode: 'dragMap', map: map }); positionPicker.on('success', function(positionResult) { document.getElementById('address1').value = positionResult.address; document.getElementById('address').value = positionResult.address; document.getElementById('lnglat').innerHTML = positionResult.position; document.getElementById('address').innerHTML = positionResult.address; document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction; document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad; document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI; }); positionPicker.on('fail', function(positionResult) { document.getElementById('lnglat').innerHTML = ' '; document.getElementById('address').innerHTML = '1111 '; document.getElementById('nearestJunction').innerHTML = ' '; document.getElementById('nearestRoad').innerHTML = ' '; document.getElementById('nearestPOI').innerHTML = ' '; }); var onModeChange = function(e) { positionPicker.setMode(e.target.value) } var startButton = document.getElementById('start'); var stopButton = document.getElementById('stop'); var dragMapMode = document.getElementsByName('mode')[0]; var dragMarkerMode = document.getElementsByName('mode')[1]; AMap.event.addDomListener(startButton, 'click', function() { positionPicker.start(map.getBounds().getSouthWest()) }) AMap.event.addDomListener(stopButton, 'click', function() { positionPicker.stop(); }) AMap.event.addDomListener(dragMapMode, 'change', onModeChange) AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange); positionPicker.start(); map.panBy(0, 1); map.addControl(new AMap.ToolBar({ liteStyle: true })) }); };
相关文章推荐
- Linux学习笔记——信息显示命令cat、more、less、head和tail
- PHP学习笔记 用超链接实现在本页面显示不同信息
- 学习Linux下的IP地址地理位置信息显示工具nali
- Java学习笔记3 —— Java常见错误信息
- 【Java学习笔记】显示IP
- java学习笔记---类型信息(type information)、反射机制与动态代理
- Sharepoint学习笔记—Debug&TroubleShooting--Developer Dashboard的使用(4.显示ASP.NET Tracing信息)
- Java学习笔记(七)——获取类中方法的信息,java的LinkedList
- java学习笔记(word文档备注不能正常显示,如有错误,忘不吝指正)
- Java学习笔记——显示当前日期的三种方式
- Spring MVC 学习笔记9 —— 实现简单的用户管理(4)用户登录显示局部异常信息
- (源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字 - 流星絮语 JAVA学习笔记 - CSDNBlog
- Java学习笔记(七)——获取类中方法的信息,java的LinkedList
- Java学习笔记11 —— 向方法和构造函数传递信息
- Java学习笔记 UDP协议传输信息
- Spring MVC 学习笔记10 —— 实现简单的用户管理(4.3)用户登录显示全局异常信息
- 关于svn学习笔记(如果项目中svn信息和图标不显示了,解决方法)
- java 从零开始,学习笔记之基础入门<信息的隐藏>(四)
- MySQL学习笔记——显示数据库信息
- C# 学习笔记(一) ListView控件显示数据库表信息