高德地图拖拽选址官方文档:https://lbs.amap.com/api/amap-ui/demos/amap-ui-positionpicker/position-picker/
一、申请注册高德地图账号,新建应用,申请js api,拿到key
二、index.html引入高德js(在build/polyfills.js之前引入,不然可能会找不到地图对象)
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.10&key=您的key&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
三、地图容器的div
<div class="mains">
<div id="map_container" #map_container class="map_container" tabindex="0" style="height: 50vh;"></div>
<div>{{street}}</div>
<div>{{mapAddress}}</div>
</div>
三、home.ts
import { Component ,NgZone} from '@angular/core';
import { NavController } from 'ionic-angular';
declare var AMapUI;
declare var AMap;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
street:string = ''
mapAddress:string = ''
longitude //经度
latitude //维度
constructor(
public navCtrl: NavController,
private zone:NgZone
) {}
ionViewDidLoad(){
this.longitude = 116.511472
this.latitude = 39.794923
this.getMap()
}
getMap(){
let vm = this
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var map = new AMap.Map('map_container', {
zoom: 16,
scrollWheel: false,
resizeEnable: true,
center: [vm.longitude, vm.latitude],
})
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map,
iconStyle:{//自定义外观
url:'xxx.png',//图片地址
size:[40,40], //要显示的点大小,将缩放图片
ancher:[24,40],//锚点的位置,即被size缩放之后,图片的什么位置作为选中的位置
}
});
positionPicker.on('success', function(positionResult) {
console.log(positionResult)
vm.zone.run(() => {
//更新界面数据
vm.longitude = positionResult.position.lng
vm.latitude = positionResult.position.lat
vm.street = positionResult.nearestPOI
vm.mapAddress = positionResult.address
});
});
positionPicker.on('fail', function(positionResult) {
alert('位置错误' + positionResult)
console.log(positionResult)
});
positionPicker.start(map.getBounds().getSouthWest())
positionPicker.start();
map.panBy(0, 1);
});
}
}