ionic2+实战高德地图实现简单的定位

ionic2+实战高德地图实现简单的定位

---

前言

• 去 [这里]注册成为高德个人开发者并登录高德开放平台
• 高德地图API有web端、Android平台、IOS平台，本博文主要是JavaScript API为示例
• 使用高德地图实现更多功能可以自己上 [高德地图]查阅

申请key

注册成为高德个人开发者后，申请javaScript API(JavaScript API入门指南)紧接着打开控制台创建一个应用如下图：

创建一个应用

添加web端key

生成key

加载地图

1. 复制此代码到index.html页面的head标签中,如下图

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=自己的key&plugin=AMap.Geocoder">script>

1. 创建地图容器

<ion-input (ngModelChange)="loadMap()"[(ngModel)]="markerAddress">
ion-input>
<div id="map" style="width: 100%;height: 120px;">div>

1. 地图对象

//声明
declare const AMap: any;

ngOnInit() {
    this.loadMap();
  }

loadMap() {
    //初始化地图
    let that = this;
    that.map = new AMap.Map('map', {
      zoom: 14,//缩放等级
      resizeEnable: true,//可否改变大小
    });
    that.map.plugin(['AMap.ToolBar', 'AMap.Scale'],function () {
      that.map.addControl(new AMap.ToolBar());//缩放工具
      that.map.addControl(new AMap.Scale());//标尺
    });
  }

定位

1. 输入地址自动搜索定位；
2. 定位之后可点击地图更改地址；
3. 地图用infoWindow显示地址

 function geocoder() {
      AMap.plugin('AMap.Geocoder', function () {
        let geocoder = new AMap.Geocoder({
          radius: 1000 //范围，默认：500
        });
        geocoder.getLocation(that.markerAddress, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            geocoder_CallBack(result);
          }
        });

        //为了点击地图更换地址
        that.map.on('click',function(e){
          that.marker.setPosition(e.lnglat);
          geocoder.getAddress(e.lnglat,function(status,result){
            if(status=='complete'){
              that.markerAddress = result.regeocode.formattedAddress;
              that.infoWindow = new AMap.InfoWindow({
                content: that.markerAddress,
                offset: {x: 0, y: -30}
              });
              that.infoWindow.open(that.map, that.marker.getPosition());
            }
          })
        })
      })

    }

    function addMarker(i, d) {
      that.marker = new AMap.Marker({
        map: that.map,
        position: [d.location.getLng(), d.location.getLat()]
      });
      //地图上展示地址
      that.infoWindow = new AMap.InfoWindow({
        content: d.formattedAddress,
        offset: {x: 0, y: -30}
      });
      that.infoWindow.open(that.map, that.marker.getPosition());
      that.marker.setMap(that.map);
      that.marker.setAnimation('AMAP_ANIMATION_BOUNCE');//气泡动画
    }

    //地理编码返回结果展示
    function geocoder_CallBack(data) {
      let resultStr = "";
      //地理编码结果数组
      let geocode = data.geocodes;
      for (let i = 0; i < geocode.length; i++) {
        //可以拼接输出
        resultStr += "地址：" + geocode[i].formattedAddress + "" + "的地理编码结果是:坐标" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "匹配级别:" + geocode[i].level;
        addMarker(i, geocode[i]);
      }
      that.map.setFitView();
    }

说明

• 个人觉得用高德地图申请key比较方便，百度地图申请麻烦
• 学ionic没多久的菜鸟第一次写博客，有什么不好的请多多指教
• 分享的纯属个人观点、经验，不喜勿喷
• 不定时分享自己的遇到的问题和解决方案