1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title></title>
7 <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>
8 <style>
9 #mapContainer{
10 height: 800px;
11 }
12 #keyword{
13 width: 400px;
14 }
15 </style>
16 </head>
17 <body>
18 <div id="mapContainer"></div>
19 <input id="keyword">
20 <input name='lnglat'>
21 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=f2f635dee0cfc2097ea52f68c376cae1&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
22 <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
23 <script>
24 // 地图
25 var map = new AMap.Map("mapContainer", {
26 resizeEnable: true,
27 zoom: 13, //地图显示的缩放级别
28 keyboardEnable: false
29 });
30 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], function() {
31 var geocoder = new AMap.Geocoder({
32 radius: 1000,
33 extensions: "all"
34 });
35 var geolocation = new AMap.Geolocation({
36 // 是否使用高精度定位，默认：true
37 enableHighAccuracy: true,
38 // 设置定位超时时间，默认：无穷大
39 timeout: 10000,
40 // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
41 buttonOffset: new AMap.Pixel(10, 20),
42 // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
43 zoomToAccuracy: true,
44 // 定位按钮的排放位置, RB表示右下
45 buttonPosition: 'RT'
46 })
47 var autoOptions = {
48 city: "北京", //城市，默认全国
49 input: "keyword" //使用联想输入的input的id
50 };
51 autocomplete = new AMap.Autocomplete(autoOptions);
52 var placeSearch = new AMap.PlaceSearch({
53 city: '北京',
54 map: map
55 });
56
57 AMap.event.addListener(autocomplete, "select", function(e) {
58 //TODO 针对选中的poi实现自己的功能
59 placeSearch.setCity(e.poi.adcode);
60 placeSearch.search(e.poi.name);
61 });
62
63 //为地图注册click事件获取鼠标点击出的经纬度坐标
64 var marker = [];
65 var clickEventListener = map.on('click', function(e) {
66 map.remove(marker);
67 marker = [];
68 marker = new AMap.Marker({
69 map: map,
70 position: [e.lnglat.getLng(), e.lnglat.getLat()]
71 });
72 geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function(status, result) {
73 if (status === 'complete' && result.info === 'OK') {
74 console.log(result);
75 $("#keyword").val(result.regeocode.formattedAddress);
76 $("[name=lnglat]").val(result.regeocode.pois[0].location.lng + " ， " + result.regeocode.pois[0].location.lat);
77 }
78 });
79 });
80 })
81 map.plugin('AMap.Geolocation', function() {
82 geolocation = new AMap.Geolocation({
83 enableHighAccuracy: true, //是否使用高精度定位，默认:true
84 timeout: 10000, //超过10秒后停止定位，默认：无穷大
85 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
86 zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
87 buttonPosition: 'RB'
88 });
89 map.addControl(geolocation);
90 geolocation.getCurrentPosition();
91 AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
92 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
93 //解析定位结果
94 function onComplete(data) {
95 $("#keyword").val(data.formattedAddress);
96 console.log(data);
97 }
98 //解析定位错误信息
99 function onError(data) {
100 alert("定位失败");
101 }
102 });
103 </script>
104 </body>
105 </html>
