百度地图Api的引入使用-vue3组件

小佳的笔记

于 2022-09-19 15:36:46 发布

阅读量723

点赞数

文章标签： javascript 百度 vue.js

本文链接：https://blog.youkuaiyun.com/qq_45234274/article/details/126829750

版权

本文介绍了如何在Vue3组件中引入并使用百度地图API。首先，需要添加百度地图的js文件，然后在Vue组件内部引入该js，并对样式进行定制，同时设置经纬度以显示地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入

因为用的场景较多，抽离为组件，

首先添加 js文件

export function baiduMap() {
   
    return new Promise(function (resolve, reject) {
   
        window.baiduMap = function () {
   
            resolve();
        };
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = `https://api.map.baidu.com/api?v=2.0&ak=替换为自己的&callback=baiduMap`;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

在组件vue代码中引入js，对样式进行调整，添加经纬度

<template>
    <div id="map" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>
<script>
import {
    baiduMap }

最低0.47元/天解锁文章