1、先上效果图。
参考地址：/demo/amap-ui/demos/amap-ui-positionpicker/position-picker
2、在index.html中引入高德地图API
<script src="/maps?v=1.4.3&key=您的key&plugin=AMap.PlaceSearch"></script><script src="/ui/1.0/main.js?v=1.0.11"></script>
key在高德地图开放平台中申请
3、创建angular地图组件并在其他组件使用进行双向传值
创建com-address地图组件
html代码：
<!DOCTYPE html><html lang="zh-CN"><head><base href="///ui/1.1/ui/misc/PositionPicker/examples/" /><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /><title>拖拽选址</title><style>html,body {height: 400px;margin: 0;width: 850px;padding: 0;overflow: hidden;font-size: 13px;}.map {height: 100%;width: 60%;float: left;}#right {color: #444;background-color: #f8f8f8;width: 40%;float: left;height: 100%;}#start,#stop,#right input {margin: 4px;margin-left: 15px;}.title {width: 100%;background-color: #dadada;}button {border: solid 1px;margin-left: 15px;background-color: #dadafa;}.c {font-weight: 600;padding-left: 15px;padding-top: 4px;}#lnglat,#address,#nearestJunction,.title {padding-left: 15px;}</style></head><body><div id="container" class="map" tabindex="0"></div><div id="right"><div><div class="title">选择模式</div><input type="radio" name="mode" value="dragMap" checked />拖拽地图模式<input type="radio" name="mode" value="dragMarker" />拖拽Marker模式</div><div><button id="start">开始选点</button><button id="stop">关闭选点</button></div><div><div class="title">选址结果</div><div class="c">经纬度:</div><div id="lnglat"></div><div class="c">地址:</div><div id="address"></div><div class="c">最近的路口:</div><div id="nearestJunction"></div></div></div></body></html>
ts代码：
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';declare var AMapUI: any;declare var AMap: any;@Component({selector: 'app-com-address',templateUrl: './com-ponent.html',})export class ComAddressComponent implements OnInit {@Input() latitude: any;@Output() latitudeChange = new EventEmitter<any>();@Input() longitude: any;@Output() longitudeChange = new EventEmitter<any>();@Input() address: any;@Output() addressChange = new EventEmitter<any>();map = null;constructor() {}ngOnInit(): void {this.initMap();}initMap(): any {AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {this.map = new AMap.Map('container', {zoom: 16,scrollWheel: false,});var positionPicker = new PositionPicker({mode: 'dragMap',map: this.map,});positionPicker.on('success', (positionResult) => { // 成功document.getElementById('lnglat').innerHTML = positionResult.position;document.getElementById('address').innerHTML = positionResult.address;document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;this.latitude = positionResult.position.lat; // 获取纬度this.longitude = positionResult.position.lng; // 获取经度this.address = positionResult.address; // 获取地址this.latitudeChange.emit(this.latitude); // 双向绑定传值this.longitudeChange.emit(this.longitude);this.addressChange.emit(this.address);});positionPicker.on('fail', (positionResult) => {document.getElementById('lnglat').innerHTML = ' ';document.getElementById('address').innerHTML = ' ';document.getElementById('nearestJunction').innerHTML = ' ';});var onModeChange = (e) => {positionPicker.setMode(e.target.value);};var startButton = document.getElementById('start');var stopButton = document.getElementById('stop');var dragMapMode = document.getElementsByName('mode')[0];var dragMarkerMode = document.getElementsByName('mode')[1];startButton.addEventListener('click', () => {positionPicker.start(this.map.getBounds().getSouthWest());});stopButton.addEventListener('click', () => {positionPicker.stop();});dragMapMode.addEventListener('change', onModeChange);dragMarkerMode.addEventListener('change', onModeChange);positionPicker.start();this.map.panBy(0, 1);this.map.addControl(new AMap.ToolBar({liteStyle: true,}),);});}}
创建编辑组件com-edit并使用到地图组件
这里我只传输了三个值（地点、经度、纬度）
html代码
<label style="margin-left: 30px">地点：</label><input nz-input value="{{ aaddress }}" [(ngModel)]="aaddress" style="width: 700px" /> // 双向传递 在文本框中显示地点<div style="width: 850px; height: 400px; margin-left: 10px"><app-com-address [(address)]="aaddress" [(latitude)]="latitudee" [(longitude)]="longitudee"></app-com-address></div>
ts代码
// 定义三个参数 latitudee: any;longitudee: any;aaddress: any;// save方法save(item: any) { // item：保存的对象address = this.aaddress; // 将值赋给对象的字段lat = this.latitudee;lng = this.longitudee;}
