|
@@ -1,724 +0,0 @@
|
|
|
-<template>
|
|
|
- <view >
|
|
|
- <view id="container" :style="myStyle"></view>
|
|
|
-
|
|
|
- <u-icon name="map-fill" v-if="false" class="input-card" style="width: 24rem;top: 130px;width: 20px;height: 20px;" color="#999" size="40"></u-icon>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import MapLoader from '@/utils/AMap'
|
|
|
- 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')
|
|
|
- }
|
|
|
-
|
|
|
- export default {
|
|
|
- name:"Chargermap",
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- enabledMove:true,
|
|
|
- myStyle:"width: 100%; height: 1200rpx;",
|
|
|
- chargerIcon:'',
|
|
|
- chargerSelectedIcon:'',
|
|
|
- positionIcon:'',
|
|
|
- personIcon:'',
|
|
|
- longitude: 112.276527,
|
|
|
- latitude: 30.306427,
|
|
|
- AMap:null,
|
|
|
- //车的位置
|
|
|
- car: {
|
|
|
- obj:null,
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- },
|
|
|
- down: {
|
|
|
- obj:null,
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- },
|
|
|
- up: {
|
|
|
- obj:null,
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- },
|
|
|
- //个人
|
|
|
- info: {
|
|
|
- obj:null,
|
|
|
- init: false,
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- },
|
|
|
- mapcharger:null,
|
|
|
- startend: [{
|
|
|
- longitude:112.279274,
|
|
|
- latitude:30.303273,
|
|
|
- name:''
|
|
|
- }, {
|
|
|
- longitude:112.273867,
|
|
|
- latitude:30.309817,
|
|
|
- name:''
|
|
|
- }],
|
|
|
- start:{},
|
|
|
- end:{},
|
|
|
- chargerList:[],
|
|
|
- covers: [
|
|
|
- {
|
|
|
- longitude:112.273867,
|
|
|
- latitude:30.309817,
|
|
|
- },{
|
|
|
- longitude:112.280261,
|
|
|
- latitude:30.3041,
|
|
|
- },{
|
|
|
- longitude:112.279274,
|
|
|
- latitude:30.303273,
|
|
|
- }
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods:{
|
|
|
-
|
|
|
- getPositionByLonLats(pos) {
|
|
|
- var _this = this;
|
|
|
- MapLoader().then(AMap => {
|
|
|
- var lnglatXY =//[_this.longitude, _this.latitude]
|
|
|
- [pos.longitude, pos.latitude];
|
|
|
- AMap.service('AMap.Geocoder', function() {
|
|
|
- let geocoder = new AMap.Geocoder({});
|
|
|
- geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
- //lnglatXY);
|
|
|
- //status, result);
|
|
|
- if (status === 'complete' && result.info === 'OK') {
|
|
|
- var address = result.regeocode.formattedAddress;
|
|
|
- //'当前位置'+JSON.stringify(lnglatXY)+address);
|
|
|
- //_this.message= address;
|
|
|
-
|
|
|
- } else {
|
|
|
- //_this.message= '无法获取定位';
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }).catch(error => {
|
|
|
- //error)
|
|
|
- })
|
|
|
- },
|
|
|
- calculateDistance(startLngLat,endLngLat){
|
|
|
-
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- //var endLngLat = [item.longitude,item.latitude];
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- AMap.plugin('AMap.Driving', function() {
|
|
|
- var driving = new AMap.Driving({
|
|
|
- // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
|
|
- policy: AMap.DrivingPolicy.LEAST_TIME
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- driving.search(startLngLat, endLngLat, function (status, result) {
|
|
|
-
|
|
|
- resolve(result.routes[0])
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- calcDistances(startLngLat,endLst){
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- if(startLngLat[0]&&startLngLat[1]){
|
|
|
- for(let i=0;i< endLst.length;i++)
|
|
|
- {
|
|
|
- let item = endLst[i];
|
|
|
- let endLngLat = [item.longitude,item.latitude]
|
|
|
- //if(endLst[i].distance == null){
|
|
|
- var lnglat = new AMap.LngLat(startLngLat[0],startLngLat[1]);
|
|
|
- var myDistance = lnglat.distance(endLngLat);
|
|
|
- //_self.stationDetail.station.distance = myDistance/1000;
|
|
|
- //_self.stationDetail.station.time = myDistance/500;
|
|
|
- endLst[i].distance = myDistance/1000.0;
|
|
|
- endLst[i].time = myDistance/500.0;
|
|
|
-
|
|
|
- /*}else{
|
|
|
- endLst[i].time = endLst[i].distance/500.0;
|
|
|
- }*/
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- updateCharger(pos){
|
|
|
- console.log()
|
|
|
- if(this.chargerList.length==0){
|
|
|
- return
|
|
|
- }
|
|
|
- //'更新充电桩1'+JSON.stringify(pos) )
|
|
|
-// let index = this.chargerList.findIndex(item => item.info.latitude === pos.latitude && item.info.longitude === pos.longitude);
|
|
|
- //let index = this.chargerList.findIndex(item => (Math.abs(item.info.longitude-pos.longitude)<0.000001 && Math.abs(item.info.longitude - pos.latitude)<0.000001));
|
|
|
- let index = this.chargerList.findIndex(item => item.info.id === pos.id);
|
|
|
-// //'更新充电桩['+ index + ']'+JSON.stringify(pos))
|
|
|
- let colorBg = '#00BAC8';//#00b962
|
|
|
- if(this.chargerList[index].info.fastNum){
|
|
|
- colorBg = '#8486FF'
|
|
|
- }else if(this.chargerList[index].info.slowNum ){
|
|
|
- colorBg = '#00b962'
|
|
|
- }
|
|
|
-// //'colorBg'+colorBg)
|
|
|
-// //'更新充电桩2'+JSON.stringify(this.chargerList[index].info))
|
|
|
-
|
|
|
- if(index>=0){
|
|
|
- let station_icon2 = "width: 100px;height: 36px;line-height: 20px;border-radius: 50px;background-color: " + colorBg +";text-align: center;display: flex;";
|
|
|
- let corner2=" width: 0;height: 0;position: relative;top: 0px;left: 0px;right: 0;margin: auto;border-bottom: 6px solid transparent;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid " + colorBg +" ;";
|
|
|
-
|
|
|
- let content = "<div style='" + station_icon2 + "'>";
|
|
|
- content+="<div style='width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid " + colorBg +";border-radius: 999px;background-color: #fff;color: " + colorBg +";' class='iconfont'>";
|
|
|
- content+="<div style='"+corner2+"'></div>";
|
|
|
- content+="</div>";
|
|
|
-
|
|
|
- content+="<div style='color: #ffffff;line-height: 14px;padding: 4px;font-size: 14px'>";
|
|
|
-
|
|
|
- content+="<div class=''>";
|
|
|
- // if(pos.price != null) {
|
|
|
- // content+= "¥" + pos.price.toString();
|
|
|
- // }
|
|
|
- // else
|
|
|
- if(pos.giveDiscount) {
|
|
|
- content+= "¥" + (pos.electricityPrice+pos.discountServicePrice).toFixed(2).toString();
|
|
|
- }
|
|
|
- else {
|
|
|
- content+= "¥" + (pos.electricityPrice+pos.servicePrice).toFixed(2).toString();
|
|
|
- }
|
|
|
-
|
|
|
- content+="</div>";
|
|
|
- content+="<div class=''>";
|
|
|
- // console.log(pos)
|
|
|
- if(pos.idleNum != null) {
|
|
|
- content+="空闲" + pos.idleNum.toString();
|
|
|
- }
|
|
|
- else if(pos.availableNum != null) {
|
|
|
- content+="空闲" + pos.availableNum.toString();
|
|
|
- } else {
|
|
|
- content+="空闲" + (pos.fastAvailableNum+pos.slowAvailableNum).toString();
|
|
|
- }
|
|
|
- content+="</div>"
|
|
|
- content+="</div>";
|
|
|
- content+="</div>";
|
|
|
-
|
|
|
-// //'找到充电桩[]'+content)
|
|
|
- //content = "<div style='height: 40px;width: 100px;display: flex;flex-direction: row; flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'> <div><img src='"+this.chargerSelectedIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF;'><div style='margin-left:10px'>¥"+ pos.price +"</div><div style='margin-left:10px'>空闲"+pos.idleNum + "</div> </div></div>";
|
|
|
- this.chargerList[index].info.selected = true;
|
|
|
- this.chargerList[index].marker.setContent(content);
|
|
|
- this.chargerList[index].marker.setzIndex(920);
|
|
|
- //this.chargerList[index].marker.z-Index=999
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- for(let i = 0;i < this.chargerList.length;i++){
|
|
|
- if(index == i)
|
|
|
- continue;
|
|
|
-
|
|
|
-
|
|
|
- if(this.chargerList[i].info.selected != null &&
|
|
|
- this.chargerList[i].info.selected)
|
|
|
- {
|
|
|
- if(this.chargerList[i].info.fastNum){
|
|
|
- colorBg = '#8486FF'
|
|
|
- }else if(this.chargerList[i].info.slowNum ){
|
|
|
- colorBg = '#00b962'
|
|
|
- }
|
|
|
-
|
|
|
- let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid " + colorBg +"; color: " + colorBg +"; border-radius: 999px;";
|
|
|
- let corner = "width: 0;height: 0;position: absolute;top: 37px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid " + colorBg +" ;";
|
|
|
- let content = "<div style='"+station_icon+";background-color: #fff;' ><text class='iconfont' ></text><div style='" + corner+"'></div></div>"
|
|
|
-
|
|
|
- //let content = "<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />";
|
|
|
- this.chargerList[i].marker.setContent(content);
|
|
|
- this.chargerList[i].info.selected = false;
|
|
|
- //'restore'+JSON.stringify(this.chargerList[i].info))
|
|
|
- this.chargerList[i].marker.setzIndex(900);
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- addCharger(pos) {
|
|
|
-
|
|
|
- let colorBg = '#00BAC8';
|
|
|
- //let colorBg = 'red';
|
|
|
- if(pos.fastNum){
|
|
|
- colorBg = '#8161FF'
|
|
|
- }else if(pos.slowNum){
|
|
|
- colorBg = '#00b962'
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-// //'添加充电桩'+JSON.stringify(pos))
|
|
|
- //let content = "<div style='height: 40px;width: 100px;display: flex;flex-direction: row; flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'> <div><img src='"+this.chargerIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF'><div>¥1.5</div><div>空闲10</div> </div></div>";
|
|
|
- let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid "+ colorBg+"; color: "+ colorBg+"; border-radius: 999px;";
|
|
|
- let corner = "width: 0;height: 0;position: absolute;top: 37px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid "+ colorBg+" ;";
|
|
|
- let content = "<div style='"+station_icon+";background:#fff;' ><text class='iconfont' ></text><div style='" + corner+"'></div></div>"
|
|
|
-
|
|
|
- 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(-13, -30),
|
|
|
- zIndex:900,
|
|
|
- autoRotation: true,
|
|
|
- });
|
|
|
- marker.setMap(this.mapcharger);
|
|
|
- this.myEmit("charger",marker,pos)
|
|
|
- this.chargerList.push({marker:marker,info:pos});
|
|
|
- },
|
|
|
- addPerson(pos) {
|
|
|
- //'addPerson'+JSON.stringify(pos))
|
|
|
- let content = "<div style='background-color: rgba(22, 119, 255, 100);text-align: center; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 100);border-radius: 999px;'>";
|
|
|
- content += "<div class='iconfont' style='color: #1677ff; font-size: 14px' ></div>";
|
|
|
- content += "</div>";
|
|
|
-
|
|
|
- let marker = new AMap.Marker({
|
|
|
- content: content,//"<div class='iconfont' style='color: #1677ff; font-size: 14px' ></div>",//<img src='"+this.personIcon+"' style='height: 40px;width: 40px' />",
|
|
|
- //content:"<div>xxxxxxxxxxxxxxxxxxxxxx</div>",
|
|
|
- //icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
|
- position: [pos.longitude,pos.latitude],
|
|
|
- offset: new AMap.Pixel(-13, -30),
|
|
|
- zIndex:900,
|
|
|
- autoRotation: true,
|
|
|
- });
|
|
|
- marker.setMap(this.mapcharger);
|
|
|
- this.myEmit("person",marker,pos)
|
|
|
- //this.chargerList.push(marker)
|
|
|
- },
|
|
|
- /*
|
|
|
- addPosition() {
|
|
|
- //'addPosition'+JSON.stringify(pos))
|
|
|
- let marker = new AMap.Marker({
|
|
|
- content: "<img src='"+this.positionIcon+"' 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, 220),
|
|
|
- zIndex:900,
|
|
|
- autoRotation: true,
|
|
|
- });
|
|
|
- marker.setMap(this.mapcharger);
|
|
|
- //this.myEmit("person",marker,pos)
|
|
|
- //this.chargerList.push(marker)
|
|
|
- },*/
|
|
|
- setChargerList(sz){
|
|
|
- if(this.AMap==null){
|
|
|
- return
|
|
|
- }
|
|
|
- //this.getLocation();
|
|
|
- for(var i in this.chargerList){
|
|
|
- if(this.chargerList[i].marker){
|
|
|
- this.chargerList[i].marker.setMap(null);
|
|
|
- }
|
|
|
- this.mapcharger.remove(this.chargerList[i]);
|
|
|
- }
|
|
|
-
|
|
|
- this.chargerList=[]
|
|
|
- for(var i in sz){
|
|
|
- var ob=sz[i];
|
|
|
- this.addCharger(ob);
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- 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;
|
|
|
- },
|
|
|
- checkCenter(item){
|
|
|
- let pos = this.mapcharger.getCenter();
|
|
|
- if(pos.lng == item.longitude && pos.lat == item.latitude){
|
|
|
- //'setCenter pos '+JSON.stringify(pos))
|
|
|
- //'setCenter item '+JSON.stringify(item))
|
|
|
- this.listenMove();
|
|
|
- }else{
|
|
|
- //'setCenter pos1 '+JSON.stringify(pos))
|
|
|
- //'setCenter item1 '+JSON.stringify(item))
|
|
|
- setTimeout(() => {
|
|
|
- this.checkCenter(item);
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- },
|
|
|
- setCenter(item){
|
|
|
-// this.enableMove(false);
|
|
|
-
|
|
|
- this.removeMove();
|
|
|
-// //'setCenter'+JSON.stringify(item))
|
|
|
- if(this.mapcharger){
|
|
|
- this.mapcharger.setCenter([item.longitude,item.latitude]);
|
|
|
- this.checkCenter(item);
|
|
|
-// this.listenMove();
|
|
|
-
|
|
|
-// this.enableMove(true);
|
|
|
- return true
|
|
|
- }else{
|
|
|
-// this.listenMove();
|
|
|
-// this.enableMove(true);
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- setPerson(ob,bl){
|
|
|
- //'setPerson1'+JSON.stringify(ob))
|
|
|
- if(this.AMap==null){
|
|
|
- return
|
|
|
- }
|
|
|
-// //'setPerson2')
|
|
|
-
|
|
|
- this.info.longitude=ob.longitude
|
|
|
- this.info.latitude=ob.latitude
|
|
|
- if(!this.info.ob){
|
|
|
- this.addPerson(ob)
|
|
|
-
|
|
|
-
|
|
|
- //this.info.ob.setMap(this.mapcharger);
|
|
|
- ////'setMap xxx ')
|
|
|
- //this.mapbus.setCenter([this.info.longitude,this.info.latitude]); //设置地图中心点
|
|
|
- if(!bl){
|
|
|
- let posCenter= [ this.info.longitude,this.info.latitude];
|
|
|
-// //'center'+JSON.stringify(posCenter))
|
|
|
- //this.mapcharger.setZoom(9)
|
|
|
- //this.mapcharger.setCenter([112.28541,30.308354])
|
|
|
- //this.mapcharger.setCenter([121.504919,31.351083])
|
|
|
- this.mapcharger.setCenter(posCenter); //设置地图中心点
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }else{
|
|
|
- // this.info.ob.setPosition( [this.info.longitude,this.info.latitude]);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- 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;
|
|
|
-// //'init')
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- MapLoader().then(AMap => {
|
|
|
-
|
|
|
- this.AMap=AMap;
|
|
|
- _this.mapcharger && _this.mapcharger.destroy();
|
|
|
- //使用地图容器ID创建
|
|
|
- _this.mapcharger=new AMap.Map("container", {
|
|
|
- resizeEnable: true,
|
|
|
- dragEnable : true,
|
|
|
- center: [this.longitude, this.latitude],
|
|
|
- zoom: 13
|
|
|
- });
|
|
|
-
|
|
|
- //_this.mapcharger.setMapStyle('amap://styles/macaron');
|
|
|
- _this.mapcharger.setMapStyle('amap://styles/f9b17f73bb4576ab1894c29fe9d03c6c');
|
|
|
-
|
|
|
- /*
|
|
|
- new SimpleMarker({
|
|
|
- iconLabel: '2',
|
|
|
- //自定义图标节点(img)的属性
|
|
|
- iconStyle: {
|
|
|
-
|
|
|
- src: '@/static/img/location.png',
|
|
|
- style: {
|
|
|
- width: '20px',
|
|
|
- height: '30px'
|
|
|
- }
|
|
|
- },
|
|
|
- //设置基点偏移
|
|
|
- offset: new AMap.Pixel(-10, -30),
|
|
|
-
|
|
|
- map: map,
|
|
|
- showPositionPoint: true,
|
|
|
- position: lngLats[1],
|
|
|
- zIndex: 200
|
|
|
- });
|
|
|
-*/
|
|
|
- /*
|
|
|
- _this.mapcharger.plugin('AMap.Geolocation', function () {
|
|
|
- var geolocation = new AMap.Geolocation({
|
|
|
- enableHighAccuracy: true,
|
|
|
- timeout: 10000,
|
|
|
- buttonOffset: new AMap.Pixel(10, 220),
|
|
|
- zoomToAccuracy: true,
|
|
|
- buttonPosition: 'RB'
|
|
|
- });
|
|
|
- _this.mapcharger.center = geolocation;
|
|
|
- _this.mapcharger.addControl(geolocation);//地图控件右下角显示当前位置
|
|
|
- });
|
|
|
-
|
|
|
- _this.mapcharger.plugin(["AMap.ToolBar"],function(){
|
|
|
- //加载工具条
|
|
|
- var tool = new AMap.ToolBar({
|
|
|
- locate:true,
|
|
|
- direction:false,
|
|
|
- ruler:false,
|
|
|
- liteStyle:true,
|
|
|
- useNative:true,
|
|
|
-// autoPosition:true,
|
|
|
-// locationMarker:
|
|
|
- });
|
|
|
- _this.mapcharger.addControl(tool);
|
|
|
- });*/
|
|
|
- /*
|
|
|
- _this.mapcharger.plugin(["AMap.ControlBar"],function(){
|
|
|
- var controlBar = new AMap.ControlBar({
|
|
|
- showZoomBar:true,
|
|
|
- showControlButton:true,
|
|
|
- position:{top:'10px',right:'10px'}
|
|
|
- })
|
|
|
- _this.mapcharger.addControl(controlBar)
|
|
|
- });*/
|
|
|
- var clickHandler = function(e) {
|
|
|
- _this.$emit('onClicked',e);
|
|
|
- //'您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图!');
|
|
|
- };
|
|
|
-
|
|
|
- /*
|
|
|
- var mapMovestart = function(){
|
|
|
- //'movestart')
|
|
|
- }
|
|
|
- var mapMove = function(){
|
|
|
- ////'mapMove')
|
|
|
- }
|
|
|
- var mapMoveend = function(){
|
|
|
- let pos = _this.logMapInfo();
|
|
|
-
|
|
|
- _this.$emit('onMoveEnd',pos);
|
|
|
- // //'mapMoveend')
|
|
|
- }
|
|
|
- _this.mapMovestart = mapMovestart;
|
|
|
- _this.mapMove = mapMove;
|
|
|
- _this.mapMoveend = mapMoveend;
|
|
|
- */
|
|
|
- _this.mapcharger.on('click', clickHandler);
|
|
|
- _this.$emit('onload')
|
|
|
- //_this.addPosition();
|
|
|
- _this.listenMove();
|
|
|
-
|
|
|
- }, e => {
|
|
|
- //_this.mui.toast('地图加载失败');
|
|
|
- //'地图加载失败', e)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- removeMove(){
|
|
|
- var _this = this;
|
|
|
- //this.enabledMove = false;
|
|
|
- _this.mapcharger.off('movestart', mapMovestart);
|
|
|
- _this.mapcharger.off('mapmove', mapMove);
|
|
|
- _this.mapcharger.off('moveend', mapMoveend);
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- enableMove(enable){
|
|
|
- this.enabledMove = enable;
|
|
|
- },
|
|
|
- listenMove(){
|
|
|
- var _this = this;
|
|
|
- /*var mapMovestart = function(){
|
|
|
- if(!_this.enabledMove)
|
|
|
- return;
|
|
|
- //'movestart')
|
|
|
- }
|
|
|
- var mapMove = function(){
|
|
|
- if(!_this.enabledMove)
|
|
|
- return;
|
|
|
- ////'mapMove')
|
|
|
- }
|
|
|
- var mapMoveend = function(){
|
|
|
- let pos = _this.logMapInfo();
|
|
|
- if(!_this.enabledMove)
|
|
|
- return;
|
|
|
- _this.$emit('onMoveEnd',pos);
|
|
|
- }*/
|
|
|
-// //'listenMove')
|
|
|
- _this.mapcharger.on('movestart', mapMovestart);
|
|
|
- _this.mapcharger.on('mapmove', mapMove);
|
|
|
- _this.mapcharger.on('moveend',mapMoveend);
|
|
|
-
|
|
|
- },
|
|
|
- navigate(startLngLat,endLngLat){
|
|
|
- //'start'+JSON.stringify(startLngLat))
|
|
|
- //'end'+JSON.stringify(endLngLat))
|
|
|
- AMap.plugin('AMap.Driving', function() {
|
|
|
- var driving = new AMap.Driving({
|
|
|
- // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
|
|
- policy: AMap.DrivingPolicy.LEAST_TIME
|
|
|
- })
|
|
|
-
|
|
|
- // var startLngLat = [116.379028, 39.865042]
|
|
|
- // var endLngLat = [116.427281, 39.903719]
|
|
|
-
|
|
|
- driving.search(startLngLat, endLngLat, function (status, result) {
|
|
|
- //'status'+JSON.stringify(result))
|
|
|
- // 未出错时,result即是对应的路线规划方案
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- initMap(point,stationList,startend){
|
|
|
- //'初始化地图'+this.longitude+this.latitude)
|
|
|
- var _this = this;
|
|
|
- this.covers=point;
|
|
|
- this.startend=startend;
|
|
|
- MapLoader().then(AMap => {
|
|
|
-
|
|
|
- this.AMap=AMap;
|
|
|
- _this.mapcharger && _this.mapcharger.destroy();
|
|
|
-
|
|
|
- _this.mapcharger=new AMap.Map("container", {
|
|
|
- resizeEnable: true,
|
|
|
- center: [this.longitude, this.latitude],
|
|
|
- //center: [116.397428, 39.90923],
|
|
|
- zoom: 14
|
|
|
- });
|
|
|
- var lineArr=[]
|
|
|
-
|
|
|
-
|
|
|
- this.$emit('onload')
|
|
|
- }, e => {
|
|
|
- //_this.mui.toast('地图加载失败');
|
|
|
- //'地图加载失败', e)
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-/*去除下标*/
|
|
|
-.amap-logo{
|
|
|
-display: none;
|
|
|
-}
|
|
|
-.amap-copyright{
|
|
|
-opacity:0;
|
|
|
- font-size: 1px;
|
|
|
-}
|
|
|
-
|
|
|
-.input-card {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-width: 0;
|
|
|
- word-wrap: break-word;
|
|
|
- background-color: #fff;
|
|
|
- background-clip: border-box;
|
|
|
- border-radius: .25rem;
|
|
|
- width: 22rem;
|
|
|
- border-width: 0;
|
|
|
- border-radius: 0.4rem;
|
|
|
- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
|
|
|
- position: fixed;
|
|
|
- bottom: 1rem;
|
|
|
- right: 1rem;
|
|
|
- -ms-flex: 1 1 auto;
|
|
|
- flex: 1 1 auto;
|
|
|
- padding: 0.75rem 0.75rem;
|
|
|
-}
|
|
|
-
|
|
|
-.station-icon {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(133, 140, 255, 100);
|
|
|
- color: #b58cff;
|
|
|
- border-radius: 999px;
|
|
|
- position: absolute;
|
|
|
- top: 89px;
|
|
|
- left: 38px;
|
|
|
-
|
|
|
-}
|
|
|
-.corner{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- position: absolute;
|
|
|
- top: 34px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- border-bottom: 4px solid transparent;
|
|
|
- border-left: 4px solid transparent;
|
|
|
- border-right: 4px solid transparent;
|
|
|
- border-top: 6px solid #b58cff ;
|
|
|
- }
|
|
|
-.station-icon2 {
|
|
|
- width: 100px;
|
|
|
- height: 36px;
|
|
|
- line-height: 20px;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- top: 191px;
|
|
|
- left: 168px;
|
|
|
-
|
|
|
-}
|
|
|
-.icon2-left{
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(0, 185, 98, 100);
|
|
|
- border-radius: 999px;
|
|
|
- background-color: #fff;
|
|
|
- color: #00b962;
|
|
|
-}
|
|
|
-.icon2-right{
|
|
|
- color: #ffffff;
|
|
|
- line-height: 14px;
|
|
|
- padding: 4px;
|
|
|
-}
|
|
|
-.corner2{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- position: absolute;
|
|
|
- top: 36px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- border-bottom: 6px solid transparent;
|
|
|
- border-left: 6px solid transparent;
|
|
|
- border-right: 6px solid transparent;
|
|
|
- border-top: 8px solid #00b962 ;
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|