vue3 + typescript 检测高德地图类型 在ts项目中使用高德地图,为了方便使用类型检测及类型提示,需引入高德地图的类型文件,操作如下: 1、引入 @amap/amap-jsapi-types 插件 npmi-S@amap/amap-jsapi-types 2、新建类型文件types/index.d.ts import'@amap/amap-jsapi-types'; 3、在tsconfig.json中配置: "inclu...
MapLoader().then((AMap: any)=>{ // 设置地图中心点,取的第一个数据 let location: any=[] const {clockLatitude, clockLongitude}= latlogList[0] location.push(Number(clockLongitude), Number(clockLatitude))//创建地图mapObj.value =newAMap.Map("signleMap", { zoom:12, center: location });/...
1. 安装插件：通过npm进行安装。2. 导入和初始化：在main.ts中自动导入所需的资源，并配置地图API。3. 配置环境：将相关配置代码添加到项目配置中。4. 实践示例：加载地图后，可以轻松添加交通图层和标记，如Loca的Icon图层，以实现地图功能。通过这些步骤，开发者可以轻松在Vue3项目中集成高德地图，提...
加载JSAPI并初始化地图 useAMap.ts 代码语言:javascript 复制 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...
vue2和vue3是有区别的,这里我们使用的是vue3,但这里vue3的方式还是选项式,不是组合式的,我自己写的时候使用的是组合式的,且集成了ts, 我后面发布完整.vue文件的时候 会去掉标签上的 ts,因为类型还没有完善,等后面完善了再贴更改以后得。为什么要使用shallowRef官方也给出了说明原因。
* Function:【初始化地图】 * @param 无 */ const map = ref(null); //创建地图对象 const current_position = ref([]); //坐标信息 // 添加声明(我用了ts 所以添加了声明) declare global { interface Window { _AMapSecurityConfig: { securityJsCode: string; ...
在项目根目录创建文件vue.config.js,注意配置文件最好别用ts,在js文件中粘贴以下代码 module.exports= {configureWebpack: {externals: {'AMap':'AMap'// 表示CDN引入的高德地图} } } 新建vue文件,粘贴以下css代码和结构 ps:css代码是搜索框的样式,高德地图也有自带 ...
import{onMounted,reactive,ref}from'vue';import{ElCheckbox}from"element-plus"import{shallowRef}from'@vue/reactivity'importAMapLoaderfrom'@amap/amap-jsapi-loader';importaxiosfrom'axios';// 上述内容不做注释onMounted(()=>{initMap()//调用地图})varamap=(null);//定义一个amap,可以根据自己习惯取名var...
title="高德地图" left-arrow @click-left="goBack()" /> </template> import { defineComponent, onMounted } from "vue"; import { useRouter } from "vue-router"; import AMapLoader from "@amap/amap-jsapi-loader"; import { shallowRef } from "@vue/reactivity"; export default define...