vue中引入并使用高德地图

文章目录

一、使用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中引入并使用高德地图相关推荐

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情
PC端高德地图使用步骤: 1.注册并登录高德开放平台获取 2.安装高德依赖(amap-jsapi-loader) 3.初始化地图 4.首次打开地图获取当前定位并标记 5.根据已有地址自动定位到指定地址 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
记录一次vue项目引入GoogleMap API进行地图定位
背景公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
vue中加载腾讯地图（html形式）
vue中引入腾讯地图,目前根据网上的方式有一种 qqmap组件,但是本人才疏学浅,未能探究如何使用,于是乎,就曲线救国,用另一种方式实现了,在vue中引入iframe,然后在iframe中引入html ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...

vue中引入并使用高德地图

文章目录

一、使用npm引入高德地图

二、小试牛刀----修改鼠标样式

vue中引入并使用高德地图相关推荐

最新文章

热门文章