文章目錄

• • 一、使用npm引入高德地圖
  • 二、小試牛刀----修改鼠標樣式

一、使用npm引入高德地圖

1.進入高德開放平臺
2.點擊： 開發支持---------地圖JS AP---------JSAPI的加載


3.選擇 按NPM方式使用loader

4.定義一個有寬高的div,書寫以下代碼：

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

二、小試牛刀----修改鼠標樣式

先放效果圖，左下角是可供選擇的鼠標樣式

1.點擊示例中心---------地圖屬性-------下劃找到 設置鼠標樣式


2.點進去后有示例代碼

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

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

<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><inputname="cursor"value="default"type="radio"@click="switchCursor"/><span class="iconfont icon-Cursor"></span></li><li><inputname="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><inputname="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: "", // 申請好的Web端開發者Key，首次調用 load 時必填version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15plugins: [], // 需要使用的的插件列表，如比例尺'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>

補充：所有屬性到參考手冊查找，按住ctrl并且點擊就能在新窗口打開

總結

以上是生活随笔為你收集整理的vue中引入并使用高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。