1.搜索+选择+获取经纬度和详细地址
2.回显数据并点标记
3.实现
第一步:引入资源文件
根据需要引入
第二步:代码
1 varmap,addMarker;2 vargeocoder;3 varplaceSearch;4 $(function(){5 //加入高的地图
6 map = new AMap.Map(‘mymap‘, {7 resizeEnable: true/*,8 zoom:11,9 center: [116.397428, 39.90923]*/
10 });11 AMap.plugin([‘AMap.ToolBar‘,‘AMap.Scale‘],12 function(){13 map.addControl(newAMap.ToolBar());14
15 map.addControl(newAMap.Scale());16 });17 AMap.service(‘AMap.Geocoder‘,function(){//回调函数
18 //实例化Geocoder
19 geocoder = newAMap.Geocoder({20 city: "全国"//城市,默认:“全国”
21 });22 //TODO: 使用geocoder 对象完成相关功能
23 });24 //加载搜索列表
25 myMapViewLocation();26 AMap.service(["AMap.PlaceSearch"], function() {27 placeSearch = new AMap.PlaceSearch({ //构造地点查询类
28 pageSize: 5,29 pageIndex: 1,30 city: "全国", //城市
31 map: map,32 panel: "panel"
33 });34 });35 //为地图注册click事件获取鼠标点击出的经纬度坐标
36 var clickEventListener = map.on(‘click‘, function(e) {37 $("input[name=lon]").val(e.lnglat.lng);38 $("input[name=lat]").val(e.lnglat.lat);39 //填写地址
40 writeAddress([e.lnglat.lng,e.lnglat.lat]);41 });42 //placeSearch.search("北京");
43 $("#mymap_search").on("keydown",function(event){44 if(event = event ||window.event){45 if(event.keyCode==13){46 mapsearch();47 }48 }49 });50 });51 //地图搜索
52 functionmapsearch(){53 var searchVal = $("#mymap_search").val();54 placeSearch.search(searchVal);55 }56 //回显
57 functionmyMapViewLocation(){58 //console.log("回显坐标");
59 var mlon = $("input[name=lon]").val();60 var mlat = $("input[name=lat]").val();61 var lnglatXY =[mlon,mlat];62 if(mlon&&mlat){63 addMarker(lnglatXY);64 }65 }66 //实例化点标记
67 functionaddMarker(lnglatXY) {68 //console.log(lnglatXY);
69 marker = newAMap.Marker({70 icon: "/theme/v1.3/markers/n/mark_b.png",71 position: lnglatXY72 });73 marker.setMap(map);74 map.setFitView();//执行定位
75 }76 //填写地址
77 functionwriteAddress(lnglatXY){78 geocoder.getAddress(lnglatXY, function(status, result) {79 if (status === ‘complete‘ && result.info === ‘OK‘) {80 geocoder_CallBack(result);81 }82 });83 }84 //地址回调
85 functiongeocoder_CallBack(data) {86 var address = data.regeocode.formattedAddress; //返回地址描述
87 $("input[name=resourceAddress]").val(address);88 }
可以参考官网:/api/javascript-api/example/map/map-show 可以学到更多东西。
不断尝试,化鹏为鸟。