vue项目引入高德地图（vue中引入并使用高德地图）
导读：一、使用npm引入高德地图 1.进入高德开放平台...
一 、使用npm引入高德地图
1.进入高德开放平台
2.点击： 开发支持---------地图JS AP---------JSAPI的加载
3.选择 按NPM方式使用loader4.定义一个有宽高的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.15 plugins: [], // 需要使用的的插件列表 ，如比例尺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> <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: "", // 申请好的Web端开发者Key ，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本 ，缺省时默认为 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>补充：所有属性到参考手册查找 ，按住ctrl并且点击就能在新窗口打开
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！