简单两步，实现高德地图的定位和展示，内含坐标系转换（示例为Angular框架+TypeScript代码）

最新推荐文章于 2024-07-15 15:48:01 发布

Neodeveloper

最新推荐文章于 2024-07-15 15:48:01 发布

阅读量768

点赞数 6

分类专栏：原创文章文章标签：前端 javascript angular typescript

本文链接：https://blog.csdn.net/NeoDeveloper/article/details/136410919

版权

原创文章专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Angular项目中集成高德地图API，包括注册账号、添加JSAPI到前端代码、使用Geolocation进行定位，并提供了使用原生定位和坐标系转换的优化示例。

摘要由CSDN通过智能技术生成

高德地图开放平台为开发者提供了强大的地图展示和相关计算功能，可以在前端代码中方便的集成，本文做一些简单和关键步骤的介绍，虽是基于Angular平台，但同样可以给JS、VUE做一些参考。

1、高德开放平台设置

1）去高德网站开放平台注册一个账号：

高德开放平台 | 高德地图API

可用个人身份注册，支付宝做实名认证。

2）创建一个应用

这里可以得到key，后面有用。

2、前端代码（angular为例）

1）安装geolocation插件

npm install @ionic-native/geolocation

2）修改index.html，增加高德地图的JS API

<head>
  <!-- 高德地图 -->
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=这里是你的高德key"></script>
  <script src="//webapi.amap.com/ui/1.1/main.js"></script>
  <script src="//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker.js"></script>  
</head>

3）TS代码

注意：以下代码使用了高德的定位代码：

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
declare var AMap;

@Component({
  selector: 'app-map',
  templateUrl: 'map.page.html',
  styleUrls: ['map.page.scss']
})
export class MapPage {
  map: any;

  constructor(private platform: Platform) {}

  ionViewWillEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap() {
    this.map = new AMap.Map('mapContainer', {
      center: [116.397428, 39.90923],
      zoom: 13
    });

    AMap.plugin('AMap.Geolocation', () => {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000
      });

      this.map.addControl(geolocation);
      geolocation.getCurrentPosition();
    });
  }
}

4）html代码

<ion-content>
  <div id="mapContainer"></div>
</ion-content>

5）css代码（注意：如果不设置高度，可能你啥也看不见）

#mapContainer{
  height: 400px; 
}

至此，你就能够展示地图，并且以当前位置坐标为中心。接下来，我们可以根据需要做一些优化和增强。

3、优化

1）使用系统原生定位（并非使用高德定位，高德只是作为地图展示）

app.module.ts 装载Geolocation对象

import { Geolocation } from '@ionic-native/geolocation/ngx';

providers: [
    Geolocation,
    ]

TS代码片段

import { Geolocation } from '@ionic-native/geolocation/ngx';

  constructor(
    public geolocation: Geolocation,
  ) {
  }

refreshPos() {
    // 使用原生的获取坐标的方法
    this.geolocation.getCurrentPosition().then((res)=>{
      console.log(res.coords)
      // 坐标系转换
      const new_coords = this.wgs84ToGcj02(res.coords.longitude,res.coords.latitude);
      console.log(new_coords)
      // 计算两点间距离
      this.distance = this.getDistance(new_coords.longitude, new_coords.latitude, 113.7792, 23.06359);
      // 设置地图的中心为当前坐标
      this.map.setCenter([new_coords.longitude, new_coords.latitude]);
      // 绘制中心点图标
      if (this.marker) {  // 假设不为空，则需要清空
        this.marker.setMap(null);
      }
      this.marker = new AMap.Marker({
          position: new AMap.LngLat(new_coords.longitude,new_coords.latitude),
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          offset: new AMap.Pixel(-13, -30)
      });
      this.marker.setMap(this.map);
    }); 
  }

2）坐标系转换

/** WGS84 转换为 GCJ02 */
  wgs84ToGcj02(lng: number, lat: number) {
    var lat = +lat;
    var lng = +lng;
    let dlat = this.transformlat(lng - 105.0, lat - 35.0);
    let dlng = this.transformlng(lng - 105.0, lat - 35.0);
    let radlat = lat / 180.0 * this.coordtransform.PI;
    let magic = Math.sin(radlat);
    magic = 1 - this.coordtransform.ee * magic * magic;
    let sqrtmagic = Math.sqrt(magic);
    dlat = (dlat * 180.0) / ((this.coordtransform.a * (1 - this.coordtransform.ee)) / (magic * sqrtmagic) * this.coordtransform.PI);
    dlng = (dlng * 180.0) / (this.coordtransform.a / sqrtmagic * Math.cos(radlat) * this.coordtransform.PI);
    let mglat = lat + dlat;
    let mglng = lng + dlng;
    return { longitude: mglng, latitude: mglat };
  }
  //纬度转换算法
  transformlat(lng: number, lat: number) {
    var lat = +lat;
    var lng = +lng;
    let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * this.coordtransform.PI) + 20.0 * Math.sin(2.0 * lng * this.coordtransform.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lat * this.coordtransform.PI) + 40.0 * Math.sin(lat / 3.0 * this.coordtransform.PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(lat / 12.0 * this.coordtransform.PI) + 320 * Math.sin(lat * this.coordtransform.PI / 30.0)) * 2.0 / 3.0;
    return ret;
  };
  //经度转换算法
  transformlng(lng: number, lat: number) {
    var lat = +lat;
    var lng = +lng;
    let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * this.coordtransform.PI) + 20.0 * Math.sin(2.0 * lng * this.coordtransform.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lng * this.coordtransform.PI) + 40.0 * Math.sin(lng / 3.0 * this.coordtransform.PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(lng / 12.0 * this.coordtransform.PI) + 300.0 * Math.sin(lng / 30.0 * this.coordtransform.PI)) * 2.0 / 3.0;
    return ret;
  };

3）获取两点间距离

  // 获取两点间的距离
  getDistance(lng1: number, lat1: number, lng2: number, lat2: number): number {
    return AMap.GeometryUtil.distance(new AMap.LngLat(lng1, lat1), new AMap.LngLat(lng2, lat2));
  }

html代码改为：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      定位测试
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
    <div id="mapContainer"></div>
    <div><a (click)="refreshPos()">刷新</a></div>
    <div>{{distance}}</div>
</ion-content>

最终效果截图：

如果觉得不错，请点赞、收藏！

Neodeveloper

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
简单两步，实现高德地图的定位和展示，内含坐标系转换（示例为Angular框架+TypeScript代码）

高德地图开放平台为开发者提供了强大的地图展示和相关计算功能，可以在前端代码中方便的集成，本文做一些简单和关键步骤的介绍，虽是基于Angular平台，但同样可以给JS、VUE做一些参考。
复制链接

扫一扫

专栏目录