Vue(3). 如何将高德地图引入的vue中

简介: Vue(3). 如何将高德地图引入的vue中

1.首先需要进入高德地图平台 注册账号获取KEY

2.在vue终端里输入

npm i @amap/amap-jsapi-loader --save
# 或
cnpm i @amap/amap-jsapi-loader --save

3.另一种方式是传统的<script>,但不建议,需要的可以看官方了。

4. 在需要的组件中创建一个容器,确定高宽:

<divid="container"style="height: 800px;width: 800px;"></div>

导入

importAMapLoaderfrom'@amap/amap-jsapi-loader';

并在setup()/mounted()中加载:

import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
import qs from 'qs';
// import router from '@/router';
import {
    useRouter,
    useRoute
} from "vue-router";
import { ref } from 'vue'
// import { times } from 'lodash';
const router = useRouter();
const route = useRoute();
const active = ref([0]);
const tabDatas = ref([])
const regions = ref([])
const regionss = ref([])
const lng_lst = ref([])
const minimg = ref('')
axios({
    method: "post", //请求方式
    url: "域名", //url
    data: qs.stringify({
        // 参数
        scienceid: route.query.id,
    }),
}).then((res) => {
    console.log(res.data); //成功回调
    tabDatas.value = res.data.data
    minimg.value = res.data.data;
    console.log(minimg.value);
})
const Togget = (id) => {
    console.log(minimg.value[id].minimg);
    console.log(id);
    axios({
        method: "post", //请求方式
        url: "域名", //url
        data: qs.stringify({
            // 参数
            scienceid: route.query.id,
            tabid: tabDatas.value[id].id,
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        lng_lst.value = res.data.data
        console.log(lng_lst.value[0].lng);
        AMapLoader.load({
            "key": "cb43e9e4ae1d541c13c5565173e5563d",                                          // 申请好的Web端开发者Key,首次调用 load 时必填
            "version": "1.4.15",                                // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
            "plugins": [],                                      // 需要使用的的插件列表,如比例尺'AMap.Scale'等
            "AMapUI": {                                         // 是否加载 AMapUI,缺省不加载
                "version": '1.1',                               // AMapUI 缺省 1.1
                "plugins": [],                                   // 需要加载的 AMapUI ui插件
            },
            "Loca": {                                            // 是否加载 Loca, 缺省不加载
                "version": '1.3.2'                              // Loca 版本,缺省 1.3.2
            },
        }).then((AMap) => {
            var map = new AMap.Map('container', {
                resizeEnable: true,
                // center: [res.data.data[i].lng, res.data.data[i].lat],
                center: [lng_lst.value[0].lng, lng_lst.value[0].lat],                 //中心点坐标
                zoom: 12
            });
            let lngg = []
            for (let i = 0; i < res.data.data.length; i++) {
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(Number(lng_lst.value[i].lng), Number(lng_lst.value[i].lat)), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
                    // center: [lng_lst.value[i].lng, lng_lst.value[i].lat],                 //中心点坐标
                    icon: minimg.value[id].minimg,
                    anchor: 'bottom-center',
                    offset: new AMap.Pixel(0, 0),
                    imageSize: new AMap.Size(1, 1)   // 根据所设置的大小拉伸或压缩图片
                });
                // marker.setMap(map);
                // 设置鼠标划过点标记显示的文字提示
                // marker.setTitle('我是marker的title');
                // 设置label标签
                // label默认蓝框白底左上角显示,样式className为:amap-marker-label
                marker.setLabel({
                    direction: 'right',
                    offset: new AMap.Pixel(-55, -40),  //设置文本标注偏移量
                    content: `<div class='info'>
                        <div>
                            <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.data[i].name + `</b></p>
                        </div>
                    </div>`, //设置文本标注内容
                    // <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.tab[i].create_time + `</b></p>
                });
                lngg.push(marker);
            }
            map.add(lngg)
        }).catch(e => {
            console.log(e);
        })
    })
}
const upPage = () => {
    router.push({
        name: 'HomeView'
    })
}

把key值更改为自己在创建地图时的key值

详细教程查看官方文档(都是官方的那一套)

相关文章
|
8天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
102 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
529 0
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
745 4
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
531 77
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
101 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
231 1
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
362 17