Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式

Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式

效果图 

---

成为开发者并创建key

详细请查阅官方文档：https://developer.amap.com/api/jsapi-v2/guide/abc/prepare

---

一、引入文件，详细请查阅官方文档

<script type="text/javascript">
    window._AMapSecurityConfig = {
        serviceHost: `${location.origin}/_AMapService`,
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

二、定义变量

oAddMapMarker: null, // 添加地图标记实例
oAddMapPlaceSearch: null, // 地图查询服务
sPoiSearch: '', // 地图搜索关键词
aPoiSearchOptions: [], // 可选择地图列表
bPoiSearchLoading: false, // 地图搜索 loading
bThemeNight: false, // 当前页面是否是夜间模式

三、地图、地点搜索HTML及样式

// HTML
<div class="g-add-map-marker-dialog-container" ref="addMapMarkerDialogRef"></div>
<div class="g-poi-search">
    <el-select
            v-model="sPoiSearch"
            filterable
            remote
            reserve-keyword
            placeholder="请输入地名"
            :no-data-text="'查询失败，请输入正确地名'"
            :popper-class="'g-poi-search-popper'"
            :remote-method="fnRemoteMethod"
            :loading="bPoiSearchLoading"
            @change="fnPoiSearchChange">
        <el-option
                v-for="item in aPoiSearchOptions"
                :key="item.value"
                :label="item.label"
                :title="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</div>

// CSS
.g-poi-search {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 8px;
    border-radius: 2px;
    background-color: #fff;
}

.g-poi-search .el-select .el-input > input.el-input__inner {
    height: 28px;
    line-height: 28px;
}

.g-poi-search-popper .el-select-dropdown__item {
    width: 200px;
    height: 28px;
    line-height: 28px;
}

四、地图实例化，并根据系统主题设置地图样式

this.oAddMapMarker = new AMap.Map(this.$refs.addMapMarkerDialogRef, {
    zoom: 13, // 级别
    center: [111.51931, 36.088581], // 中心点，没有数据时，可以传null，默认使用当前定位信息
    mapStyle: `amap://styles/${this.bThemeNight ? 'darkblue' : 'normal'}`
})

五、AMap.ToolBar（工具条）、AMap.PlaceSearch（地点搜索） 插件的使用

/*
* @desc 异步加载地点搜索服务、工具条插件
* */
fnLoadPlugins() {
    AMap.plugin(['AMap.PlaceSearch', 'AMap.ToolBar'], ()=> {
        this.oAddMapMarker.addControl(new AMap.ToolBar());
        this.oAddMapPlaceSearch = new AMap.PlaceSearch({
            type: "", // 数据类别
            pageSize: 10, // 每页结果数,默认10
            pageIndex: 1, // 请求页码，默认1
            extensions: "base" //返回信息详略，默认为base（基本信息）
        }); //构造PlaceSearch类
        AMap.event.addListener(this.oAddMapPlaceSearch, "complete", (data)=> {
            // 监听地图搜索查询完成
            if(data.info === 'OK' && data.poiList && data.poiList.pois && data.poiList.pois.length) {
                this.aPoiSearchOptions = data.poiList.pois.map(v=> ({
                    value: v.id,
                    label: v.name,
                    location: v.location
                }))
            } else {
                this.aPoiSearchOptions = [];
            }
            this.bPoiSearchLoading = false;
        });
        AMap.event.addListener(this.oAddMapPlaceSearch, "error", (data)=> {
            // 监听地图搜索查询失败
            this.aPoiSearchOptions = [];
            this.bPoiSearchLoading = false;
        });
    });  
},
/*
* @desc 地图远程搜索方法
* @param query {String} 查询字符
* */
fnRemoteMethod(query) {
    if (query !== '' && this.oAddMapPlaceSearch) {
        this.bPoiSearchLoading = true;
        // 根据关键字获取对应城市里相关的POI信息
        this.oAddMapPlaceSearch.search(query);
    } else {
        this.aPoiSearchOptions = [];
    }
},
/*
* @desc 地图搜索关键词发生变化，并添加标记
* param val {String} 当前选中值
* */
fnPoiSearchChange(val) {
    let oFindMap = this.aPoiSearchOptions.find(v=> v.value === val);
    if(oFindMap) {
        // 定位到指定Poi
        this.oAddMapMarker.setCenter([oFindMap.location.lng, oFindMap.location.lat]);
        this.fnAddMapMarkerHandle([oFindMap.location.lng, oFindMap.location.lat]);
    }
},

六、点击地图添加标记

this.oAddMapMarker.on('click', (ev)=> {
    this.fnAddMapMarkerHandle([ev.lnglat.lng, ev.lnglat.lat]);
})
/*
* @desc 添加地图标记方法
* @param aLnglat {Array} 经纬度
* */
fnAddMapMarkerHandle(aLnglat) {
    this.oAddMapMarker.getAllOverlays('marker').forEach(marker => {
        // 移除地图中的 marker 覆盖物
        this.oAddMapMarker.remove(marker);
    })
    let oNewMarker = new AMap.Marker({
        position: new AMap.LngLat(aLnglat[0], aLnglat[1]),
        title: '标题title提示',
    });
    // 添加标记
    this.oAddMapMarker.add(oNewMarker);
}

七、获取页面主题信息，并监听

/*
* @desc 获取页面主题，并监听
* */
fnGetPageTheme() {
    let oMatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    this.bThemeNight = oMatchMedia.matches;
    oMatchMedia.addListener(()=> {
        this.bThemeNight = oMatchMedia.matches;
        if(this.oAddMapMarker) this.oAddMapMarker.setMapStyle(`amap://styles/${this.bThemeNight ? 'darkblue' : 'normal'}`)
    })
}

---

如果有错误，麻烦指出~