记一次百度地图JSAPI的使用

百度开放平台

百度地图开放平台

• 注册登录百度账号
• 进入控制台
• 创建应用，复制你的key（自己找，就在网页上，找不到就转行吧）

页面代码

引入百度地图JS代码

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的key"></script>

在哪引都没事，无论你是Vue项目还是普通的web项目，只要你最后能访问到里面的对象就可以

地图显示区域

<div id="map"></div>

初始化地图

// 这里第一个参数map要么是一个选择器，要么是一个dom元素，具体是什么我也没看，反正就这样用
let map = new BMap.Map("map", {
	coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
	// 指定完成后API将以指定的坐标类型处理您传入的坐标
});          // 创建地图实例
let point;
if(userStore.location.point){
	point = new BMap.Point(userStore.location.point.lng,userStore.location.point.lat);  // 创建点坐标
}else{
	point = new BMap.Point(116.404, 39.915);  // 创建点坐标
}

map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

let marker = new BMap.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

// 这几个控制组件是我复制文档里的，具体是什么自己控制变量法试一下
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

手动搜索并选择地点

local = new BMap.LocalSearch(map, { //智能搜索
	onSearchComplete: (e) => {
		// 这里参数e就是搜索结果，e.qk就是具体的搜索结果列表，其他当然还包含其他数据，自己输出看看
		// 想办法保存下来，我是在Vue里用的，所以这里这样存
		searchResult.value = e.qk;
	}
});
local.search(location.value);

function onClickSearchResult(item) {
    userStore.setLocation(item) // 记录到pinia里
    showBottom.value = false // 隐藏搜索面板

    map.clearOverlays();    //清除地图上所有覆盖物
    var pp = item.point;    //获取第一个智能搜索的结果
    map.centerAndZoom(pp, 18);
    map.addOverlay(new BMap.Marker(pp));    //添加标注
}

搜索结果里的qk属性是一个数组，里面一个个对象包含地点的名称，区域代码，经纬度等信息，自己想办法用

我的完整代码

因为我用的Vue，所以开始的脚本引入我放在index.html文件里了，这里不展示

<template>
    <div class="map-container">
        <div id="map"></div>
        <van-floating-bubble axis="xy" icon="location" magnetic="x" @click="showBottom = true" />
        <!-- 圆角弹窗（底部） -->
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
            <van-cell inset>
                <van-field v-model="location" label="你的位置：" label-width="auto" placeholder="请输入你的位置"
                    @update:model-value="onUpdateLocation" />
            </van-cell>

            <van-list v-model:loading="loading" finished-text="没有更多了" :disabled="true">
                <van-cell inset v-for="item in searchResult" :key="item.uid" :title="item.title" :label="item.address"
                    @click="onClickSearchResult(item)" />
            </van-list>
        </van-popup>
    </div>
</template>
<script lang="js" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import lodash from 'lodash'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const router = useRouter()
const showBottom = ref(false)
const location = ref(userStore.location?.title)
const searchResult = ref([])
const loading = ref(false)
let map;
let point;
let marker;
let local;
function onUpdateLocation() {
    if (location.value.length < 2) {
        searchResult.value = []
        return
    }
    searchLocationThrottle()
}
function searchLocation() {
    local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: (e) => {
            searchResult.value = e.qk;
        }
    });
    local.search(location.value);
}
const searchLocationThrottle = lodash.throttle(searchLocation, 500)

function onClickSearchResult(item) {
    userStore.setLocation(item)
    showBottom.value = false
    
    map.clearOverlays();    //清除地图上所有覆盖物
    var pp = item.point;    //获取第一个智能搜索的结果
    map.centerAndZoom(pp, 18);
    map.addOverlay(new BMap.Marker(pp));    //添加标注
}
onMounted(() => {
    map = new BMap.Map("map", {
        coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
        // 指定完成后API将以指定的坐标类型处理您传入的坐标
    });          // 创建地图实例  
    if(userStore.location.point){
        point = new BMap.Point(userStore.location.point.lng,userStore.location.point.lat);  // 创建点坐标  
    }else{
        point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
    }

    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker);                     // 将标注添加到地图中 

    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   

    /* var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "海底捞王府井店", // 信息窗口标题
        enableMessage: true,//设置允许信息窗发送短息
        message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
    } */
    // 这只能在PC用
    /* var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }); */

})

</script>
<style lang="css" scoped>
.map-container,
#map {
    width: 100%;
    height: 100%;
}

.van-nav-bar {
    background-color: transparent;
    pointer-events: none;
}

.van-nav-bar .van-icon {
    color: #000 !important;
}
</style>