Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2021-12-20 09:34:46 +08:00
parent 4e29393386
commit 46fb4d51e8
6 changed files with 0 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/routes/order-management/components/gaode-map/gaode-map.component.html
View File

@ -1,6 +0,0 @@
<div nz-row style="margin-bottom: 24px">
<div nz-col nzSpan="8">
<input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
</div>
</div>
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>

65
src/app/routes/order-management/components/gaode-map/gaode-map.component.ts
View File

@ -1,65 +0,0 @@
import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { load } from '@amap/amap-jsapi-loader';
import { BaseService } from 'src/app/shared/services';
import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
@Component({
selector: 'app-gaode-map',
templateUrl: './gaode-map.component.html'
})
export class GaodeMapComponent implements OnInit, OnDestroy {
addressInput: any;
aMap: any;
constructor(private service: BaseService) {}
ngOnInit(): void {
this.mapInit();
// this.PoiPicker();
}
ngOnDestroy(): void {
if (this.aMap) {
this.aMap.destroy();
}
}
mapInit() {
AMapLoader.load({
// 首次调用 load
key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
'AMap.Scale',
'AMap.ToolBar',
'AMap.MapType',
'AMap.Driving',
'AMap.Geolocation'
],
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: '1.1', // AMapUI 缺省 1.1
plugins: [] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca， 缺省不加载
version: '2.0' // Loca 版本，缺省 1.3.2
}
})
.then(AMap => {
console.log(AMap);
this.aMap = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom: 16
});
this.aMap.on('complete', () => {
this.service.msgSrv.info('地图加载完成 !');
});
})
.catch(e => {
throwError(e);
});
}
}

6
src/app/routes/supply-management/components/gaode-map/gaode-map.component.html
View File

@ -1,6 +0,0 @@
<div nz-row class="mb-xl">
<div nz-col nzSpan="8">
<input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
</div>
</div>
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>

8
src/app/routes/supply-management/components/gaode-map/gaode-map.component.less
View File

@ -1,8 +0,0 @@
:host::ng-deep {
p.my-desc {
max-width : 300px;
margin : 5px 0;
line-height: 150%;
padding : 12px;
}
}

181
src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts
View File

@ -1,181 +0,0 @@
import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { load } from '@amap/amap-jsapi-loader';
import { BaseService } from 'src/app/shared/services';
import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
declare var AMap: any;
declare var AMapUI: any;
@Component({
selector: 'app-gaode-map',
styleUrls: ['./gaode-map.component.less'],
templateUrl: './gaode-map.component.html'
})
export class GaodeMapComponent implements OnInit, OnDestroy {
@ViewChild('modal')
modal: any;
addressInput: any;
aMap: any;
constructor(private service: BaseService) {}
ngOnInit(): void {
this.mapInit();
// this.PoiPicker();
}
ngOnDestroy(): void {
if (this.aMap) {
this.aMap.destroy();
}
}
mapInit() {
console.log(AMapLoader);
AMapLoader.load({
// 首次调用 load
key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
'AMap.SimpleMarker',
'AMap.PoiPicker',
'AMap.Scale',
'AMap.Marker',
'AMap.InfoWindow',
'AMap.ToolBar',
'AMap.MapType',
'AMap.Driving',
'AMap.Geolocation'
],
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: '1.1', // AMapUI 缺省 1.1
plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca， 缺省不加载
version: '2.0' // Loca 版本，缺省 1.3.2
}
})
.then(AMap => {
console.log(AMap);
var poiPicker = new AMapUI.PoiPicker({
//city:'北京',
input: 'pickerInput'
});
console.log(poiPicker);
this.aMap = new AMap.Map('container', {
resizeEnable: true,
zoom: 16
});
console.log(this.aMap);
this.aMap.on('complete', () => {
this.service.msgSrv.info('地图加载完成 !');
this.poiPickerReady(poiPicker);
// new AMapUI.SimpleMarker({
// //前景文字
// iconLabel: 'A',
// //图标主题
// iconTheme: 'default',
// //背景图标样式
// iconStyle: 'red',
// map: this.aMap,
// position: this.aMap.getCenter()
// });
});
})
.catch(e => {
throwError(e);
});
}
poiPickerReady(poiPicker: any) {
(window as any).poiPicker = poiPicker;
const map = this.aMap;
const _this = this;
var marker = new AMapUI.SimpleMarker();
console.log(marker);
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
console.log(infoWindow);
//选取了某个POI
poiPicker.on('poiPicked', function (poiResult: any) {
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
console.log(poi);
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(function () {
poiPicker.suggest('美食');
});
}
createInfoWindow(title: any, content: any) {
var info = document.createElement('div');
info.className = 'custom-info input-card content-window-card';
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement('div');
var titleD = document.createElement('div');
var closeX = document.createElement('img');
top.className = 'info-top';
titleD.innerHTML = title;
closeX.src = 'https://webapi.amap.com/images/close2.gif';
closeX.onclick = this.closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement('div');
middle.className = 'info-middle';
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement('div');
bottom.className = 'info-bottom';
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement('img');
sharp.src = 'https://webapi.amap.com/images/sharp.png';
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
closeInfoWindow() {
this.aMap.clearInfoWindow();
}
}

2
src/app/routes/supply-management/supply-management.module.ts
View File

@ -21,7 +21,6 @@ import { SupplyManagementBulkDetailComponent } from './components/bulk-detail/bu
import { SupplyManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component';
import { SupplyManagementAddDriversComponent } from './components/add-drivers/add-drivers.component';
import { SupplyManagementOnecarPublishComponent } from './components/onecar-publish/onecar-publish.component';
import { GaodeMapComponent } from './components/gaode-map/gaode-map.component';
import { PublishGoodsChooseFamifiarComponent } from './components/choose-famifiar/choose-famifiar.component';
import { PublishchooseFamifiarSetCaptainComponent } from './components/choose-famifiar/set-captain/set-captain.component';
import { PublishchooseFamifiarAddComponent } from './components/choose-famifiar/add/add.component';
@ -42,7 +41,6 @@ const COMPONENTS: Type<void>[] = [
SupplyManagementVehicleDetailComponent,
SupplyManagementAddDriversComponent,
SupplyManagementOnecarPublishComponent,
GaodeMapComponent,
PublishGoodsChooseFamifiarComponent,
PublishchooseFamifiarSetCaptainComponent,
PublishchooseFamifiarAddComponent,