edit
This commit is contained in:
@ -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>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
:host::ng-deep {
|
||||||
|
p.my-desc {
|
||||||
|
max-width : 300px;
|
||||||
|
margin : 5px 0;
|
||||||
|
line-height: 150%;
|
||||||
|
padding : 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<p>etc-blacklist works!</p>
|
<amap-path-simplifier></amap-path-simplifier>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
|
||||||
@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
:host::ng-deep {
|
||||||
|
p.my-desc {
|
||||||
|
max-width : 300px;
|
||||||
|
margin : 5px 0;
|
||||||
|
line-height: 150%;
|
||||||
|
padding : 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/app/shared/components/amap/amap.module.ts
Normal file
14
src/app/shared/components/amap/amap.module.ts
Normal 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 {}
|
||||||
9
src/app/shared/components/amap/amap.service.ts
Normal file
9
src/app/shared/components/amap/amap.service.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class AmapService {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
}
|
||||||
4
src/app/shared/components/amap/index.ts
Normal file
4
src/app/shared/components/amap/index.ts
Normal 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';
|
||||||
@ -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';
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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> -->
|
||||||
Reference in New Issue
Block a user