1.搜尋+選擇+獲取經緯度和詳細地址

2.回顯資料並點標記

3.實現

第一步：引入資原始檔

<!--引入高德地圖JSAPI -->
<script src="//webapi.amap.com/maps?v=1.3&key=在官網申請一個key"></script>
<!--引入UI元件庫（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

根據需要引入

第二步：程式碼

 1 var map,addMarker;
 2 var geocoder;
 3 var placeSearch;
 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(new AMap.ToolBar());
14 
15             map.addControl(new AMap.Scale());
16     });
17     AMap.service('AMap.Geocoder',function(){//回撥函式
18         //例項化Geocoder
19         geocoder = new AMap.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 function mapsearch(){
53     var searchVal = $("#mymap_search").val();
54     placeSearch.search(searchVal);
55 }
56 // 回顯
57 function myMapViewLocation(){
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 function addMarker(lnglatXY) {
68     //console.log(lnglatXY);
69     marker = new AMap.Marker({
70         icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
71         position: lnglatXY
72     });
73     marker.setMap(map);
74     map.setFitView();// 執行定位
75 }
76 // 填寫地址
77 function writeAddress(lnglatXY){
78     geocoder.getAddress(lnglatXY, function(status, result) {
79         if (status === 'complete' && result.info === 'OK') {
80             geocoder_CallBack(result);
81         }
82     }); 
83 }
84 // 地址回撥
85 function geocoder_CallBack(data) {
86     var address = data.regeocode.formattedAddress; //返回地址描述
87     $("input[name=resourceAddress]").val(address);
88 }