angular使用高德地图

使用高德地图展示地图与天气预报

先上效果图
实现功能有：

展示地图
网络定位
实时天气
天气预报
主题切换

开发环境

Angular CLI: 8.3.29
Node: 10.17.0
OS: win32 x64
Angular: 8.2.14

准备工作

去高德地图注册帐号，成为开发者，实名认证（支付宝扫码的方式）
创建应用
创建key（最关键的一步）
github仓库地址

开始

创建项目

创建一个myworld的项目

ng new myworld

安装高德地图的开发依赖

开发文档链接
根据文档，里面有多种安装依赖的方式，我这边采用npm 安装

npm i @amap/amap-jsapi-loader --save

执行命令后，检查一下本地依赖是否下载好了
在这里插入图片描述

初始化地图

根据文档描述的有点坑，文档里面给的代码import那一行，复制到项目里面是报错的, AMapLoader 无法识别，vscode直接报红。

import AMapLoader from '@amap/amap-jsapi-loader';

在这里插入图片描述
点进包里面去看看了，从下图明白的看出来，export 只有一个load啊

正确导包的方式应该是

import {load }  from '@amap/amap-jsapi-loader';

完整ts代码如下

import { Component } from '@angular/core';
import {load }  from '@amap/amap-jsapi-loader';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'myworld';
  map: any;//地图

  ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    load({
      "key": "123456",      // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      "AMapUI": {             // 是否加载 AMapUI，缺省不加载
          "version": '1.1',   // AMapUI 缺省 1.1
          "plugins":[],       // 需要加载的 AMapUI ui插件
      },
      "Loca":{                // 是否加载 Loca， 缺省不加载
          "version": '2.0'  // Loca 版本，缺省 1.3.2
      },
    }).then((AMap)=>{
        this.map = new AMap.Map('container');
    }).catch(e => {
        console.log(e);
    })
      
    }
}

地图显示效果

这里用了高德地图的自定义图标LabelMarker+网络ip定位

    /**
     * 通过ip定位
     * @param success 成功回调
     * @param error 失败回调
     */
    public locateByIP(success,error){
        let self = this;
         //ip定位，获取当前城市信息
         this.Amap.plugin('AMap.CitySearch', function () {
            var citySearch = new self.Amap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
                success(result)
                self.city = result.city
              }else{
                error(status)
              }
            })
          })
    }

    public addSelfMarker(lng,lat){
      let marker = new this.Amap.LabelMarker({
          // size: new this.Amap.Size(128, 128),    // 图标尺寸
          icon: {
            image:'assets/img/location_self.png',
            anchor: 'bottom-center',
            size: [30, 30],
            clipOrigin : [0,-2]
            
          }, // 自定义点标记
          position: [lng,lat], // 基点位置
          // offset: new this.Amap.Pixel(0,0), // 设置点标记偏移量
          // anchor:'bottom-left', // 设置锚点方位,默认左上方
          // imageSize: new this.Amap.Size(20, 20)   // 根据所设置的大小拉伸或压缩图片
      });
      this.map.add(marker);
    }

在这里插入图片描述

展示天气信息，及天气预报

高德地图api里面提供实时天气查询，天气预报查询

    /**
     * 天气信息
     * @param success 成功回调
     * @param error 失败回调
     */
    public weatherInfo(city:string,success,forecast,error){
        let self = this;
        //加载天气查询插件
        this.Amap.plugin('AMap.Weather', function() {
        //创建天气查询实例
            var weather = new self.Amap.Weather();
            //执行实时天气信息查询
            weather.getLive(city, function(err, data) {
                success(data)
                error(err)
            });
            //执行未来天气信息查询
            weather.getForecast(city, function(err, data) {
              forecast(data)
            });
        });
    }

最终显示效果图,最多提供未来三天天气预报信息，
还有一些风力等级，方向，暂时没有显示出来；
在这里插入图片描述

主题切换

用到了angular主题切换。提供了好几个颜色，这里主要改背景色，其他文字颜色懒得去配套弄了。
前面有文章写了如何写angular主题切换，就不再放代码了。
在这里插入图片描述

使用SAO Utils，添加桌面网页插件

其实主要目的还是用sao utils 在桌面显示天气信息，用了人家写的感觉不是好看，不怎么满意，就自己创建了一个项目。
下面是效果图,感觉还可以（肝了周末两天写出来的，不可以，也可以了）
有些bug，或者操作上面的优化，以后有时间再更新代码了。
在这里插入图片描述

总结

高德地图的webjs还是很好用的，接口调用的限制能接受，每秒至少都有几十次，开发方面，多看文档，功能啥的写起来不难，主要是好看的UI界面需要花很多时间慢慢调。