vue3.0引入百度地图并标记点的实现代码

首先新建一个js，主要用来引入百度地图的js，代码如下：

export function baiduMap() {
    return new Promise(function(resolve, reject) {
        window.baiduMap = function() {
            resolve()
        }

        var script2 = document.createElement('script')
        script2.type = 'text/javascript'
        script2.src = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js`

        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)
        document.head.appendChild(script2)

        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=3.0&ak=你的ak&callback=baiduMap`
        script.onerror = reject
        document.head.appendChild(script)
    })
}

获取生成密匙： ak密匙(百度地图)

其次，创建baidu-map.vue,代码如下：

最后，在你需要用到的界面引用

引用界面的script的代码

import BaiduMap from "./baidu-map";
const mapRef = ref(null);

/**
 * 查看地图
 * @param selection
 */
function openMap() {
  mapRef.value.map(form.value.id)
}

最终效果

参考：博客

以上就是vue3.0引入百度地图并标记点的详细内容，更多关于vue3.0百度地图标记点的资料请关注脚本之家其它相关文章！