修改webpack.base.config.js(必须配不然会报错)

  1. externals: {
  2.   'AMap': 'AMap'
  3. }

注意：重新运行一下

引入

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.     <title>首页</title>
  7.     <script src="https://webapi.amap.com/maps?v=1.3&key=63343cf54c48885db27a9f563ec0a46f"></script>
  8.   </head>

注意：必须放在head里 不然容易报错

使用

初始化地图

  1. <!--
  2.  * @Description: In User Settings Edit
  3.  * @Author: your name
  4.  * @Date: 2019-08-13 10:17:52
  5.  * @LastEditTime: 2019-08-16 15:22:00
  6.  * @LastEditors: Please set LastEditors
  7.  -->
  8. <template>
  9.   <div>
  10.     <div class="map" id="mapContainer"></div>
  11.   </div>
  12. </template>
  14. <script>
  15. import AMap from "AMap";
  16. var map, driving;
  17. export default {
  18.   data() {
  19.     return {
  21.     };
  22.   },
  23.   beforeRouteEnter(to, from, next) {
  24.     next();
  25.   },
  26.   methods: {
  27.     initMap() {
  28.       let _this = this;
  29.       map = new AMap.Map("mapContainer", {
  30.         zoom: 10,
  31.         resizeEnable: true
  32.       });
  33.       // 使用插件
  34.       AMap.plugin(["AMap.Driving", "AMap.Geolocation"], function() {
  35.         _this.location();
  36.         if(_this.$route.query.hasOwnProperty('lng')){
  37.             map.clearMap();
  38.             _this.drivingLine(_this.$route.query.lng, _this.$route.query.lat)
  39.         }else{
  40.             _this.getMapIndex();
  41.         }
  42.       });
  43.     }
  44.   },
  45.   mounted() {    
  46.     this.initMap();
  47.   }
  48. };
  49. </script>
  51. <style lang="less">
  52. // 修改地图组件
  53. .amap-geolocation-con {
  54.   bottom: 55px !important;
  55. }
  56. .map {
  57.   width: 100%;
  58.   height: 100%;
  59. }
  60. </style>

使用插件

初始化是就把插件也初始化 这样在外面也可以使用这个插件 不必在回调函数内

  1. // 使用插件
  2. AMap.plugin(["AMap.Driving", "AMap.Geolocation"], function() {
  3.   _this.location();
  4.   if(_this.$route.query.hasOwnProperty('lng')){
  5.     map.clearMap();
  6.     _this.drivingLine(_this.$route.query.lng, _this.$route.query.lat)
  7.   }else{
  8.     _this.getMapIndex();
  9.   }
  10. });

路线规划

  1. map.clearMap();  //清除地图所有标记
  2. let _this = this;
  3. // 规划路线必须要清除前一次的 否则路线会重叠多个 
  4. if (driving) { //一定要判断要不然会报错
  5.   driving.clear();// 清除历史规划路线
  6. }
  8. driving = new AMap.Driving({
  9.   map: map
  10. });
  11. driving.search(map.getCenter(), [lng, lat], function(status, result) {
  12.   if (status === "complete") {
  13.     console.log("绘制驾车路线完成");
  14.     driving.searchOnAMAP({
  15.       origin:result.origin,
  16.       destination:result.destination
  17.     });
  18.     _this.showInfo = false;
  19.   } else {
  20.     console.log("获取驾车数据失败：" + result);
  21.   }
  22. });

完整代码

有定位，标点，路线规划功能 其他要使用可以直接看原生高德地图文档

  1. <!--
  2.  * @Description: In User Settings Edit
  3.  * @Author: your name
  4.  * @Date: 2019-08-13 10:17:52
  5.  * @LastEditTime: 2019-08-16 15:22:00
  6.  * @LastEditors: Please set LastEditors
  7.  -->
  8. <template>
  9.   <div class="map">
  10.     <div class="map-search">
  11.       <input
  12.         type="search"
  13.         id="keywords"
  14.         placeholder="搜索联盟成员"
  15.         v-model="keyword_name"
  16.         v-on:keydown.13="search"
  17.       />
  18.     </div>
  19.     <div class="map" id="mapContainer"></div>
  20.     <ul class="cate">
  21.         <li @click="tab_search('')">
  22.             <img src="/static/images/all.png" alt="">
  23.         </li>
  24.         <li v-for="(item, index) in cate_list" :key="index" @click="tab_search(item.cate_name)">
  25.             <img :src="item.cate_icon" alt="">
  26.         </li>
  27.     </ul>
  28.     <div v-if="showWindow" :class="showInfo?'search-info slideUp':'search-info slideDown'">
  29.       <div class="info">
  30.         <div class="desc">
  31.           <h1>
  32.             {{infoWindow.title}}
  33.             <i @click="toList">更多</i>
  34.           </h1>
  35.           <p>{{infoWindow.desc}}</p>
  36.         </div>
  37.         <div
  38.           class="address"
  39.           ref="address"
  40.           @click="drivingLine(infoWindow.lng, infoWindow.lat)"
  41.         >
  42.           <div class="position">
  43.             <img src="../../../assets/images/fitMapList/position1.png" alt />&nbsp;
  44.             <span>{{infoWindow.distance}}km</span>
  45.           </div>
  46.         </div>
  47.         <ul class="list">
  48.           <li>
  49.             <p>{{infoWindow.address}}</p>
  50.             <span></span>
  51.             <a :href="'tel://' + infoWindow.tel">
  52.               <img src="../../../assets/images/fitMapList/phone.png" alt />
  53.             </a>
  54.           </li>
  55.         </ul>
  56.       </div>
  57.       <div class="border" @click="openInfo"></div>
  58.       <div class="close" @click="closeInfo"></div>
  59.     </div>
  60.   </div>
  61. </template>
  63. <script>
  64. import AMap from "AMap";
  65. var map, driving;
  66. export default {
  67.   data() {
  68.     return {
  69.       showWindow: false,
  70.       showInfo: false,
  71.       position: [],
  72.       markers: [],
  73.       infoWindow: {},
  74.       keyword_name: "",
  75.       cate_list: []
  76.     };
  77.   },
  78.   beforeRouteEnter(to, from, next) {
  79.     next();
  80.   },
  81.   methods: {
  82.     closeInfo() {
  83.       this.showInfo = false;
  84.     },
  85.     openInfo() {
  86.       this.showInfo = true;
  87.     },
  88.     toList() {
  89.         this.$router.push({path: '/mapmarklist'})
  90.     },
  91.     getMapIndex() {
  92.       let _this = this;
  93.       this.$get("/fmmap/map/index").then(res => {
  94.         this.setMarkers(res.data.anchor_list);
  95.       });
  96.     },
  97.     setMarkers(markers) {
  98.       let _this = this;
  99.       markers.forEach(function(marker, index) {
  100.         let center = map.getCenter();
  101.         console.log(center)
  102.         let dis = Math.round(center.distance([marker.lng, marker.lat]));
  103.         marker.distance = (dis / 1000).toFixed(1);
  104.         var marker = new AMap.Marker({
  105.           map: map,
  106.           icon: "/static/images/position.png",
  107.           position: [marker.lng, marker.lat],
  108.           info: marker
  109.         });
  110.         marker.on("click", function(e) {
  111.           _this.showInfo = true;
  112.           _this.showWindow = true;
  113.           _this.infoWindow = e.target.G.info;
  114.         });
  115.       });
  116.       map.setFitView();
  117.     },
  118.     initMap() {
  119.       let _this = this;
  120.       map = new AMap.Map("mapContainer", {
  121.         zoom: 10,
  122.         resizeEnable: true
  123.       });
  124.       AMap.plugin(["AMap.Driving", "AMap.Geolocation"], function() {
  125.         _this.location();
  126.         if(_this.$route.query.hasOwnProperty('lng')){
  127.             map.clearMap();
  128.             _this.drivingLine(_this.$route.query.lng, _this.$route.query.lat)
  129.         }else{
  130.             _this.getMapIndex();
  131.         }
  132.       });
  133.     },
  134.     location() {
  135.       //   定位
  136.       var geolocation = new AMap.Geolocation({
  137.         enableHighAccuracy: true, //是否使用高精度定位，默认:true
  138.         timeout: 10000, //超过10秒后停止定位，默认：无穷大
  139.         maximumAge: 0, //定位结果缓存0毫秒，默认：0
  140.         convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
  141.         showButton: true, //显示定位按钮，默认：true
  142.         buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
  143.         buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  144.         showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
  145.         showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
  146.         panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
  147.         zoomToAccuracy: false //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  148.       });
  149.       map.addControl(geolocation);
  150.       geolocation.getCurrentPosition();
  151.       AMap.event.addListener(geolocation, "complete", function(result) {
  152.         console.log("定位成功");
  153.       }); //返回定位信息
  154.       AMap.event.addListener(geolocation, "error", function(error) {
  155.         console.log(JSON.stringify(error));
  156.       });
  157.     },
  158.     drivingLine(lng, lat) {
  159.         map.clearMap();
  160.       let _this = this;
  162.       if (driving) {
  163.         // 清除历史规划路线
  164.         driving.clear();
  165.       }
  167.       driving = new AMap.Driving({
  168.         map: map
  169.       });
  170.       driving.search(map.getCenter(), [lng, lat], function(status, result) {
  171.         if (status === "complete") {
  172.            console.log("绘制驾车路线完成");
  173.            driving.searchOnAMAP({
  174.                 origin:result.origin,
  175.                 destination:result.destination
  176.             });
  177.           _this.showInfo = false;
  178.         } else {
  179.           console.log("获取驾车数据失败：" + result);
  180.         }
  181.       });
  182.     },
  183.     tab_search(name) {
  184.          this.keyword_name = name;
  185.          this.search();
  186.     },
  187.     search() {
  188.       map.clearMap();
  189.       this.showWindow = false;
  190.       this.$get("/fmmap/map/anchor/search", {
  191.         lng: map.getCenter().lng,
  192.         lat: map.getCenter().lat,
  193.         keyword_name: this.keyword_name,
  194.         uniacid: 1
  195.       }).then(res => {
  196.         this.setMarkers(res.data.anchor_list);
  197.       });
  198.     },
  199.     getCate() {
  200.         this.$get('/fmmap/map/cate/list').then(res => {
  201.             if(res.data.length == 0) return;
  202.             res.data.map(item => {
  203.                 item.cate_anchor_icon = this.axios.defaults.baseUrl + item.cate_anchor_icon;
  204.             })
  205.             this.cate_list = res.data;
  206.         })
  207.     }
  208.   },
  209.   mounted() {    
  210.     this.initMap();
  211.     this.getCate();
  212.   }
  213. };
  214. </script>
  216. <style lang="less">
  217. // 修改地图组件
  218. .amap-geolocation-con {
  219.   bottom: 55px !important;
  220. }
  221. .map {
  222.   width: 100%;
  223.   height: 100%;
  224.   .map-search {
  225.     position: fixed;
  226.     top: 15px;
  227.     width: 100%;
  228.     height: 45px;
  229.     text-align: center;
  230.     z-index: 9999;
  231.     input {
  232.       box-sizing: border-box;
  233.       width: 90%;
  234.       height: 45px;
  235.       border-radius: 8px;
  236.       border: 0;
  237.       outline: none;
  238.       margin: 0 auto;
  239.       font-size: 14px;
  240.       color: #333;
  241.       font-family: "PingFangSC-Regular";
  242.       background: url("../../../assets/images/fitMapList/search.png") no-repeat
  243.         10px center #fff;
  244.       background-size: 18px 18px;
  245.       padding: 5px 8px 5px 32px;
  246.     }
  247.     ul {
  248.       width: 45px;
  249.       box-sizing: border-box;
  250.       margin-top: 10px;
  251.       position: absolute;
  252.       right: 10px;
  253.       li {
  254.         width: 40px;
  255.         height: 40px;
  256.         // border: 1px solid #e4e4e4;
  257.         margin-bottom: 4px;
  258.         border-radius: 50%;
  259.         img {
  260.           width: 40px;
  261.           height: 40px;
  262.         }
  263.       }
  264.     }
  265.   }
  266.   .search-info {
  267.     width: 97%;
  268.     height: 50%;
  269.     background: #fff;
  270.     margin: 0 auto;
  271.     position: fixed;
  272.     bottom: -45%;
  273.     left: 50%;
  274.     transform: translateX(-50%);
  275.     z-index: 9999;
  277.     &.slideUp {
  278.       animation: slideUp 0.4s forwards;
  279.       .close {
  280.         display: block;
  281.       }
  282.     }
  283.     &.slideDown {
  284.       animation: slideDown 0.4s forwards;
  285.     }
  286.     .close {
  287.       position: absolute;
  288.       right: 12px;
  289.       top: 12px;
  290.       width: 17px;
  291.       height: 17px;
  292.       background: url("../../../assets/images/fitMapList/cloase.png") no-repeat
  293.         center center;
  294.       display: none;
  295.     }
  296.     .border {
  297.       width: 45px;
  298.       border: 4px solid #eceaea;
  299.       position: absolute;
  300.       top: 10px;
  301.       left: 50%;
  302.       transform: translateX(-50%);
  303.       border-radius: 10px;
  304.     }
  305.     .info {
  306.       margin-top: 35px;
  307.       width: 100%;
  308.       overflow-y: scroll;
  309.       height: 90%;
  310.       .desc {
  311.         padding: 10px;
  312.         border-bottom: 1px solid #e4e4e4;
  313.         padding-bottom: 6px;
  314.         h1 {
  315.           font-size: 0.34rem;
  316.           color: #333;
  317.           font-weight: 500;
  318.           margin-bottom: 0.2rem;
  319.           position: relative;
  320.           width: 100%;
  321.           height: auto;
  322.           padding-right: 0.5rem;
  323.           i {
  324.             position: absolute;
  325.             top: 0.06rem;
  326.             right: 0;
  327.             font-size: 0.24rem;
  328.             cursor: pointer;
  329.           }
  330.         }
  331.         .grade {
  332.           font-size: 0;
  333.           margin: 5px 0;
  334.           i {
  335.             display: inline-block;
  336.             width: 12px;
  337.             height: 12px;
  338.             background: url("../../../assets/images/fitMapList/start2.png")
  339.               no-repeat center center;
  340.             background-size: 12px 12px;
  341.             margin-right: 2px;
  342.             &.active {
  343.               background: url("../../../assets/images/fitMapList/start1.png")
  344.                 no-repeat center center;
  345.               background-size: 12px 12px;
  346.             }
  347.           }
  348.         }
  349.         p {
  350.           font-size: 0.26rem;
  351.           color: #333;
  352.         }
  353.       }
  354.       .address {
  355.         padding: 10px;
  356.         border-bottom: 1px solid #e4e4e4;
  357.         .position {
  358.           color: #000;
  359.           font-size: 15px;
  360.           width: 100%;
  361.           height: 45px;
  362.           border: 1px solid #e4e4e4;
  363.           text-align: center;
  364.           line-height: 45px;
  365.           margin: 12px auto;
  366.           img {
  367.             display: inline-block;
  368.             width: 20px;
  369.             height: 20px;
  370.             position: relative;
  371.             top: 28%;
  372.           }
  373.         }
  374.         .label {
  375.           font-size: 0;
  377.           span {
  378.             font-size: 12px;
  379.             color: #999;
  380.             padding: 4px 6px;
  381.             border: 1px solid #979797;
  382.             border-radius: 4px;
  383.             margin-right: 6px;
  384.           }
  385.         }
  386.       }
  387.       .list {
  388.         padding: 10px;
  389.         border-bottom: 1px solid #e4e4e4;
  390.         li {
  391.           line-height: 40px;
  392.           background: url("../../../assets/images/fitMapList/position.png")
  393.             no-repeat left center;
  394.           background-size: 11px 16px;
  395.           padding-left: 20px;
  396.           font-size: 14px;
  397.           display: flex;
  398.           align-items: center;
  399.           position: relative;
  400.           p {
  401.             width: 82.2%;
  402.             white-space: nowrap;
  403.             overflow: hidden;
  404.             text-overflow: ellipsis;
  405.           }
  406.           span {
  407.             width: 1px;
  408.             height: 22px;
  409.             background: #e4e4e4;
  410.             display: block;
  411.           }
  412.           a {
  413.             display: block;
  414.             width: 0.6rem;
  415.             height: 0.6rem;
  416.             display: flex;
  417.             position: absolute;
  418.             right: 0;
  419.             top: 0;
  420.             padding-top: 0.2rem;
  421.             img {
  422.               width: 0.4rem;
  423.               height: 0.4rem;
  424.               align-self: center;
  425.             }
  426.           }
  427.         }
  428.       }
  429.     }
  430.   }
  431. }
  432. // 图标样式
  433. .cate{
  434.     position: fixed;
  435.     right: .4rem;
  436.     top: 1.5rem;
  437.     z-index: 9999;
  438.     li{
  439.         width: 0.8rem;
  440.         height: 0.8rem;
  441.         margin-top: .2rem;
  442.         border-radius: 50%;
  443.         img{
  444.             width: 100%;
  445.         }
  446.     }
  447. }
  448. @keyframes slideDown {
  449.   0% {
  450.     bottom: 0;
  451.   }
  452.   100% {
  453.     bottom: -45%;
  454.   }
  455. }
  456. @keyframes slideUp {
  457.   0% {
  458.     bottom: -45%;
  459.   }
  460.   100% {
  461.     bottom: 0;
  462.   }
  463. }
  464. </style>