百度地图定位
分为三种定位：
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);});}
