申请key

1、注册登陆 高德开放平台，申请 key

高德地图集成 - 图1

添加 Key

高德地图集成 - 图2

高德地图集成 - 图3

高德地图集成 - 图4

注意

image.png

image.png

  1. <script type="text/javascript">
  2.   window._AMapSecurityConfig = {
  3.       securityJsCode:'您申请的安全密钥',
  4.   }
  5. </script>

放在 index.html 文件里面，密钥必须比 key 先加载就行了
image.png

导入 vue-amap

安装 vue-amap

  1. npm install vue-amap --save

安装完成后，main.js 文件中引入

  1. import VueAMap from "vue-amap";
  3. VueAMap.initAMapApiLoader({
  4.   key: "KEY",
  5.   plugin: [
  6.     "AMap.Autocomplete", //输入提示插件
  7.     "AMap.PlaceSearch", //POI搜索插件
  8.     "AMap.Scale", //右下角缩略图插件 比例尺
  9.     "AMap.OverView", //地图鹰眼插件
  10.     "AMap.ToolBar", //地图工具条
  11.     "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
  12.     "AMap.PolyEditor", //编辑 折线多，边形
  13.     "AMap.CircleEditor", //圆形编辑器插件
  14.     "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  15.   ],
  16.   v: '1.4.4',
  17.   uiVersion: '1.0'
  18. });
  20. Vue.use(VueAMap);

使用

  1. <template>
  2.   <el-row>
  3.           <el-col :span="22" :offset="1" >
  4.             <div class="amap-page-container">
  5.               <el-amap-search-box  class="search-box"
  6.                                   :search-option="amap.searchOption"
  7.                                   :on-search-result="onSearchResult"
  8.                                   :center="amap.center"></el-amap-search-box>
  9.               <div style="width: 900px;height: 400px;margin-top: -35px; border: #2c3e50 solid 1px;">
  10.                 <el-amap vid="amapDemo" :zoom="amap.zoom" :center="amap.center" class="amap-demo">
  11.                   <el-amap-marker :position="amap.marker.position" :events="amap.marker.events"
  12.                                   :visible="amap.marker.visible" :draggable="amap.marker.draggable"></el-amap-marker>
  13.                 </el-amap>
  14.               </div>
  15.             </div>
  16.           </el-col>
  17.    </el-row>
  18. </template>
  19. <!-- vid = 地图容器节点的ID。
  20.  zoom = 缩放级别
  21.  center = 地图可见区域的中心点
  22.  marker = 覆盖物
  23.  visible = 显示点标记
  24.  draggable = 设置点标记是否可拖拽移动，默认为false。
  25.  -->
  26. <style>
  27.  .search-box {
  28.     position: absolute;
  29.     top: 25px;
  30.     left: 25px;
  31.   }
  32. </style>
  34. <script>
  35.   module.exports = {
  36.     name: 'amap-page',
  37.     data() {
  38.       return {
  39.         amap: {
  40.           zoom: 14,
  41.           center: [116.7833687777778, 31.89548288888889],
  42.           marker: {
  43.             position: [116.7833687777778, 31.89548288888889],
  44.             events: {
  45.               click: (e) => {
  46.                alert('click marker');
  47.                let {lng, lat} = e.lnglat;
  48.                this.amap.lng = lng;
  49.                this.amap.lat = lat;
  50.                this.amap.center = [e.lnglat.lng, e.lnglat.lat]
  51.               },
  52.               dragend: (e) => {
  53.                 console.log('---event---: dragend')
  54.                 console.log(e.lnglat.lng, e.lnglat.lat)
  55.                 this.amap.marker.position = [e.lnglat.lng, e.lnglat.lat];
  56.               }
  57.             },
  58.             visible: true,
  59.             draggable: false, // 设置点标记是否可拖拽移动，默认为false。
  60.           },
  61.           // lng: 0,
  62.           // lat: 0,
  63.           // address:'',
  64.           // q: '',
  65.           searchOption: {
  66.             city: '全国',
  67.             citylimit: true
  68.           }
  69.         },
  70.         form:{
  71.             lng:"",
  72.             lat:"",
  73.             address:""
  74.         }
  75.       };
  76.     },
  77.     methods: {
  78.       onSearchResult(pois) {
  79.         let latSum = 0
  80.         let lngSum = 0
  81.         pois.forEach(poi => {
  82.           lngSum += poi.lng
  83.           latSum += poi.lat
  84.         })
  85.         let center = {
  86.           lng: lngSum / pois.length,
  87.           lat: latSum / pois.length
  88.         }
  89.         var address = pois[0].address;
  91.         console.log(center.lng, center.lat);
  92.         this.amap.center = [center.lng, center.lat]
  93.         this.amap.marker.position = [center.lng, center.lat]
  94.         this.form.lng = center.lng;
  95.         this.form.lat = center.lat;
  96.         this.form.address = address;
  97.         console.log(this.form.address);
  98.       },
  99.     }
  100.   };
  101. </script>

效果

高德地图集成 - 图8

公交站点搜索

参考： https://blog.csdn.net/reactL/article/details/84779468

  1. <template>
  2.   <el-row>
  3.     <el-col :span="22" :offset="1" >
  4.       <div class="amap-page-container">
  5.         <el-amap-search-box  class="search-box"
  6.                              :search-option="amap.searchOption"
  7.                              :on-search-result="onSearchResult"
  8.                              :center="amap.center"></el-amap-search-box>
  9.         <div style="width: 900px;height: 400px;margin-top: -35px; border: #2c3e50 solid 1px;">
  10.           <el-amap vid="amapDemo" :zoom="amap.zoom" :center="amap.center" class="amap-demo">
  11.             <el-amap-marker v-for="(marker, index) in amap.markers" :events="marker.events"
  12.                             :position="marker.point" :icon="marker.icon" :key="index"/>
  13.           </el-amap>
  14.         </div>
  15.       </div>
  16.     </el-col>
  17.   </el-row>
  18. </template>
  19. <!-- vid = 地图容器节点的ID。
  20.  zoom = 缩放级别
  21.  center = 地图可见区域的中心点
  22.  marker = 覆盖物
  23.  visible = 显示点标记
  24.  draggable = 设置点标记是否可拖拽移动，默认为false。
  25.  -->
  26. <style>
  27.   .search-box {
  28.     position: absolute;
  29.     top: 25px;
  30.     left: 25px;
  31.   }
  32. </style>
  34. <script>
  35.   module.exports = {
  36.     name: 'amap-page',
  37.     data() {
  38.       return {
  39.         amap: {
  40.           zoom: 14,
  41.           center: [116.7833687777778, 31.89548288888889],
  42.           searchOption: {
  43.             city: '0551',
  44.             citylimit: true
  45.           },
  46.           stationSearch:{},
  47.           markers: [
  48.             {
  49.               point: [116.7833687777778, 31.89548288888889],
  50.               events: {
  51.                 click: (e) => {
  52.                   // alert('click marker');
  53.                   let {lng, lat} = e.lnglat;
  54.                   this.amap.lng = lng;
  55.                   this.amap.lat = lat;
  56.                   this.amap.center = [e.lnglat.lng, e.lnglat.lat]
  57.                 }
  58.               },
  59.             }
  60.           ],
  61.         },
  62.         form:{
  63.           lng:"",
  64.           lat:"",
  65.           address:""
  66.         }
  67.       };
  68.     },
  69.     methods: {
  70.       onSearchResult(pois) {
  71.         console.log(pois,"pois");
  72.         let latSum = 0
  73.         let lngSum = 0
  74.         pois.forEach(poi => {
  75.           lngSum += poi.lng
  76.           latSum += poi.lat
  77.         })
  78.         let center = {
  79.           lng: lngSum / pois.length,
  80.           lat: latSum / pois.length
  81.         }
  82.         var address = pois[0].address;
  83.         var name = pois[0].name;
  85.         // console.log(center.lng, center.lat);
  86.         // this.amap.center = [center.lng, center.lat]
  87.         // this.amap.marker.position = [center.lng, center.lat]
  88.         // this.form.lng = center.lng;
  89.         // this.form.lat = center.lat;
  90.         // this.form.address = address;
  91.         // console.log(this.form.address);
  92.         this.getBusStation(name);
  93.       },
  94.       // 获取站点信息列表,使用父组件传入输入框的值
  95.       getBusStation(name) {
  96.         console.log('name',name);
  97.         this.stationSearch = {
  98.           pageIndex: 1, // 页码
  99.           pageSize: 30, // 单页显示结果条数
  100.           city: '0551' // 确定搜索城市
  101.         }
  102.         var stationList = new AMap.StationSearch(this.stationSearch)
  103.         // 一：
  104.         // stationList.search('小', function (status, result) {
  105.         //   // result即是对应的公交站点数据信息
  106.         //   if (status === 'complete' && result.info === 'OK') {
  107.         //     console.log(result)
  108.         //     console.log(this.stationListData)
  109.         //   } else {
  110.         //     console.log('公交路线数据查询失败' + result)
  111.         //   }
  112.         // })
  113.         // 二：
  114.         stationList.search(name) // mock一个假数据
  115.         let _this = this;
  116.         new AMap.event.addListener(stationList, 'complete', (res) => {
  117.           // res为获取到的当前位置的信息
  118.           this.stationListData = res
  119.           console.log(this.stationListData,"stationListData")
  120.           this.stationListData.stationInfo.forEach(data=>{
  121.             console.log("data=>",data)
  122.             let id = data.id;
  123.             let dlng = data.location.lng;
  124.             let dlat = data.location.lat;
  125.             _this.amap.markers.push({point: [dlng, dlat],
  126.               events: {
  127.                 click: (e) => {
  128.                   let {lng, lat} = e.lnglat;
  129.                   console.log('click marker 坐标:',e.lnglat);
  130.                   console.log('click marker 公交id:',id);
  131.                   this.amap.lng = lng;
  132.                   this.amap.lat = lat;
  133.                   this.amap.center = [lng, lat]
  134.                   this.$confirm('是否确认提交站点数据?', "提示", {
  135.                     confirmButtonText: "确定",
  136.                     cancelButtonText: "取消",
  137.                     type: "warning"
  138.                   }).then(function() {
  139.                   }).then(() => {
  140.                     this.msgSuccess("提交成功");
  141.                   }).catch(function() {});
  142.                 }
  143.               }
  144.             });
  145.             _this.amap.center = [dlng, dlat]
  146.           })
  148.         }) // 返回定位信息
  149.         new AMap.event.addListener(stationList, 'error', (err) => {
  150.           console.log(err)
  151.         }) // 返回定位出错信息
  152.       },
  153.     }
  154.   };
  155. </script>

image.png