vue整合高德地图
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/[email protected]'),
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: ''
+'基本信息'
+'编号：'+element.id+''
+'名称：'+element.name+''
+'类型：'+_this.getDeviceName(element.type)+''
+'经度：'+e.lnglat.lng+''
+'纬度：'+e.lnglat.lat+''
+'',
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>
最终效果图：
