浏览器端接入百度地图步骤

1.基本步骤

image.png

2.注意点

  • 1)百度示例中的例子为 通过一个加载一个js，该js中返回一个匿名函数执行，获取百度地图运行所需要的js与css
    但是由于在vue这种三方库中，组件加载时页面不允许异步加载的js，通过document.write，进行覆写页面元素，因为这会把页面清空，因此采用在组件中自己手动加载对应的script脚本
    image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图单击拾取经纬度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
 此处为上面js 返回内容
(function() {
    window.BMAP_PROTOCOL = "https";
    window.BMapGL_loadScriptTime = (new Date).getTime();
    document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=aQKkRVDb56tfNFmVOOPIBUiUohx6j2OY&services=&t=20230810131704"></script>');
    document.write('<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>');
}
)();
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('click', function (e) {
    alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});
</script>

3.vue2版本代码

具有功能为地图选点，定位当前地址，搜索地址

  • 使用示代码
<template>
  <div class="map">
    <BaiduMap/>
  </div>
</template>
 
<script>
// 你存放地图组件的位置 即下方地图组件代码存放的位置
import BaiduMap from '../components/BaiduMap/index.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>
 
<style scoped>
.map {
  height: 800px;
  width: 100%;
}
</style>
  • 地图组件代码
<!-- 百度地图组件>
<template>
    <div class="baidu-map-root">
        <div :id="mapId" :style="mapStyle" class="baidu-map-container">
        </div>
        <div class="search">
            <div id="r-result">请输入:<input type="text" :id="mapId + 'suggestId'" size="20" value="" style="width:150px;" />
            </div>
            <div :id="mapId + 'searchResultPanel'" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
            </div>
        </div>
 
    </div>
</template>
<script>
export default {
    props: {
        // 地图操作回调 map为地图对象 可以进行地图功能的拓展
        mapHandler: {
            type: Function,
            default: (map) => {
 
            },
        },
        // 地图container的样式
        mapStyle: {
            type: Object,
            default: {}
        },
        // 是否开启默认配置  获取当前地址控件，搜索地址控件，选点
        defaultInitFlag: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            map: null,
            fileDownloaded: false,
            address: {}
        }
    },
    watch: {
        address () {
            const {
                address
            } = this
            this.$emit('addressChange', { ...address })
        }
    },
    methods: {
        async downloadMapFileAndInit (cb) {
            await new Promise((resolve, reject) => {
                const runFun = () => {
                    resolve()
                    this.createMapInstance()
                    typeof cb === 'function' && cb()
                }
                // 已经加载过js不再重复加载
                if (window._BAIDUMAP_FILEDOWNLOADED) {
                    // return runFun()
                }
                let count = 0
                const isResole = () => {
                    count++
                    if (count >= 2) {
                        this.fileDownloaded = true
                        window._BAIDUMAP_FILEDOWNLOADED = true
                        // 地图所需初始文件加载完成后直接初始化地图
                        runFun()
                    }
                }
                const onerror = () => {
                    const errMsg = '地图加载失败，请刷新后重试！'
                    reject(errMsg)
                    // this.$nav.error(errMsg) 添加自己组件报错提示
                }
                /*  百度示例的js是返回一个匿名函数执行获取这两个文件并document.write写入，但是此时页面已经存在完整html不能进行write操作
                    因此此处需要手动执行匿名函数中的内容加载js与css
                    window.BMAP_PROTOCOL = "https";
                    window.BMapGL_loadScriptTime = (new Date).getTime();
                    // document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=aQKkRVDb56tfNFmVOOPIBUiUohx6j2OY&services=&t=20230810131704">');
                    // document.write('<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>');
                */
                window.BMAP_PROTOCOL = "https"
                window.BMapGL_loadScriptTime = (new Date).getTime()
                const script = document.createElement('script')
                const css = document.createElement('link')
 
                script.type = 'text/javascript'
                script.src = `https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${你的AK秘钥}&t=${window.BMapGL_loadScriptTime}`
                script.onerror = onerror
                script.onload = isResole
 
                css.type = 'text/css'
                css.rel = 'stylesheet'
                css.href = `https://api.map.baidu.com/res/webgl/10/bmap.css`
                css.onerror = onerror
                css.onload = isResole
 
                document.head.appendChild(script)
                document.head.appendChild(css)
            })
        },
        // 创建地图实例
        async createMapInstance () {
            const map = new window.BMapGL.Map(this.mapId)
            this.map = map
            const { mapHandler } = this
            map.centerAndZoom(new window.BMapGL.Point(116.404, 39.928), 15)
            map.enableScrollWheelZoom(true)
            typeof mapHandler === 'function' && mapHandler(map)
        },
        mapClickHandler (e) {
            this.addMarker(this.map, e.latlng)
        },
        addMapClick () {
            this.map.addEventListener('click', this.mapClickHandler)
        },
        // 添加获取当前地址控件
        addGetLocalControll (map) {
            // 创建定位控件
            let locationControl = new BMapGL.LocationControl({
                // 控件的停靠位置（可选，默认左上角）
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                // 控件基于停靠位置的偏移量（可选）
                offset: new BMapGL.Size(20, 20)
            })
            // 将控件添加到地图上
            map.addControl(locationControl)
 
            // 添加定位事件
            locationControl.addEventListener("locationSuccess", (e) => {
                console.log('e', e)
                this.addMarker(this.map, e.point)
            })
            locationControl.addEventListener("locationError", function (e) {
                console.log(e.message)
            })
        },
        // 添加红色标记点
        addMarker (map, origiPpoint) {
            map.clearOverlays()
            let point = new BMapGL.Point(origiPpoint.longitude || origiPpoint.lng, origiPpoint.latitude || origiPpoint.lat)
            let marker = new BMapGL.Marker(point, {
                enableDragging: true
            })
            map.centerAndZoom(point, 15)
            map.addOverlay(marker)
            this.pointTranslateToAddress(point)
        },
        // 经纬度转换为地址
        pointTranslateToAddress (point) {
            let geoc = new BMapGL.Geocoder()
            geoc.getLocation(point, (rs) => {
                let addComp = rs.addressComponents
                // 存储经纬度 与 地址
                this.address = {
                    ...point,
                    ...addComp
                }
            })
        },
        // 添加地址搜索框
        addSearchControll (map) {
            // 百度地图API功能
            function G (id) {
                return document.getElementById(id)
            }
            let ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
                {
                    input: this.mapId + "suggestId"
                    , location: map
                })
            ac.addEventListener("highlight", (e) => {  //鼠标放在下拉列表上的事件
                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
                G(this.mapId + "searchResultPanel").innerHTML = str
            })
 
            let myValue
            ac.addEventListener("onconfirm", (e) => {    //鼠标点击下拉列表后的事件
                let _value = e.item.value
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business
                G(this.mapId + "searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue
                this.setPlace(myValue)
            })
        },
        // 地图设置地址
        setPlace (myValue) {
            let map = this.map
            map.clearOverlays()    //清除地图上所有覆盖物
            const myFun = () => {
                let pp = local.getResults().getPoi(0).point    //获取第一个智能搜索的结果
                this.addMarker(this.map, pp)
            }
            let local = new BMapGL.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            })
            local.search(myValue)
        },
        // 默认功能 地图选点 获取当前位置 搜索地址
        defaultInit () {
            this.addMapClick()
            this.addGetLocalControll(this.map)
            this.addSearchControll(this.map)
        }
    },
    created () {
        this.mapId = Math.random() + ''
        this.downloadMapFileAndInit(this.defaultInitFlag && this.defaultInit)
    },
    destroyed () {
        this.map.removeEventListener('click', this.mapClickHandler)
        this.map.destroy()
    }
}
</script>
 
<style lang="scss">
  /* 保证地图搜索下拉选项不被遮盖 */
.tangram-suggestion-main {
    z-index: 999;
}
.baidu-map-root {
    width: 100%;
    height: 100%;
    position: relative;
 
    /* 必须有宽高 地图才能正常加载 */
    .baidu-map-container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
 
    .search {
        position: absolute;
        top: 0;
        z-index: 99;
    }
}
</style>

4.预览地址

https://project.zdzspace.cn/baidu-map

5.后续遇到问题

  • 在手机端地图不显示
    在pc端即使样式错误,最终也解析除了对应的样式,因此可以正常显示但是
    经过调试发现,在手机端不显示的原因为,样式书写错误,编译后在手机端不能正常解析

错误代码截图
错误解析样式截图

  • 修改后可以正常显示
    image.png
posted @   story.Write(z)  阅读(189)  评论(0)  编辑  收藏  举报
相关博文：
· nuxt使用介绍[学习记录]
· 项目搭建基本配置与规范
· Vue运用百度地图，添加位置信息(向数据库添加选中位置信息+选择位置的经纬度)--使用Vue百度地图组件
· vue2中引入百度地图方式汇总：2D/3D都可以通过两种方式实现：1添加地图容器直接在JS代码中使用百度地图API或者 2使用Vue Baidu Map组件 3.引入3D百度地图-WebGL类型 直接在JS代码中使用百度地图API 4引入3D百度地图-WebGL 类型 使用 el-bmap组件
· vue中调用百度地图 获取经纬度
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛