百度地图开发探索 定位功能（搜索获取位置，地图自带定位，点击获取定位） typescript angular

百度地图定位

分为三种定位：
1、地图自带控件定位
2、搜索获取定位
3、点击获取定位、添加定位点

自带定位控件：

如图

// 定位控件
  locationControl() {
    // 添加带有定位的导航控件,就是缩放控件+定位按钮
    const navigationControl = new BMap.NavigationControl({
      // 靠左上角位置
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // LARGE类型
      type: BMAP_NAVIGATION_CONTROL_LARGE,
      // 启用显示定位
      enableGeolocation: true,
    });
    this.map.addControl(navigationControl);

    // 添加定位控件
    const geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener('locationSuccess', (e: any) => {
      // 定位成功事件
      let address = '';
      address += e.addressComponent.province;
      address += e.addressComponent.city;
      address += e.addressComponent.district;
      address += e.addressComponent.street;
      address += e.addressComponent.streetNumber;
      alert('当前定位地址为：' + address);
    });
    geolocationControl.addEventListener('locationError', (e: any) => {
      // 定位失败事件
      alert(e.message);
    });
    this.map.addControl(geolocationControl);
  }

NavigationControl 此类是地图的平移缩放控件，可以对地图上下左右四个方向平移和缩放。
enableGeolocation:控件是否继承定位功能 使用H5浏览器定位功能
GeolocationControl：创建特定样式的地图定位控件：如下
选项-GeolocationControlOptions：
anchor
offset
showAddressBar(是否显示定位信息面板)
enableAutoLocation(添加控件时是否进行定位)
locationIcon(自定义图标)
定位成功事件：locationSuccess 失败事件：locationError

搜索获取定位

<div class="search_map">
        <img src="../../../../../assets/font/search_map.png" alt="搜索" (click)="switchTab(1)" tooltip="搜索" placement="right" containerClass="Bmap_tooltipClass">
        <input type="text" id="suggestId" size="20" [hidden]="!searchShow" placeholder="请输入搜索关键词"
            (keyup.enter)="inputSearch($event)" [(ngModel)]="searchContent" />
        <div class="close_search" [hidden]="!searchShow" (click)="searchShow=false"></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>

注意：
这里的input框绑定的还有keyup.enter事件，让用户在回车时直接搜索输入的内容。
id为searchResultPanel的div是用来展示下拉的列表的。

1、模糊搜索内容

intelligentSearch() {
    let myValue;
    const ac = new BMap.Autocomplete({
      // 建立一个自动完成的对象
      input: 'suggestId',
      location: this.map,
    });

    ac.addEventListener('onhighlight', (e: any) => {
      // 鼠标放在下拉列表上的事件
      let str = '';
      let _value = e.fromitem.value;
      let value = '';
      if (e.fromitem.index > -1) {
        value =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
      }
      str =
        'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value;

      value = '';
      if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
      }
      str +=
        '<br />ToItem<br />index = ' +
        e.toitem.index +
        '<br />value = ' +
        value;
    });

    ac.addEventListener('onconfirm', (e: any) => {
      // 鼠标点击下拉列表后的事件
      const _value = e.item.value;
      myValue =
        _value.province +
        _value.city +
        _value.district +
        _value.street +
        _value.business;
      this.searchChange(myValue);
    });
  }

2、回车查询

inputSearch(e: any) {
    // 处理搜索为空
    if (!this.searchContent) {
      return;
    }
    this.searchChange(this.searchContent);
  }

注：回车时判断框内不为空

3、搜索事件

// 搜索事件
  searchChange(myValue: any) {
    this.map.clearOverlays(); // 清空地图覆盖物
    this.searchContent = myValue;
    const newMap = new BMap.LocalSearch(this.map, {
      // 搜索结果呈现的配置
      renderOptions: { map: this.map },
    });
    newMap.search(myValue);
  }

注：搜索时保持框内内容与点击选择内容一致

点击获取地图坐标

// 点击获取坐标
  coordinateMouse() {
    this.map.addEventListener('click', (e: any) => {
      alert(e.point.lng + ' ' + e.point.lat);
    });
  }