一、使用npm引入高德地圖

1.進(jìn)入高德開(kāi)放平臺(tái)
2.點(diǎn)擊： 開(kāi)發(fā)支持---------地圖JS AP---------JSAPI的加載


3.選擇 按NPM方式使用loader

4.定義一個(gè)有寬高的div,書(shū)寫(xiě)以下代碼：

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
        map:null
    };
  },
  mounted() {
    AMapLoader.load({
      key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
      version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("container");
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>
<style>
#container {
    width: 800px;
    height: 400px;
}
</style>

二、小試牛刀----修改鼠標(biāo)樣式

先放效果圖，左下角是可供選擇的鼠標(biāo)樣式

1.點(diǎn)擊示例中心---------地圖屬性-------下劃找到 設(shè)置鼠標(biāo)樣式


2.點(diǎn)進(jìn)去后有示例代碼

3.這是之前代碼截圖，需要注意兩點(diǎn)
（1）官方代碼綁定的click事件傳遞的this 指當(dāng)前點(diǎn)擊元素，但是vue是沒(méi)有的，在這里可以不傳參，也可以傳遞$event
（2）官方代碼的target.value獲取到的是 點(diǎn)擊元素對(duì)應(yīng)的的value值,大家可以打印target，找到target屬性里的defaultVaule屬性

4.很重要的一點(diǎn)，由于鼠標(biāo)樣式使用了icon圖標(biāo)，為了省事，我直接在index.html文件里引入樣式，其它使用方式可以去阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)查看

<link rel="stylesheet" href="https://at.alicdn.com/t/font_873139_0v65kqy674.css" >

5.代碼如下：

<template>
  <div id="body">
    <div id="container" class="map"></div>
    <ul id="cursorList" class="input-card">
      <li>
        <input
          name="cursor"
          value="default"
          type="radio"
          @click="switchCursor"
        />
        <span class="iconfont icon-Cursor"></span>
      </li>
      <li>
        <input
          name="cursor"
          value="pointer"
          type="radio"
          @click="switchCursor"
          checked
        />
        <span class="iconfont icon--Hand-Cursor"></span>
      </li>
      <li>
        <input name="cursor" value="move" type="radio" @click="switchCursor" />
        <span class="iconfont icon-cursor-move"></span>
      </li>
      <li>
        <input
          name="cursor"
          value="crosshair"
          type="radio"
          @click="switchCursor"
        />
        <span class="iconfont icon-cross"></span>
      </li>
    </ul>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    AMapLoader.load({
      key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
      version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        this.map = new AMap.Map("container");
      })
      .catch((e) => {
        console.log(e);
      });
  },
  methods: {
    switchCursor(target) {
    //   console.log(target);
      var value = target.target.defaultValue;
      this.map.setDefaultCursor(value);
    },
  },
};
</script>
<style>
#body {
  width: 800px;
  height: 400px;
  border: 2px solid skyblue;
}
#container {
  width: 100%;
  height: 100%;
}
.input-card {
  width: 70px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

補(bǔ)充：所有屬性到參考手冊(cè)查找，按住ctrl并且點(diǎn)擊就能在新窗口打開(kāi)

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-436644.html

到了這里，關(guān)于vue中引入并使用高德地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！