1.在官网进行注册 https://lbs.amap.com/
2.在main.js中引入配置,按需引入插件
import VueAMap from 'vue-amap';
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
// 高德的key
key: 'af3036364576bf0fb5572996ef9f4850',
// 插件集合
plugin:[
'AMap.Autocomplete',
'AMap.PlaceSearch'
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.4',
uiVersion: '1.0.11' // 版本号
});
3.安装 ：npm install vue-amap --save
使用示例代码中的接口文件没放上去
// workbench.vue
<template>
<div class="amap-page-container">
<el-amap
:vid="'amap-vue'"
:zoom="zoom"
:events="mapEvents"
:center="[center.lng, center.lat]"
>
<div class="button-style">
<el-button type="success">月安装数：{{ monthInstall }}</el-button>
<el-button type="success">年安装数：{{ yearInstall }}</el-button>
<el-button type="danger">月拆装数：{{ monthUninstall }}</el-button>
<el-button type="danger">年拆装数：{{ yearUninstall }}</el-button>
</div>
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="marker.icon"
>
</el-amap-marker>
</el-amap>
<infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
<detailInfo ref="detailInfo"></detailInfo>
</div>
</template>
<script>
const workbenchApi = require("../api/workbench");
import infoWindowComponent from "../components/infoWindow.vue";
import detailInfo from "../components/detailInfo.vue";
export default {
components: {
infoWindowComponent,
detailInfo,
},
data() {
let self = this;
return {
showInfoWindow: false,
infoMsg: {},
search: "",
zoom: 6,
mapEvents: {
init(map) {
self.map = map;
self.setMap();
},
},
map: "",
center: {
lng: 107.989207,
lat: 34.996855,
},
markers: [],
windows: [],
window: "",
dataSource: [],
monthInstall: "", //月安装数
monthUninstall: "", //月拆装数
yearInstall: "", //年安装数
yearUninstall: "", //年拆装数
};
},
activated() {
this.loadData();
},
methods: {
loadData() {
workbenchApi.detail().then((data) => {
this.dataSource = data.craneInfos;
this.monthInstall = data.monthInstall;
this.monthUninstall = data.monthUninstall;
this.yearInstall = data.yearInstall;
this.yearUninstall = data.yearUninstall;
this.setMarkers();
});
},
setMarkers() {
let markers = [];
let that = this;
this.dataSource.forEach((item, index) => {
//未进场： 使用中:绿色 维修中： 已拆除：灰色 拆装报停： 临时报停：
//图标
item.icon = new AMap.Icon({
size: new AMap.Size(40, 40),
image: getImage(),
imageSize: new AMap.Size(40, 40),
anchor: "center",
});
function getImage() {
if (item.status=="未进场") {
return require("../icons/blue.png")
}
else if (item.status=="使用中") {
return require("../icons/green.png")
}
else if (item.status=="维修中") {
return require("../icons/red.png")
}
else if (item.status=="已拆除") {
return require("../icons/grey.png")
}
else if (item.status=="拆装报停") {
return require("../icons/yellow.png")
}
else if (item.status=="临时报停") {
return require("../icons/yellow.png")
}
else{
return require("../icons/abnormal.png")
}
}
markers.push({
position: [item.longitude, item.latitude],
icon: item.icon,
events: {
click() {
that.$nextTick(() => {
that.setInfoWindows(item);
that.center = {
lat: item.latitude,
lng: item.longitude,
};
});
},
mouseover(){
that.$nextTick(() => {
that.getDetailWindow(item);
});
},
mouseout(){
that.$nextTick(() => {
that.$refs.detailInfo.close();
});
},
},
});
});
//加窗体
this.markers = markers;
},
setMap() {
//行政区域划分
let self = this;
AMapUI.load(
["ui/geo/DistrictCluster", "lib/$"],
function (DistrictCluster, $) {
//启动页面
initPage(DistrictCluster, $);
}
);
function initPage(DistrictCluster, $) {
var distCluster = new DistrictCluster({
map: self.map, //所属的地图实例
zIndex: 11,
getPosition: function (item) {
if (!item) {
return null;
}
//返回经纬度
return item.position;
},
renderOptions: {
//基础样式
featureStyle: {
fillStyle: "rgba(102,170,0,0.5)", //填充色
lineWidth: 2, //描边线宽
strokeStyle: "rgb(31, 119, 180)", //描边色
//鼠标Hover后的样式
hoverOptions: {
fillStyle: "rgba(255,255,255,0.2)",
},
},
//特定区划级别的默认样式
featureStyleByLevel: {
//全国
country: {
fillStyle: "rgba(49, 163, 84, 0.8)",
},
//省
province: {
fillStyle: "rgba(116, 196, 118, 0.7)",
},
//市
city: {
fillStyle: "rgba(161, 217, 155, 0.6)",
},
//区县
district: {
fillStyle: "rgba(199, 233, 192, 0.5)",
},
},
//直接定义某写区划面的样式
getFeatureStyle: function (feature, dataItems) {
if (dataItems.length > 10) {
return {
fillStyle: "rgba(116, 196, 118, 0.7)",
};
} else if (dataItems.length > 0) {
return {
fillStyle: "rgba(161, 217, 155, 0.6)",
};
} else if (dataItems.length == 0) {
return {
fillStyle: "rgba(0,0,0,0.0)",
};
}
return {};
},
},
});
distCluster.setData(self.markers);
}
},
getDetailWindow(e){
let self = this;
self.showInfoWindow = true;
self.infoMsg = e;
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: self.$refs.detailInfo.$el,
offset: new AMap.Pixel(16, -50),
});
infoWindow.open(self.map, [e.longitude, e.latitude]);
self.$refs.detailInfo.initialize({
infoWindow: infoWindow,
infoMsg: e,
});
},
setInfoWindows(e) {
let self = this;
self.showInfoWindow = true;
self.infoMsg = e;
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: self.$refs.infoWindowComponent.$el,
offset: new AMap.Pixel(16, -50),
});
infoWindow.open(self.map, [e.longitude, e.latitude]);
self.$refs.infoWindowComponent.initialize({
infoWindow: infoWindow,
infoMsg: e,
});
},
},
};
</script>
<style lang="scss" scoped="">
.amap-page-container {
width: 100%;
height: 100%;
}
.button-style {
position: absolute;
top: 65px;
left: 20px;
}
.search-input {
position: absolute;
top: 65px;
}
/deep/.amap-logo {
display: none;
opacity: 0;
}
/deep/.amap-copyright {
opacity: 0;
}
</style>
// 信息弹窗文件infoWindow.vue
<template>
<div>
<el-card
class="box-card"
style="width: 200px; border-radius: 10px"
>
<div class="del-div">
<el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
</div>
<div v-if="!showDetail">
<div class="button-style">
<el-button size="small" type="primary" @click="showDetail = true"
>信息明细</el-button
>
</div>
<div class="button-style">
<el-button size="small" type="primary"
><router-link
:to="{
name: 'MaintenanceIndex',
params: {
search: infoMsg.sn,
},
}"
>维保记录</router-link
></el-button
>
</div>
<div class="button-style">
<el-button size="small" type="primary"><router-link
:to="{
name: 'RepairReport',
params: {
search: infoMsg.sn,
},
}"
>维修记录</router-link
></el-button>
</div>
<!-- <div class="button-style">
<el-button size="small" type="primary">预警信息</el-button>
</div>
<div class="button-style">
<el-button size="small" type="primary">视频监控</el-button>
</div> -->
</div>
<div v-else>
<div class="text item">
<span>项目名称：{{ infoMsg.name }}</span>
</div>
<div class="text item">
<span>项目负责人：{{ infoMsg.principalName }}</span>
</div>
<div class="text item">
<span>机长：{{ captainName }}</span>
</div>
<div class="text item">
<span>塔机型号：{{ infoMsg.model }}</span>
</div>
<div class="text item">
<span>塔机编号：{{ infoMsg.sn }}</span>
</div>
<div class="text item">
<span>动力源：{{ infoMsg.powerSource }}</span>
</div>
<div class="text item">
<span>使用方式：{{ infoMsg.type }}</span>
</div>
<div class="text item">
<span>状态：{{ infoMsg.status }}</span>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
infoWindow: "",
infoMsg: "",
showDetail: false,
captainName:"",
};
},
methods: {
initialize(e) {
console.log(e);
this.infoWindow = e.infoWindow;
this.infoMsg = e.infoMsg;
const members = this.infoMsg.workers
if (members.length>0) {
let captain = members.find(obj => obj.type==0)
this.captainName = captain.username
}
},
close() {
// 高德地图信息窗关闭的api
this.infoWindow.close();
this.showDetail = false;
},
},
};
</script>
<style lang="css" scoped>
.del-div {
position: absolute;
transform: scale(1.2);
margin-left: 153px;
margin-top: -15px;
}
.button-style {
text-align: center;
margin-bottom: 5px;
margin-top: 5px;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 5px;
margin-top: 5px;
}
</style>
vue-amap结合amap原生Api示例
// 查看定位和修改定位功能
// 父组件调用该文件的openPosition，并传入三个参数：
// 1.obj:定位的坐标和其他参数。2.bol:标识判断是编辑还是修改。3.title:弹窗标题
// 代码中数据参数由父组件调用该文件的openPosition。
<template>
<div>
<el-dialog
:title="title"
:visible.sync="mapDialog"
width="1000px"
v-dialogDrag
>
<div class="amap-page-container">
<div v-if="isCheck">
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
</div>
<el-amap
:vid="'amap-vue'"
:zoom="zoom"
:center="[marker.lng, marker.lat]"
:events="events"
>
<el-amap-marker
:position="[marker.lng, marker.lat]"
></el-amap-marker>
</el-amap>
</div>
<div v-if="isCheck">
<el-form ref="editForm" :model="editForm" label-width="100px">
<el-form-item
label="塔机地址"
prop="address"
:rules="[
{
required: true,
message: '请输入塔机地址',
trigger: 'bulr',
},
]"
>
<el-input type="text" v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="mapDialog = false">取消</el-button>
<el-button type="primary" @click="confirmPosition('editForm')"
>确定</el-button
>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
const craneApi = require("../api/craneManage");
export default {
data() {
let self = this
return {
mapDialog: false,
marker: {
lng: "",
lat: "",
},
zoom: 15,
searchOption: {
citylimit: false,
},
events: {
click: (e) => {
if (self.isCheck) {
self.marker.lng = e.lnglat.lng;
self.marker.lat = e.lnglat.lat;
let lnglat = [self.marker.lng,self.marker.lat]
self.getaddress(lnglat)
}
},
},
editForm: {
id: "",
longitude: "",
latitude: "",
address: "",
},
isCheck: true,
title: "",
formattedAddress:"",
};
},
methods: {
//逆地理编码，在地图中点击点图获取该点的详细结构化的地址。
//例如：116.480881,39.989410 转换地址描述后：北京市朝阳区阜通东大街6号
getaddress: function (lnglat) {
let self = this;
AMap.plugin("AMap.Geocoder", function () {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: "010",
});
geocoder.getAddress(lnglat, function (status, result) {
if (status === "complete" && result.info === "OK") {
self.editForm.address = result.regeocode.formattedAddress;
// result为对应的地理位置详细信息
}
});
});
},
openPosition(obj, bol, title) {
this.isCheck = bol;
this.title = title;
if (obj.latitude != "" && obj.longitude != "") {
this.marker.lat = obj.latitude;
this.marker.lng = obj.longitude;
} else {
this.marker.lat = 39.909104;
this.marker.lng = 116.397453;
}
this.mapDialog = true;
},
editPosition(obj, bol, title) {
this.isCheck = bol;
this.title = title;
if (obj.latitude != "" && obj.longitude != "") {
this.marker.lat = obj.latitude;
this.marker.lng = obj.longitude;
} else {
this.marker.lat = 39.909104;
this.marker.lng = 116.397453;
}
this.mapDialog = true;
this.editForm.id = obj.eid;
this.editForm.address = ""
},
onSearchResult(pois) {
this.marker.lng = pois[0].lng;
this.marker.lat = pois[0].lat;
},
confirmPosition(editForm) {
this.editForm.longitude = this.marker.lng;
this.editForm.latitude = this.marker.lat;
this.$refs[editForm].validate((v) => {
if (v) {
craneApi
.position(this.editForm)
.then(() => {
this.$refs[editForm].resetFields();
this.mapDialog = false;
this.$parent.loadData();
this.$message({
showClose: true,
message: "编辑成功",
type: "success",
});
})
.catch(() => {});
}
});
},
},
};
</script>
<style lang="scss" scoped="">
// .el-form-item {
// margin-bottom: -20px;
// margin-top: 20px;
// }
.amap-page-container {
width: 100%;
height: 600px;
}
.search-box {
position: absolute;
top: 65px;
left: 20px;
}
/deep/.amap-logo {
display: none;
opacity: 0;
}
/deep/.amap-copyright {
opacity: 0;
}
</style>
3385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
