首先来说this问题, 这里的this实际上就是把我们的实例化对象挂载到上面而已,vue3中没办法像vue2那样使用this, 但也提供给我们了api来获取当前组件的实例化对象, 然后我没用使用函数, 使用了一个类,类构造这个方法, 模版也不适用字符串模版,因为这里字符串模版的事件绑定写死了,我们使用DOM来动态绑定事件,代码如下...
第一步 申请高德地图Key 第二步 https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue 第三步 踩坑 官方提供代码,运行后会发现,JSapi不支持,手机运行白屏、H5运行正常。 官方示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ...
ref,toRefs,onMounted,nextTick,defineProps}from'vue';import{shallowRef}from'@vue/reactivity'...
3D地图模式 layers: [new AMap.TileLayer.Satellite()],//设置地图图层为卫星地图 zoom: 16, //初始化地图级别 }); //添加插件 AMap.plugin( [ "AMap.ToolBar", "AMap.Scale", "AMap.TileLayer", "AMap.HawkEye", "AMap.MapType", "AMap.MouseTool"...
地图选点-vue3 开发前准备 获取key值和相关安全密钥 进入高德开放平台 https://lbs.amap.com/ 登录后,打开我的应用(无账号要先注册) 打开我的应用,创建新应用,填入创建的名称和选择应用类型 按需填入自己的名称及服务平台,域名白名单可不填 这就获取到了key值和相关安全密钥 ...
在Vue3 中使用 首先需要引入 Vue3 的 shallowRef() 方法(使用 shallowRef() 进行非深度监听,因为在 Vue3 所使用的 Proxy 拦截操作会改变 JS API 原生对象,所以此处需要区别 Vue2 使用方式对地图对象行非深度监听,否则会出现问题,建议 JS API 相关对象采用非响应式的普通对象来存储)。
现在实现的业务是在地图上用经纬度显示相应的标记点及数据(自定义标记点),之前使用过高德地图行政区域放大的api,由于代码量有点多就用了这个最近使用的自定义标记点的示例来做展示,实现的方式都是一样的。 高德地图JS API:https://lbs.amap.com/api/javascript-api/guide/overlays/marker ...
使用: 一、引入高德地图资源包; 我将该资源引用在index页面里面 二、引用高德地图相关插件; import AMapfrom 'AMap' // 引入高德地图 import AMapUIfrom 'AMapUI' // 引入高德地图 我使用的是vue-cli3,所以需要在vue-config.js进行一些基础配置 const webpack = require('webpack') ...
vue 调用高德地图api 一、前期工作 1.注册高德地图成为开发者 2.创建一个新应用、获取秘钥 二、引入 1.找到public index.html文件插入js 1 1. 需要地图工具类的把变量加入到plugin中 三、初始化地图,显示多个点标记,点击出现窗体 1.amap.vue <template> </template> import createInfoWindow ...
import AMapLoader from "@amap/amap-jsapi-loader"; import {onMounted, ref, Ref, shallowRef, watchEffect} from "vue"; // 加载地图API function loadAMap() { const aMapLoaded = ref<boolean>(false) // 从环境变量读取AMAP KEY const key = process.env.VUE_APP_AMAP_KEY if (key) { onMounted(...