This commit is contained in:
Taric Xin
2021-12-07 13:25:52 +08:00
parent 34c9809e3e
commit 485686c4ab
18 changed files with 639 additions and 21 deletions

View File

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

View File

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

View File

@ -1,15 +1,19 @@
import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core'; import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme'; import { _HttpClient } from '@delon/theme';
import { load } from '@amap/amap-jsapi-loader'; import { load } from '@amap/amap-jsapi-loader';
import { BaseService } from 'src/app/shared/services'; import { BaseService } from 'src/app/shared/services';
import { throwError } from 'rxjs'; import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader'; import AMapLoader from '@amap/amap-jsapi-loader';
declare var AMap: any;
declare var AMapUI: any; declare var AMapUI: any;
@Component({ @Component({
selector: 'app-gaode-map', selector: 'app-gaode-map',
styleUrls: ['./gaode-map.component.less'],
templateUrl: './gaode-map.component.html' templateUrl: './gaode-map.component.html'
}) })
export class GaodeMapComponent implements OnInit, OnDestroy { export class GaodeMapComponent implements OnInit, OnDestroy {
@ViewChild('modal')
modal: any;
addressInput: any; addressInput: any;
aMap: any; aMap: any;
@ -35,7 +39,10 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
plugins: [ plugins: [
// 需要使用的的插件列表,如比例尺'AMap.Scale'等 // 需要使用的的插件列表,如比例尺'AMap.Scale'等
'AMap.SimpleMarker', 'AMap.SimpleMarker',
'AMap.PoiPicker',
'AMap.Scale', 'AMap.Scale',
'AMap.Marker',
'AMap.InfoWindow',
'AMap.ToolBar', 'AMap.ToolBar',
'AMap.MapType', 'AMap.MapType',
'AMap.Driving', 'AMap.Driving',
@ -44,7 +51,7 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
AMapUI: { AMapUI: {
// 是否加载 AMapUI缺省不加载 // 是否加载 AMapUI缺省不加载
version: '1.1', // AMapUI 缺省 1.1 version: '1.1', // AMapUI 缺省 1.1
plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件 plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
}, },
Loca: { Loca: {
// 是否加载 Loca 缺省不加载 // 是否加载 Loca 缺省不加载
@ -54,25 +61,121 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
.then(AMap => { .then(AMap => {
console.log(AMap); console.log(AMap);
this.aMap = new AMap.Map('container'); 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); console.log(this.aMap);
this.aMap.on('complete', () => { this.aMap.on('complete', () => {
this.service.msgSrv.info('地图加载完成 !'); this.service.msgSrv.info('地图加载完成 !');
new AMapUI.SimpleMarker({ this.poiPickerReady(poiPicker);
//前景文字 // new AMapUI.SimpleMarker({
iconLabel: 'A', // //前景文字
//图标主题 // iconLabel: 'A',
iconTheme: 'default', // //图标主题
//背景图标样式 // iconTheme: 'default',
iconStyle: 'red', // //背景图标样式
map: this.aMap, // iconStyle: 'red',
position: this.aMap.getCenter() // map: this.aMap,
}); // position: this.aMap.getCenter()
// });
}); });
}) })
.catch(e => { .catch(e => {
throwError(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();
}
} }

View File

@ -11,6 +11,7 @@ import {
SFUISchema SFUISchema
} from '@delon/form'; } from '@delon/form';
import { _HttpClient } from '@delon/theme'; import { _HttpClient } from '@delon/theme';
import { AmapPoiPickerComponent } from '@shared';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'; import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component'; import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component';
@ -489,8 +490,8 @@ export class SupplyManagementOnecarPublishComponent implements OnInit {
openMap() { openMap() {
this.modalService.create({ this.modalService.create({
nzTitle: '', nzTitle: '',
nzContent: GaodeMapComponent, nzContent: AmapPoiPickerComponent,
nzWidth: 1200 nzWidth: 848
}); });
} }
} }

View File

@ -1 +1 @@
<p>etc-blacklist works!</p> <amap-path-simplifier></amap-path-simplifier>

View File

@ -0,0 +1 @@
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AmapPathSimplifierComponent } from './amap-path-simplifier.component';
describe('AmapPathSimplifierComponent', () => {
let component: AmapPathSimplifierComponent;
let fixture: ComponentFixture<AmapPathSimplifierComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AmapPathSimplifierComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AmapPathSimplifierComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,256 @@
import { Component, OnInit, ViewChild } from '@angular/core';
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;
declare var Loca: any;
@Component({
selector: 'amap-path-simplifier',
templateUrl: './amap-path-simplifier.component.html',
styleUrls: ['./amap-path-simplifier.component.less']
})
export class AmapPathSimplifierComponent implements OnInit {
@ViewChild('modal')
modal: any;
addressInput: any;
aMap: any;
pathList = [
{
name: '路线0',
points: [
{
name: '点a',
lnglat: [116.405289, 39.904987]
},
{
name: '点b',
lnglat: [113.964458, 40.54664]
},
{
name: '点c',
lnglat: [111.47836, 41.135964]
},
{
name: '点d',
lnglat: [108.949297, 41.670904]
},
{
name: '点e',
lnglat: [106.380111, 42.149509]
},
{
name: '点f',
lnglat: [103.774185, 42.56996]
},
{
name: '点g',
lnglat: [101.135432, 42.930601]
},
{
name: '点h',
lnglat: [98.46826, 43.229964]
},
{
name: '点i',
lnglat: [95.777529, 43.466798]
},
{
name: '点j',
lnglat: [93.068486, 43.64009]
},
{
name: '点k',
lnglat: [90.34669, 43.749086]
},
{
name: '点l',
lnglat: [87.61792, 43.793308]
}
]
}
];
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.PathSimplifier',
'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/PathSimplifier'] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca 缺省不加载
version: '2.0' // Loca 版本,缺省 1.3.2
}
})
.then(AMap => {
console.log(AMap);
this.aMap = new AMap.Map('container', {
resizeEnable: true,
zoom: 16
});
console.log(this.aMap);
this.aMap.on('complete', () => {
this.service.msgSrv.info('地图加载完成 !');
var pathSimplifierIns = new AMapUI.PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: this.aMap, //所属的地图实例
getPath: function (pathData: any, pathIndex: any) {
var points = pathData.points,
lnglatList = [];
for (var i = 0, len = points.length; i < len; i++) {
lnglatList.push(points[i].lnglat);
}
return lnglatList;
},
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
if (pointIndex >= 0) {
//point
return pathData.name + '' + pathData.points[pointIndex].name;
}
return pathData.name + ',点数量' + pathData.points.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1
}
});
(window as any).pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData(this.pathList);
pathSimplifierIns.setSelectedPathIndex(0);
pathSimplifierIns.on('pointClick', function (e: any, info: any) {
console.log('Click: ' + info.pathData.points[info.pointIndex].name);
});
});
})
.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();
}
}

View File

@ -0,0 +1,6 @@
<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>

View File

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

View File

@ -0,0 +1,180 @@
import { Component, OnInit, ViewChild } from '@angular/core';
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: 'amap-poi-picker',
templateUrl: './amap-poi-picker.component.html',
styleUrls: ['./amap-poi-picker.component.less']
})
export class AmapPoiPickerComponent implements OnInit {
@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();
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AmapPoiPickerComponent } from './amap-poi-picker/amap-poi-picker.component';
import { FormsModule } from '@angular/forms';
import { AmapPathSimplifierComponent } from './amap-path-simplifier/amap-path-simplifier.component';
const COMPONENTS = [AmapPoiPickerComponent, AmapPathSimplifierComponent];
@NgModule({
declarations: COMPONENTS,
imports: [CommonModule, FormsModule],
exports: COMPONENTS
})
export class AmapModule {}

View File

@ -0,0 +1,9 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AmapService {
constructor() { }
}

View File

@ -0,0 +1,4 @@
export * from './amap.module';
export * from './amap.service';
export * from './amap-poi-picker/amap-poi-picker.component';
export * from './amap-path-simplifier/amap-path-simplifier.component';

View File

@ -16,6 +16,7 @@ export * from './components/status-label/index';
export * from './components/scrollbar/index'; export * from './components/scrollbar/index';
export * from './components/address/index'; export * from './components/address/index';
export * from './components/captcha/index'; export * from './components/captcha/index';
export * from './components/amap/index';
// Utils // Utils
export * from './utils'; export * from './utils';

View File

@ -27,6 +27,7 @@ import { ScrollbarModule } from './components/scrollbar';
import { StatusLabelModule } from './components/status-label'; import { StatusLabelModule } from './components/status-label';
import { SharedThirdModule } from './shared-third.module'; import { SharedThirdModule } from './shared-third.module';
import { LogisticsTimeLineComponent } from './components/logistics-time-line/logistics-time-line.component'; import { LogisticsTimeLineComponent } from './components/logistics-time-line/logistics-time-line.component';
import { AmapModule } from './components/amap/amap.module';
const MODULES = [ const MODULES = [
AddressModule, AddressModule,
@ -38,6 +39,7 @@ const MODULES = [
ScrollbarModule, ScrollbarModule,
StatusLabelModule, StatusLabelModule,
SharedThirdModule, SharedThirdModule,
AmapModule,
...PRO_SHARED_MODULES ...PRO_SHARED_MODULES
]; ];
// #endregion // #endregion

View File

@ -57,10 +57,10 @@
</body> </body>
</html> </html>
<!-- <script type="text/javascript"> <script type="text/javascript">
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: 'dde4610c3bd04617b99fb55ba5adbe9d', securityJsCode: 'dde4610c3bd04617b99fb55ba5adbe9d',
} }
</script> </script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script> <!-- <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> --> <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> -->