高德地图Angular项目引入

最新推荐文章于 2025-03-31 18:14:30 发布

终于，我们成为了曾经最讨厌的样子

最新推荐文章于 2025-03-31 18:14:30 发布

阅读量1.1k

点赞数 3

文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44425155/article/details/141895988

版权

高德地图字段属性文档参考手册-地图 JS API 2.0 | 高德地图API (amap.com)

在index.html页面

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "xxx",//你的安全密钥。
    };
    AMapLoader.load({
        key: "xxxx", //申请好的 Web 端开发 Key，首次调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
//这里注意，，我再用Geocoder的时候就忘记在index插入了，页面废了好大劲才找到咋用。
//不在这里插入也可以用插件，方法在下面
        AMapUI: {
            //是否加载 AMapUI，缺省不加载
            version: "1.1", //AMapUI 版本
            plugins: [
              'misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'
            ], //需要加载的 AMapUI ui 插件
        },
        Loca: {
            //是否加载 Loca， 缺省不加载
            version: "2.0", //Loca 版本
        },
    })
        .then((AMap) => {
            console.log('加载成功')
            console.log(AMap)
            // var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
            // map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
        })
        .catch((e) => {
            console.log('加载失败')
            console.error(e); //加载错误提示
        });
</script>

注意，Web服务是没有密钥的，本文是对Web端（JS API）的引入做记录的

在实际的功能页面中

在import 导入文件后加入

declare var AMap;
declare var AMapUI;

因为 ts没有办法识别你已经在全局加入了这个变量，编译会报错，所以你需要手动告诉ts

declare var AMap; 是一种 TypeScript 中的声明语句，用于声明一个全局变量 AMap。这种声明主要用于在 TypeScript 代码中引用外部 JavaScript 库或全局变量时，确保类型安全。

展示地图在页面

setTimeout(() => {
  var map = new AMap.Map('container', {
    zoom: 13, 
    center: [116.397, 39.918], 
    resizeEnable: true });
}, 1000);
//注意， 因为是获取ID为container的DOM元素，生成地图，所以最好写在生命周期里。页面加载完成后再执行。本文因为一些原因无法使用生命周期，所以用了settimeout保证页面加载完成后执行。
//zoom是地图显示的缩放级别。1是地球洲级别好像是。 数字越小越精细。 可以自己试一试
//center是页面显示的中心点。 值是经纬度、
//


//html代码
//<div id="container" style="width: 100%;height: 450px;"></div>

具体功能实现

    //手动选择 始终只有最新点击的点
    manualSelection() {
        this.searchButtonFlag = false
        var clickListener, mapxx = new AMap.Map('container', {
            zoom: 13,
            center: [116.397, 39.918],
            resizeEnable: true
        });
        mapxx.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
        //创建覆盖物群组，传入覆盖物组成的数组
        this.overlayGroup = new AMap.OverlayGroup([]);
        //统一添加到地图实例上
        mapxx.add(this.overlayGroup);
        //设置地图监听事件
        clickListener = (e) => {
            // e.target 就是被点击的 Marker
            const markerads = new AMap.Marker({
                position: e.lnglat,
                offset: new AMap.Pixel(-13, -30),
                content: this.markerContent,
                map: mapxx,
            });
            this.positionData = e.lnglat
            //因为只保留最新一次点击，清空再添加
            this.overlayGroup.clearOverlays();
            this.overlayGroup.addOverlay(markerads); //添加新的覆盖物到群组

            //添加逆地址信息
            new AMap.Geocoder({
                radius: 1000 //范围，默认：500
            }).getAddress(e.lnglat, (status, result) => {
                if (status === 'complete' && result.regeocode) {
                    this.DESCRIBE=
                        result.regeocode.addressComponent.province +
                        result.regeocode.addressComponent.street +
                        result.regeocode.addressComponent.township +
                        result.regeocode.addressComponent.streetNumber;
                    this.NAME= result.regeocode.formattedAddress;
                } else {
                    console.error('根据经纬度查询地址失败')
                }
            });
        };
        //将事件绑定到地图的点击事件中
        mapxx.on("click", clickListener);
    }
    //关键字搜索
    searchButton() {
        this.searchButtonFlag = true
        const map = new AMap.Map('container', {
            zoom: 13,
            center: [116.397, 39.918],
            resizeEnable: true
        });
        //定义查询事件
        const searchMethod = () => {
            //构造地点查询类
            const placeSearch = new AMap.PlaceSearch({
                pageSize: 5, // 单页显示结果条数
                pageIndex: 1, // 页码
                city: "北京", // 兴趣点城市
                map: map, // 展现结果的地图实例
                panel: "panel", // 结果列表将在此容器中进行展示。
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            //关键字查询
            placeSearch.search(this.searchText);
            //监听搜索结果选中事件
            const selectChanged = (e) => {
                this.positionData = e.selected.data.location
                this.NAME=e.selected.data.name
                this.DESCRIBE=e.selected.data.address
            }
            //绑定监听事件
            placeSearch.on("selectChanged", selectChanged);
        }
        //绑定查询功能
        AMap.plugin(["AMap.PlaceSearch"], searchMethod);
    }

//因为页面的input search搜索组件input的回车按键不触发搜索，因该是触发默认提交了。所以这里阻拦以下，正确执行搜索。
    handleEnter(event: KeyboardEvent) {
        if (event.key === 'Enter') {
            event.preventDefault();
            this.searchButton();
        }
    }

 <!-- 绑定NAME的input -->
 <!-- 绑定DESCRIBE的textarea -->
 <!-- 绑定经纬度的positionData-->
<div nz-col nzSpan="24">
  <button nz-button (click)="searchButton()" nzType="primary">关键字搜索</button>
  <button nz-button (click)="manualSelection()" nzType="primary">手动选择</button>
  <nz-input-group *ngIf="searchButtonFlag" nzSearch [nzAddOnAfter]="suffixIconButton">
    <input id="tipinput" [(ngModel)]="searchText" type="text" nz-input
      (keydown.enter)="handleEnter($event)" [ngModelOptions]="{standalone: true}"
      placeholder="input search text" />
  </nz-input-group>
  <ng-template #suffixIconButton>
    <button nz-button (click)="searchButton()" nzType="primary" nzSearch>
      <span nz-icon nzType="search"></span>
    </button>
  </ng-template>
  <div id="container" style="width: 100%;height: 450px;"></div>
  <div id="panel" *ngIf="searchButtonFlag"></div>
</div>
 <!-- 本文用的angular的组件库，大致思路是页面这样的，根据自己使用的组件库自行调整 -->

开发中遇到的问题。

第一个就是忘记在index中加插件，然后在页面加插件的方法

const GeocoderMethod = () => {
  const geocoder = new AMap.Geocoder({
    radius: 1000 //范围，默认：500
  });
  geocoder.getAddress(e.lnglat, function (status, result) {
               if (status === 'complete' && result.regeocode) {
                   address = result.regeocode.formattedAddress;
                   describe = result.regeocode.addressComponent.province +
                       result.regeocode.addressComponent.street +
                       result.regeocode.addressComponent.township +
                       result.regeocode.addressComponent.streetNumber
                       ;
                   console.log('success', address)
                
               } else {
                   console.error('根据经纬度查询地址失败')
               }
           }); 
}
AMap.plugin('AMap.Geocoder', GeocoderMethod)
//AMap.plugin是加插件的方法，然后GeocoderMethod是绑定事件给插件，使用插件。

第二个问题。

页面加插件后发现this不好用，没法给事件传递参数。

第一个知识点是：AMap.plugin('AMap.Geocoder', GeocoderMethod)和AMap.plugin('AMap.Geocoder', GeocoderMethod(e))的区别

不带参数，只有方法名的，是传递一个函数给这个方法，带参数的是传递这个函数的结果给这个方法。

如果一定要传参数，可以在函数中。

xxxMethod(param,xxx,ddd){
  return ()=>{
    //这样返回一个函数回去。
  }
}

第二个知识点。function xx(){}和箭头函数 ()=>{} 的区别。箭头函数的this指向的是它的父级的this，如果父级没有，会继续向上找。

但fuction函数会指向调用者，谁调用谁就是它的父级。

this 的绑定：箭头函数的 this 绑定基于词法作用域，而普通函数的 this 绑定取决于调用上下文。
参数列表：箭头函数可以省略括号，而普通函数需要使用括号。
构造函数：普通函数可以用作构造函数，而箭头函数不能。
arguments 对象：两者都可以访问 arguments 对象，但箭头函数通常使用剩余参数（...args）来代替。

//普通
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出 6
//箭头
const sum = (...args) => {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
};

console.log(sum(1, 2, 3)); // 输出 6
//普通
const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name); // 输出 'Alice'
  }
};

obj.greet(); // 输出 'Alice'

const greet = obj.greet;
greet(); // 输出 'undefined' 或 'window'（取决于环境）
//箭头
const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name); // 输出 'undefined' 或 'window'（取决于环境）
  }
};

obj.greet(); // 输出 'undefined' 或 'window'（取决于环境）

const greet = obj.greet;
greet(); // 输出 'undefined' 或 'window'（取决于环境）