系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > JavaScript > 详细页面

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

时间:2020-03-07来源:电脑系统城作者:电脑系统城

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 高德地图定位搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载