美文网首页
ionic3使用高德地图实现拖拽选址

ionic3使用高德地图实现拖拽选址

作者: 一脚门万 | 来源:发表于2018-12-29 16:02 被阅读0次

高德地图拖拽选址官方文档: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);
    });
    }
  }

相关文章

网友评论

      本文标题:ionic3使用高德地图实现拖拽选址

      本文链接:https://www.haomeiwen.com/subject/dfqplqtx.html