vue引入百度地图添加带检索功能的信息窗口SearchInfoWindow

梦翼横空

已于 2023-03-23 16:01:26 修改

阅读量794

点赞数

文章标签： vue Powered by 金山文档

于 2023-03-23 15:35:32 首次发布

本文链接：https://blog.csdn.net/shichunlai18/article/details/129731573

版权

该代码示例展示了如何在Vue组件中加载百度地图API，通过异步加载技术确保地图及SearchInfoWindow库正确初始化。然后创建Map实例，设置中心点，并添加可拖动的Marker。同时，创建了一个SearchInfoWindow对象，用于显示详细信息和提供周边检索功能。

摘要由CSDN通过智能技术生成

baiduMap.js

export function baiduMap(ak) {
    return new Promise(function(resolve, reject) {
        // 异步加载
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=MapLoadSuccess`
        script.onerror = reject
        document.head.appendChild(script)
        window.MapLoadSuccess = function() {
            var link = document.createElement('link')
            link.rel = 'stylesheet'
            link.href = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css`
            document.head.appendChild(link)

            // BMap加载完成，开始加载libs