vue項目使用高德地圖的定位及關鍵字搜索功能的實例代碼(踩坑經驗)

1.首先在index.html引入高德地圖的秘鑰。如圖：

注意：如果使用關鍵字搜索功能要加上plugin=AMap.Autocomplete,AMap.PlaceSearch，否則功能無法使用，并會報錯
2. 定位功能，代碼如下：

1. const map = new AMap.Map(this.$refs.container, {
2. resizeEnable: true
3. }) // 創建Map實例
4. const options = {
5. 'showButton': true, // 是否顯示定位按鈕
6. 'buttonPosition': 'LB', // 定位按鈕的位置
7. 'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對應角落的距離
8. 'showMarker': true, // 是否顯示定位點
9. 'showCircle': true, // 是否顯示定位精度圈
10. 'circleOptions': {// 定位精度圈的樣式
11. 'strokeColor': '#0093FF',
12. 'noSelect': true,
13. 'strokeOpacity': 0.5,
14. 'strokeWeight': 1,
15. 'fillColor': '#02B0FF',
16. 'fillOpacity': 0.25
17. },
18. zoomToAccuracy: true // 定位成功后是否自動調整地圖視野到定位點
19. }
20. AMap.plugin(['AMap.Geolocation'], function() {
21. const geolocation = new AMap.Geolocation(options)
22. map.addControl(geolocation)
23. geolocation.getCurrentPosition()
24. })
25. //下面是點擊地圖時加入mark。注意：要在綁定事件前記錄this，否則在綁定的回調方法中使用this將是該事件的this
26. const _this = this
27. AMap.event.addListener(map, 'click', function(e) {
28. map.clearMap() // 清除地圖上所有添加的覆蓋物
29. new AMap.Marker({
30. position: e.lnglat,
31. map: map
32. })
33. _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
34. })

3.關鍵字搜索功能
html部分代碼（注意ref,id,class的名字要和官網保持一致，否則可能出不來想要的效果）：

1. <template>
2. <div class="map-chart">
3. <div id="container" ref="container" />
4. <div id="myPageTop">
5. <table>
6. <tr>
7. <td>
8. <label>請輸入關鍵字：</label>
9. </td>
10. </tr>
11. <tr>
12. <td>
13. <input id="tipinput">
14. </td>
15. </tr>
16. </table>
17. </div>
18. </div>
19. </template>

script代碼：

1. export default {
2. name: 'Map',
3. props: [],
4. data() {
5. return {
6. placeSearch: null
7. }
8. },
9. mounted() {
10. this.mapInit()
11. },
12. methods: {
13. mapInit() {
14. const map = new AMap.Map(this.$refs.container, {
15. resizeEnable: true
16. }) // 創建Map實例
17. const options = {
18. 'showButton': true, // 是否顯示定位按鈕
19. 'buttonPosition': 'LB', // 定位按鈕的位置
20. 'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對應角落的距離
21. 'showMarker': true, // 是否顯示定位點
22. 'showCircle': true, // 是否顯示定位精度圈
23. 'circleOptions': {// 定位精度圈的樣式
24. 'strokeColor': '#0093FF',
25. 'noSelect': true,
26. 'strokeOpacity': 0.5,
27. 'strokeWeight': 1,
28. 'fillColor': '#02B0FF',
29. 'fillOpacity': 0.25
30. },
31. zoomToAccuracy: true // 定位成功后是否自動調整地圖視野到定位點
32. }
33. //注意：要在綁定事件前記錄this，否則在綁定的回調方法中使用this將是該事件的this
34. const _this = this
35. // 輸入提示
36. const autoOptions = {
37. input: 'tipinput'
38. }
39. const auto = new AMap.Autocomplete(autoOptions)
40. this.placeSearch = new AMap.PlaceSearch({
41. map: map
42. }) // 構造地點查詢類
43. AMap.event.addListener(auto, 'select', this.select)// 注冊監聽，當選中某條記錄時會觸發
44. //點擊搜索出的mark點事件
45. AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
46. _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
47. })
48. },
49. select(e) {
50. this.placeSearch.setCity(e.poi.adcode)
51. this.placeSearch.search(e.poi.name) // 關鍵字查詢查詢
52. },
53. handleMap(o, a) {
54. this.$emit('bMapDate', o, a)
55. }
56. }
57. }
58. </script>

整體完成代碼：

1. <template>
2. <div class="map-chart">
3. <div id="container" ref="container" />
4. <div id="myPageTop">
5. <table>
6. <tr>
7. <td>
8. <label>請輸入關鍵字：</label>
9. </td>
10. </tr>
11. <tr>
12. <td>
13. <input id="tipinput">
14. </td>
15. </tr>
16. </table>
17. </div>
18. </div>
19. </template>
20.  
21. <script>
22. export default {
23. name: 'Map',
24. props: [],
25. data() {
26. return {
27. placeSearch: null
28. }
29. },
30. mounted() {
31. this.mapInit()
32. },
33. methods: {
34. mapInit() {
35. const map = new AMap.Map(this.$refs.container, {
36. resizeEnable: true
37. }) // 創建Map實例
38. const options = {
39. 'showButton': true, // 是否顯示定位按鈕
40. 'buttonPosition': 'LB', // 定位按鈕的位置
41. 'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對應角落的距離
42. 'showMarker': true, // 是否顯示定位點
43. 'showCircle': true, // 是否顯示定位精度圈
44. 'circleOptions': {// 定位精度圈的樣式
45. 'strokeColor': '#0093FF',
46. 'noSelect': true,
47. 'strokeOpacity': 0.5,
48. 'strokeWeight': 1,
49. 'fillColor': '#02B0FF',
50. 'fillOpacity': 0.25
51. },
52. zoomToAccuracy: true // 定位成功后是否自動調整地圖視野到定位點
53. }
54. AMap.plugin(['AMap.Geolocation'], function() {
55. const geolocation = new AMap.Geolocation(options)
56. map.addControl(geolocation)
57. geolocation.getCurrentPosition()
58. })
59. const _this = this
60. AMap.event.addListener(map, 'click', function(e) {
61. map.clearMap() // 清除地圖上所有添加的覆蓋物
62. new AMap.Marker({
63. position: e.lnglat,
64. map: map
65. })
66. _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
67. })
68.  
69. // 輸入提示
70. const autoOptions = {
71. input: 'tipinput'
72. }
73. const auto = new AMap.Autocomplete(autoOptions)
74. this.placeSearch = new AMap.PlaceSearch({
75. map: map
76. }) // 構造地點查詢類
77. AMap.event.addListener(auto, 'select', this.select)// 注冊監聽，當選中某條記錄時會觸發
78. AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
79. _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
80. })
81. },
82. select(e) {
83. this.placeSearch.setCity(e.poi.adcode)
84. this.placeSearch.search(e.poi.name) // 關鍵字查詢查詢
85. },
86. handleMap(o, a) {
87. this.$emit('bMapDate', o, a)
88. }
89. }
90. }
91. </script>
92.  
93. <style scoped>
94. .map-chart{
95. position: relative;
96. margin-bottom:15px;
97. width: 100%;
98. height: 400px;
99. border: 1px #dddddd solid;
100. }
101. /deep/ .amap-logo,/deep/ .amap-copyright {
102. display: none!important;
103. }
104.  
105. #container {
106. margin-bottom:15px;
107. width: 100%;
108. height: 400px;
109. border: 1px #dddddd solid;
110. z-index: 99999999;
111. }
112.  
113. .button-group {
114. position: absolute;
115. bottom: 20px;
116. right: 20px;
117. font-size: 12px;
118. padding: 10px;
119. }
120.  
121. .button-group .button {
122. height: 28px;
123. line-height: 28px;
124. background-color: #0D9BF2;
125. color: #FFF;
126. border: 0;
127. outline: none;
128. padding-left: 5px;
129. padding-right: 5px;
130. border-radius: 3px;
131. margin-bottom: 4px;
132. cursor: pointer;
133. }
134. .button-group .inputtext {
135. height: 26px;
136. line-height: 26px;
137. border: 1px;
138. outline: none;
139. padding-left: 5px;
140. padding-right: 5px;
141. border-radius: 3px;
142. margin-bottom: 4px;
143. cursor: pointer;
144. }
145. #tip {
146. background-color: #fff;
147. padding-left: 10px;
148. padding-right: 10px;
149. position: absolute;
150. font-size: 12px;
151. right: 10px;
152. top: 20px;
153. border-radius: 3px;
154. border: 1px solid #ccc;
155. line-height: 30px;
156. }
157. .amap-info-content {
158. font-size: 12px;
159. }
160. #myPageTop {
161. position: absolute;
162. top: 5px;
163. right: 10px;
164. background: #fff none repeat scroll 0 0;
165. border: 1px solid #ccc;
166. margin: 10px auto;
167. padding:6px;
168. font-family: "Microsoft Yahei", "微軟雅黑", "Pinghei";
169. font-size: 14px;
170. z-index: 99999999;
171. }
172. #myPageTop label {
173. margin: 0 20px 0 0;
174. color: #666666;
175. font-weight: normal;
176. }
177. #myPageTop input {
178. width: 170px;
179. }
180. #myPageTop .column2{
181. padding-left: 25px;
182. }
183. </style>

由于我在項目中使用了dialog,搜索出來的結果會在蒙版后面顯示，去掉scope和加/deep/、>>>都沒用，最后在index.html加樣式。代碼如下：

1. <style type="text/css">
2. .amap-sug-result {
3. z-index: 2999!important;
4. }
5. </style>

效果：

以上就是踩了無數坑總結出來的經驗。。。

到此這篇關于vue項目使用高德地圖的定位及關鍵字搜索功能的實例代碼(踩坑經驗)的文章就介紹到這了,更多相關vue 高德地圖定位搜索內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！