1.创建引入脚本

  • 创建 utils文件夹,创建 remoteLoad.js
    ```javascript /**

    • @description:加载script脚本

    • @return: / export default function remoteLoad(url, hasCallback) { return createScript(url); /*

      • 创建script
      • @param url

      • @returns {Promise} */ function createScript(url) { let scriptElement = document.createElement(“script”); document.body.appendChild(scriptElement); let promise = new Promise((resolve, reject) => { scriptElement.addEventListener( “load”, (e) => {

        1. removeScript(scriptElement);
        2. if (!hasCallback) {
        3.   resolve(e);
        4. }

        }, false );

        scriptElement.addEventListener( “error”, (e) => {

        1. removeScript(scriptElement);
        2. reject(e);

        }, false );

        if (hasCallback) { window.callback = function () {

        1. resolve();
        2. window.____callback____ = null;

        }; } });

      if (hasCallback) { url += “&callback=callback“; }

      scriptElement.src = url;

      return promise; }

    /**

    • 移除script标签
    • @param scriptElement script dom */ function removeScript(scriptElement) { document.body.removeChild(scriptElement); } }
  1. <a name="5mDfF"></a>
  2. ### 2.使用
  3. ```javascript
  4. <template>
  5.   <div class="m-map">
  6.     <div class="search" v-if="placeSearch">
  7.       <input type="text" placeholder="请输入关键字" v-model="searchKey" />
  8.       <button type="button" @click="handleSearch">搜索</button>
  9.       <div
  10.         id="js-result"
  11.         v-show="searchKey"
  12.         class="result"
  13.         style="width: 100%; height: 100%;"
  14.       ></div>
  15.     </div>
  16.     <div id="js-container" class="map">正在加载数据 ...</div>
  17.   </div>
  18. </template>
  20. <script>
  21. import remoteLoad from "@/utils/remoteLoad.js";
  22. const MapKey = "cfd8da5cf010c5f7441834ff5e764f5b";
  23. const MapCityName = "郑州";
  24. export default {
  25.   props: ["lat", "lng"],
  26.   data() {
  27.     return {
  28.       searchKey: "",
  29.       placeSearch: null,
  30.       dragStatus: false,
  31.       AMapUI: null,
  32.       AMap: null,
  33.     };
  34.   },
  35.   watch: {
  36.     searchKey() {
  37.       if (this.searchKey === "") {
  38.         this.placeSearch.clear();
  39.       }
  40.     },
  41.   },
  43.   methods: {
  44.     // 搜索
  45.     handleSearch() {
  46.       if (this.searchKey) {
  47.         this.placeSearch.search(this.searchKey);
  48.       }
  49.     },
  50.     // 实例化地图
  51.     initMap() {
  52.       // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
  53.       let AMapUI = (this.AMapUI = window.AMapUI);
  54.       let AMap = (this.AMap = window.AMap);
  55.       AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
  56.         let mapConfig = {
  57.           zoom: 16,
  58.           cityName: MapCityName,
  59.         };
  60.         if (this.lat && this.lng) {
  61.           mapConfig.center = [this.lng, this.lat];
  62.         }
  63.         let map = new AMap.Map("js-container", mapConfig);
  64.         // 加载地图搜索插件
  65.         AMap.service("AMap.PlaceSearch", () => {
  66.           this.placeSearch = new AMap.PlaceSearch({
  67.             pageSize: 5,
  68.             pageIndex: 1,
  69.             citylimit: true,
  70.             city: MapCityName,
  71.             map: map,
  72.             panel: "js-result",
  73.           });
  74.         });
  75.         // 启用工具条
  76.         AMap.plugin(["AMap.ToolBar"], function () {
  77.           map.addControl(
  78.             new AMap.ToolBar({
  79.               position: "RB",
  80.             })
  81.           );
  82.         });
  83.         // 创建地图拖拽
  84.         let positionPicker = new PositionPicker({
  85.           mode: "dragMap", // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
  86.           map: map, // 依赖地图对象
  87.         });
  88.         // 拖拽完成发送自定义 drag 事件
  89.         positionPicker.on("success", (positionResult) => {
  90.           // 过滤掉初始化地图后的第一次默认拖放
  91.           if (!this.dragStatus) {
  92.             this.dragStatus = true;
  93.           } else {
  94.             this.$emit("drag", positionResult);
  95.           }
  96.         });
  97.         // 启动拖放
  98.         positionPicker.start();
  99.       });
  100.     },
  101.   },
  102.   async mounted() {
  103.     // 已载入高德地图API，则直接初始化地图
  104.     if (window.AMap && window.AMapUI) {
  105.       this.initMap();
  106.       // 未载入高德地图API，则先载入API再初始化
  107.     } else {
  108.       await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`);
  109.       await remoteLoad("http://webapi.amap.com/ui/1.0/main.js");
  110.       this.initMap();
  111.     }
  112.   },
  113. };
  114. </script>
  116. <style lang="css">
  117. .m-map {
  118.   height: 800px;
  119.   height: 800px;
  120.   min-width: 500px;
  121.   min-height: 300px;
  122.   position: relative;
  123. }
  124. .m-map .map {
  125.   width: 100%;
  126.   height: 100%;
  127. }
  128. .m-map .search {
  129.   position: absolute;
  130.   top: 10px;
  131.   left: 10px;
  132.   width: 285px;
  133.   z-index: 1;
  134. }
  135. .m-map .search input {
  136.   width: 180px;
  137.   border: 1px solid #ccc;
  138.   line-height: 20px;
  139.   padding: 5px;
  140.   outline: none;
  141. }
  142. .m-map .search button {
  143.   line-height: 26px;
  144.   background: #fff;
  145.   border: 1px solid #ccc;
  146.   width: 50px;
  147.   text-align: center;
  148. }
  149. .m-map .result {
  150.   max-height: 300px;
  151.   overflow: auto;
  152.   margin-top: 10px;
  153. }
  154. </style>