vue整合高德地图

最新推荐文章于 2024-08-12 13:17:06 发布
最新推荐文章于 2024-08-12 13:17:06 发布
阅读量1.5k 收藏 5
点赞数 2
分类专栏： vue首页地图 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwc_pubg/article/details/108051361
版权

在这里插入图片描述
1 注册高德开放平台 获取key
2 下载高德地图包 npm install vue-amap --save
3 在main.js添加代码

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key:'你获取到的步骤1的key',
  plugin:['AMap.Autocomplete','AMap.PlaceSearch','AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PolyEditor','AMap.CircleEditor','MarkerClusterer'],
  v:'1.4.4'
})

4详细地图

<template>
    <div id="app">
        <div class="mapContent">
            <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true" :events="mapEvents">
                <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="icon" :events="marker.events"></el-amap-marker>
                <el-amap-info-window :position="currentWindow.position"
                                     :content="currentWindow.content"
                                     :visible="currentWindow.visible"
                                     :events="currentWindow.events">
                </el-amap-info-window>
            </el-amap>
            <!-- 设置marker点 -->
            <searchForm :message="ownSearch" class="searchPosition" ref="searchForm" style="margin-top:4%"></searchForm>
             <div class="searchBtn" @click="getDevicePosition()" style="top:14%">搜索</div>
             <!-- 设置弹窗 -->
              <el-dialog :visible.sync="showAddPlc">
                <div class="mapmsgName">详细信息</div>
                <div class="mapMsgDetail" style="padding-top: 24px;">
                    <div class="mapDataShow">编号：<span>{{clickId}}</span></div>
                    <div class="mapDataShow">名称：<span>{{clickName}}</span></div>
                </div>
                <div class="mapMsgDetail">
                    <div class="mapDataShow">类型：<span>{{clickType}}</span></div>
                </div>
                <div class="mapMsgDetail">
                    <div class="mapDataShow">经度：<span>{{clickLng}}</span></div>
                    <div class="mapDataShow">纬度：<span>{{clickLat}}</span></div>
                </div>
                <div class="mapEcharts" id="energy" style="padding-top: 24px;"></div>
                <div class="mapEcharts" id="lineLoss"></div>
              </el-dialog>
        </div>
    </div>
</template>
<script>
import VueAMap from 'vue-amap'
import searchForm from '@/components/common/searchForm/searchForm'
import echarts from "echarts"
 let amapManager = new VueAMap.AMapManager();
export default {
    components:{searchForm},
    data(){
        return{
            ownSearch:['ifTqUp','ifdeviceUp'],
            zoom:6,
            showAddPlc:false,
            center:[102.61,37.94],
            icon:require('../../../../static/images/map/lhfj@2x.png'),
            amapManager,
            mapEvents: {
                init(o) {
                     o.setMapStyle('amap://styles/darkblue');//自定义的高德地图的样式
               }
            },
            markers:[],
            currentWindow:{
                position:[102.61,37.94],
                id:'',
                content:'',
                events:{},
                visible:false
            },
            msgContent:'',
            clickId:'',
            clickName:'',
            clickType:'',
            clickLng:'',
            clickLat:''

        }
    },
    methods:{
        //获取设备位置
        getDevicePosition(){
                let _this = this
                let body = {};
                _this.markers=[];
                body.districtOfficeId=this.$refs.searchForm.upTqValue
                body.id=''
                body.deviceId=this.$refs.searchForm.upDeviceValue
                _this.$http.post(_this.$api.devicePositionApi.queryPosition, body).then(function (res) {
                    if (res.code === '00000') {
                        let positionArr=[];
                        let needData=res.data;
                        needData.forEach(element => { 
                           let positionData={};
                           positionData.position=element.position.split(','),
                           positionData.events={
                                    click:(e) => {
                                    _this.currentWindow.visible=false;
                                    _this.clickId=element.id,
                                    _this.clickName=element.name,
                                    _this.clickType=_this.getDeviceName(element.type),
                                    //获取点击经纬度
                                    _this.clickLng=e.lnglat.lng,
                                    _this.clickLat=e.lnglat.lat,
                                    _this.showAddPlc=true;
                                    _this.$nextTick(()=>{
                                    _this.getDeviceDetail(element.id,_this.$refs.searchForm.upTqValue)
                                    })
                                    },
                                    //鼠标移到marker点显示的弹窗信息
                                    mouseover:(e)=>{
                                    _this.currentWindow.visible=false;
                                    _this.$nextTick(()=>{
                                        _this.currentWindow={
                                            position:[e.lnglat.lng,e.lnglat.lat],
                                            content: '<div class="mapMsg">'
                                                    +'<div class="msgNameDetail">基本信息</div>'
                                                    +'<div class="msgDetail">编号：'+element.id+'</div>'
                                                    +'<div class="msgDetail">名称：'+element.name+'</div>'
                                                    +'<div class="msgDetail">类型：'+_this.getDeviceName(element.type)+'</div>'
                                                    +'<div class="msgDetail">经度：'+e.lnglat.lng+'</div>'
                                                    +'<div class="msgDetail">纬度：'+e.lnglat.lat+'</div>'
                                                    +'</div>',
                                            visible:true,
                                            events:{}
                                        };
                                    _this.currentWindow.visible=true;
                                    })
                                    }
                        }
                           _this.markers.push(positionData);

                       })
                    }
                }).catch(function () {
                    console.log('请求失败')
                })
        },
        getDeviceName(deviceType){
            if(deviceType=='TABLE'||deviceType==3){
                return "电表"
            }else if(deviceType=="TABLE_BOX"||deviceType==2){
                return "表箱";
            }else if(deviceType=="DISTRICT_OFFICE"||deviceType==0){
                return "总表";
            }else if("BRANCH_BOX"==deviceType||deviceType==1){
                return "分支箱"
            }else if("GROUP"==deviceType){
                return "组"
            }
            return '未知';
        },
        //获取点击点的详细信息 并给详细信息弹窗绑定值
        getDeviceDetail(deviceId,monitorId){
                let _this = this
                let body = {};
                body.monitorId=monitorId
                body.deviceId=deviceId
                _this.$http.post(_this.$api.devicePositionApi.queryDeviceData, body).then(function (res) {
                if(res.code=='00000'){
                  let myChart = _this.$echarts.init(document.getElementById('energy'));
                  let myChartLoss = _this.$echarts.init(document.getElementById('lineLoss'));
                  let optionEn = {
                   color:['#228FFE'],
                   title: {
                       text: '当天能耗曲线',
                       textStyle:{
                           fontSize:13,
                           color:'#2BEDE6',
                       }
                   },
                    xAxis: {
                        type: 'category',
                        data: [ '0','4', '8', '12','16','20','24'],
                        "axisLabel":{
                            interval: 0
                        },
                         axisLine:{
                                lineStyle:{
                                    color:'#2BEDE6',
                                }
                         }
                    },
                    yAxis: {
                        type: 'value',
                         axisLine:{
                                lineStyle:{
                                    color:'#2BEDE6',
                                }
                         }
                    },
                   grid:{
                       x:30,
                       y:30,
                       x2:30,
                       y2:20,
                       borderWidth:10
                   },
                    series: [{
                        data: res.data.arrHn,
                        type: 'line',
                        smooth:true,
                        itemStyle: {normal: {  areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(34,143,254,0.7)'
                            }, {
                                offset: 1,
                                color: 'rgba(34,143,254,0)'
                            }])
                        },
                        }},
                    }]
                };
                let optionLine = {
                    color:['#FF4D4D'],
                    title: {
                        text: '当天线损曲线',
                        textStyle:{
                            fontSize:13,
                            color:'#2BEDE6',
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [ '0','4', '8', '12','16','20','24'],
                        "axisLabel":{
                            interval: 0
                        },
                        axisLine:{
                                lineStyle:{
                                    color:'#2BEDE6',
                                }
                         }

                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                                lineStyle:{
                                    color:'#2BEDE6',
                                }
                         }
                    },
                    grid:{
                        x:30,
                        y:30,
                        x2:30,
                        y2:20,
                        borderWidth:10
                    },
                    series: [{
                        data: res.data.arrXs,
                        type: 'line',
                          smooth:true,
                        itemStyle: {normal: {  areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255,77,77,0.7)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,77,77,0)'
                            }])
                        },
                        }},
                    }]
                };
                myChart.setOption(optionEn);
                myChartLoss.setOption(optionLine)
                }

                })
        },

    },

}
</script>

<style scoped type='text/css' >
  @import './index.css';
</style>
<style>
.mapMsg{
    background: url(/static/images/map/SB_bg@2x.png) no-repeat;
    background-size: 100% 100%;
    width: 150px;
    height: 200px;
}
.amap-logo img{
    display: none;
}
.amap-info-content{
    background: rgba(255, 255, 255, 0)!important;
    border: none!important;
}
.amap-info-outer, .amap-menu-outer{
    border: none!important;
}
.amap-info-sharp{
    background-image:none!important
}
.mapmsgName{
    font-size: 22px;
    font-family:Source Han Sans CN;
    font-weight:500;
    color:rgba(43,237,230,1);
    line-height:30px;
    box-sizing: border-box;
    padding-left: 18px;
    width: 50%;
    text-align: left;
    position: absolute;
    top: 14px;
}
.msgNameDetail{
        font-size: 22px;
    font-family:Source Han Sans CN;
    font-weight:500;
    color:rgba(43,237,230,1);
    line-height:30px;
    box-sizing: border-box;
    padding-left: 18px;
    width: 100%;
    text-align: left;
}
.msgDetail{
    font-size:10px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(255,255,255,1);
    width: 100%;
    box-sizing: border-box;
    padding-left: 18px;
    padding-top: 10px;
}
.mapMsgDetail{
    width: 100%;
    height: 6%;
}
.mapDataShow{
    width: 50%;
    height: 100%;
    float: left;
    color: #2BEDE6;
    text-align: left;
    text-align: left;
    box-sizing: border-box;
    padding-left: 20px;
}
.mapDataShow span{
    color: white;
}
.mapEcharts{
    width: 100%;
    height: 32%;
}
</style>

最终效果图：
在这里插入图片描述

阿亮。
关注
专栏目录
vue整合高德地图笔记
09-02
我明明是粉丝下载，为什么还要收积分？文件是md，有些问题，以前做的东西，不知道能不能对下载者有没有帮助，慎重下载
vue + 高德地图
何时林听@
04-07 758
vue使用高德地图示例
Vue.js 项目中集成高德地图 API
最新发布
weixin_68187288的博客
08-12 307
首先，你需要在你的 Vue 项目中引入高德地图的 JS API。- 确保你已经获取了一个有效的 API Key，并且正确地替换了示例代码中的 `YOUR_API_KEY`。如果你更倾向于通过 npm 安装，可以使用一个包装好的库，例如 `vue-amap`。- 如果你使用的是 npm 安装方式，请确保 Vue 项目已经正确配置了 `vue-amap`。请确保将 `YOUR_API_KEY` 替换为你的高德地图 API Key。```### 第二步：创建地图组件。```### 第三步：使用地图组件。
vue集成高德地图
辰鬼的博客
08-26 8040
vue集成高德地图
【Vue】集成高德地图
Java_Wxlin的博客
08-30 488
注册成为高德开发者获取申请的安全密钥、申请好的Web端开发者Key创建Vue 工程创建地图组件引入地图组件。
vue项目引入高德地图
06-19
### Vue项目引入高德地图知识点详解 #### 一、引言 随着Web应用的发展，地图功能已成为许多项目不可或缺的一部分。高德地图API以其丰富的功能、稳定的性能和良好的开发者支持，在地图服务领域占据了一席之地。对于...
vue基于Vue2.0和高德地图的地图组件实例
08-30
Vue 基于 Vue 2.0 和高德地图的地图组件实例 知识点一：vue-amap 的介绍 vue-amap 是一个基于 Vue 2.0 和高德地图的地图组件实例，旨在让开发者在编写地图应用时，能够从查找众多地图 API 和繁琐的地图状态同步中...
前端项目vue3结合高德地图实战，可直接运行
06-02
在本实践项目中，我们利用Vue3框架与高德地图API进行深度整合，构建了一个功能完善的前端应用。这个项目不仅展示了如何在Vue3环境中引入和使用高德地图，还涵盖了地图的基本操作，如显示地图、添加和删除标记点。...
vue使用elementui结合高德地图的定位以及位置显示
11-25
下面将详细解释如何在Vue项目中实现ElementUI与高德地图的整合，特别是定位和位置标记功能。 首先，我们需要在项目中引入ElementUI和高德地图API。安装ElementUI可以通过npm命令`npm install element-ui --save`...
vue集成高德地图具体步骤
weixin_50027754的博客
11-02 760
第一次在csdn手写文档，做的不好请多多包涵，今天在vue项目中集成了高德地图趁热打铁总结下废话不多说进入正题。 **1.注册高德地图开发者账号，申请KEY ** 2. 安装vue-amap npm install --save vue-amap 3.引入组件 vue项目在min.js入口文件中引入 import Vue from 'vue'; import VueAMap from 'vue-amap'; import App from './App.vue'; Vue.use(VueAMap);
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置
06-24
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置 方法简便，丢入即可使用 vue集成高德地图，实时获取用户的位置经纬度，并在地图显示具体位置
在Vue中使用高德地图
热门推荐
zhanghuaiwei
08-01 3万+
web端使用高德地图，实现多图形绘制和清除；获取经纬度；关键词搜索定位等
Vue集成高德地图简单介绍
qq_43649937的博客
01-06 521
地图 JS API ,vue
在vue中集成高德地图amap-jsapi-loader
weixin_40381947的博客
05-29 4042
这里使用的是amap-jsapi-loader。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API，并提供了一些方便的配置选项和回调函数，以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库，如React、Vue、Angular等。
vue项目实战系列二十八：集成高德地图
m0_68635815的博客
02-15 204
vue-amap是饿了么开源的一套基于Vue 2.x和高德地图的地图组件。
Vue3集成高德地图：快速上手，实现你的业务需求
爱媳妇儿爱编程
10-16 7718
vue3集成高德地图细节优化总结
vue 调用高德地图
weixin_30555753的博客
04-27 186
一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 这个就不细说了，按照其文档，就能够安装下来。 二. 按照官方提供的方法引入 这是项目例子的地址 我的github 预览地址 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk...
vue怎么整合高德地图
07-17
Vue可以通过使用高德地图的JavaScript API来整合高德地图。以下是整合的步骤： 1. 首先，在你的Vue项目中安装高德地图的JavaScript API。你可以通过在HTML文件中引入以下代码来实现： ```html ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值