|
@@ -0,0 +1,202 @@
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <view id="container" :style="myStyle"></view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ let _self;
|
|
|
|
+
|
|
|
|
+ function mapMovestart(e) {
|
|
|
|
+ //'movestart')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function mapMove(e) {
|
|
|
|
+ // //'mapMove')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function mapMoveend(e) {
|
|
|
|
+ //let _self = e;
|
|
|
|
+ let pos = _self.logMapInfo();
|
|
|
|
+
|
|
|
|
+ _self.$emit('onMoveEnd', pos);
|
|
|
|
+ //'mapMoveend')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ import MapLoader from '@/apis/utils/AMap'
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: "Map-equipment",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ AMap: null,
|
|
|
|
+ mapcharger: null,
|
|
|
|
+ myStyle: "width: 100%; height: 1200rpx;",
|
|
|
|
+ longitude: 112.276527,
|
|
|
|
+ latitude: 30.306427,
|
|
|
|
+ iconList:[]
|
|
|
|
+
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ setList(sz){
|
|
|
|
+ if(this.AMap==null){
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ for(var i in this.iconList){
|
|
|
|
+ if(this.iconList[i].marker){
|
|
|
|
+ this.iconList[i].marker.setMap(null);
|
|
|
|
+ }
|
|
|
|
+ this.mapcharger.remove(this.iconList[i]);
|
|
|
|
+ }
|
|
|
|
+ this.iconList=[]
|
|
|
|
+ for(var i in sz){
|
|
|
|
+ var ob=sz[i];
|
|
|
|
+ this.addIcon(ob);
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ iconTemp1(marker,pos){
|
|
|
|
+ var classId=""
|
|
|
|
+ if(pos.status==1){
|
|
|
|
+ classId="location1"
|
|
|
|
+ }
|
|
|
|
+ if(pos.status==2){
|
|
|
|
+ classId="location2"
|
|
|
|
+ }
|
|
|
|
+ //初始化原点模板
|
|
|
|
+ var img=require("@/assets/img/antFill-alert Copy 1.svg")
|
|
|
|
+
|
|
|
|
+ var content=`<div class='${classId} ${pos.name}'><img src='${img}'/><div class="corner"></div></div>`;
|
|
|
|
+
|
|
|
|
+ marker.setContent(content)
|
|
|
|
+ marker.setzIndex(900);
|
|
|
|
+ },
|
|
|
|
+ iconTemp2(marker,pos){
|
|
|
|
+ //展开原点模板
|
|
|
|
+ var classId="location2"
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ var img1=require("@/assets/img/antFill-alert.svg")
|
|
|
|
+ var img2=require("@/assets/img/antFill-alert(2).svg")
|
|
|
|
+
|
|
|
|
+ var content=`<div class='${classId} ${pos.name}'>
|
|
|
|
+ <div class="icon2-left" ><img src='${img1}'/></div>
|
|
|
|
+
|
|
|
|
+ <div class="icon2-right">
|
|
|
|
+ <div class="corner2" ></div>
|
|
|
|
+ <div class="corner2-top" >荆鹏软件园荆鹏软件园01</div>
|
|
|
|
+ <div class="corner2-bottom" ><img class="img2" src='${img2}'/>正常</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>`;
|
|
|
|
+
|
|
|
|
+ marker.setContent(content)
|
|
|
|
+ marker.setzIndex(920);
|
|
|
|
+ },
|
|
|
|
+ addIcon(pos){
|
|
|
|
+
|
|
|
|
+ let marker = new AMap.Marker({
|
|
|
|
+ //content: content,//"<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />",
|
|
|
|
+ //icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
|
|
+ position: [pos.longitude,pos.latitude],
|
|
|
|
+ //offset: new AMap.Pixel(-20, -40),
|
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置点标记偏移量
|
|
|
|
+
|
|
|
|
+ anchor:'bottom-center',
|
|
|
|
+ zIndex:900,
|
|
|
|
+ showPositionPoint:true,
|
|
|
|
+ autoRotation: true,
|
|
|
|
+ });
|
|
|
|
+ this.iconTemp1(marker,pos)
|
|
|
|
+ marker.setMap(this.mapcharger);
|
|
|
|
+ this.myEmit("charger",marker,pos)
|
|
|
|
+ this.iconList.push({marker:marker,info:pos});
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ updateIcon(obj){
|
|
|
|
+ let index = this.iconList.findIndex(item => item.info.name == obj.name);
|
|
|
|
+ console.log("updateIcon",index)
|
|
|
|
+ for(var i in this.iconList){
|
|
|
|
+ var marker=this.iconList[i].marker
|
|
|
|
+ var pos=this.iconList[i].info
|
|
|
|
+
|
|
|
|
+ this.iconTemp1(marker,pos)
|
|
|
|
+ }
|
|
|
|
+ var pos=this.iconList[index].info
|
|
|
|
+ var marker =this.iconList[index].marker
|
|
|
|
+ this.iconTemp2(marker,pos)
|
|
|
|
+ },
|
|
|
|
+ myEmit(type,ob1,obj){
|
|
|
|
+ var _this=this;
|
|
|
|
+ console.log("myEmit")
|
|
|
|
+ AMap.event.addListener(ob1, 'click', function(e) {
|
|
|
|
+ console.log("myEmit2",type,ob1,obj)
|
|
|
|
+ _this.$emit('clickMap',{
|
|
|
|
+ type:type,
|
|
|
|
+ obj:obj
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ setMyStyle(s) {
|
|
|
|
+ this.myStyle = s;
|
|
|
|
+ },
|
|
|
|
+ logMapInfo() {
|
|
|
|
+ var posCenter = this.mapcharger.getCenter();
|
|
|
|
+ // //'center'+JSON.stringify(posCenter));
|
|
|
|
+ var limitBounds = this.mapcharger.getBounds();
|
|
|
|
+ let pos = {
|
|
|
|
+ center: posCenter,
|
|
|
|
+ bounds: limitBounds
|
|
|
|
+ };
|
|
|
|
+ return pos;
|
|
|
|
+ },
|
|
|
|
+ init() {
|
|
|
|
+ _self = this;
|
|
|
|
+ var _this = this;
|
|
|
|
+ MapLoader().then(AMap => {
|
|
|
|
+ _this.AMap = AMap;
|
|
|
|
+ _this.mapcharger && _this.mapcharger.destroy();
|
|
|
|
+ _this.mapcharger = new AMap.Map("container", {
|
|
|
|
+ resizeEnable: true,
|
|
|
|
+ dragEnable: true,
|
|
|
|
+ center: [_this.longitude, _this.latitude],
|
|
|
|
+ zoom: 13
|
|
|
|
+ });
|
|
|
|
+ _this.mapcharger.setMapStyle('amap://styles/f9b17f73bb4576ab1894c29fe9d03c6c');
|
|
|
|
+
|
|
|
|
+ _this.$emit('onload')
|
|
|
|
+ //_this.addPosition();
|
|
|
|
+ _this.listenMove();
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ listenMove() {
|
|
|
|
+ var _this = this;
|
|
|
|
+
|
|
|
|
+ _this.mapcharger.on('movestart', mapMovestart);
|
|
|
|
+ _this.mapcharger.on('mapmove', mapMove);
|
|
|
|
+ _this.mapcharger.on('moveend', mapMoveend);
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+ /*去除下标*/
|
|
|
|
+ /deep/.amap-logo {
|
|
|
|
+ display: none !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /deep/.amap-copyright {
|
|
|
|
+ opacity: 0;
|
|
|
|
+ font-size: 1px;
|
|
|
|
+ }
|
|
|
|
+</style>
|