vue3使用百度地图

效果图:

 

 代码:

 <!-- 百度地图 -->
        <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=6p5MmRood0q6FYqDDF9FQhXOM3obsUn7"></script>

在组件中使用:

<template>
    <div class="box">
        <div class="foo">上海嵘杭文化传媒有限公司，是中国农业电影电视中心战略合作单位，是村村播工程全国服务中心，致力于全新数字化的大农业类电商模式发展，是全国农副产品电商平台解决方案供应商，是面向终端客户的SAAS综合技术服务平台的开拓者。我们是一家卓越的创业型公司，拥有先进的理念和思想，拥有优秀的团队和商业模式，未来我们将成为数字科技建设新农村的开拓者。</div>
        <div class="title">客服服务</div>
        <div class="card_shadow">
            <div class="card_button">
                <div v-if="false" class="card_left addborder">
                    <div class="content_left"><img src="https://znyzfresource.oss-cn-shanghai.aliyuncs.com/images/uploads/villages-mobile/telephone.png" alt="" /></div>
                    <div class="content_right">
                        <div class="text">联系电话：</div>
                        <!-- <div class="text">021-57657217</div> -->
                        <div class="text">
                            <a href="tel:021-57657217">021-57657217</a>
                        </div>
                    </div>
                </div>
                <div v-if="false" class="line"></div>
                <div class="card_left">
                    <div class="content_left addmargintop"><img src="https://znyzfresource.oss-cn-shanghai.aliyuncs.com/images/uploads/villages-mobile/mailbox.png" alt="" /></div>
                    <div class="content_right addmargintop">
                        <div class="text">Email：</div>
                        <div class="text">
                            <a href="mailto:18017336919@163.com">18017336919@163.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="map">
            <div id="container" ref="dom"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const dom = ref()
let opts = reactive({
    width: 250, // 信息窗口宽度
    height: 1, // 信息窗口高度
    title: '上海嵘杭文化传媒有限公司',
})
let map
onMounted(() => {
    map = new window.BMapGL.Map(dom.value)
    var point = new window.BMapGL.Point(121.334285, 31.097533)
    map.centerAndZoom(point, 15)
    var marker = new window.BMapGL.Marker(point) // 创建标注
    map.addOverlay(marker)
    var infoWindow = new window.BMapGL.InfoWindow('\n地址：上海市松江区G60科创园区', opts) // 创建信息窗口对象
    marker.openInfoWindow(infoWindow, point)
    map.enableScrollWheelZoom(true)
    // map.setMapType(window.BMAP_EARTH_MAP)
})
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    .title {
        margin-top: 20px;
        width: 100%;
        border-left: 3px solid #fe0000;
        height: 23px;
        font-size: 17px;
        font-weight: 400;
        color: #333333;
        box-sizing: border-box;
        padding-left: 15px;
    }
    .foo {
        margin-top: 20px;
        width: 100%;
        // height: auto;
        height: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }

    .card_shadow {
        margin-top: 15px;
        width: 100%;
        background: #ffffff;
        box-shadow: 0px 2px 15px 0px rgba(93, 93, 93, 0.22);
        border-radius: 5px;
        .card_top {
            height: 44px;
            text-align: center;
            line-height: 44px;
            border-bottom: 2px solid #d1d1d1;
        }

        .card_button {
            width: 100%;
            // height: 135px;
            height: 19vw;
            .card_left {
                margin-left: 30px;
                width: 80%;
                height: 60px;
                display: flex;
                align-content: center;
                .content_left {
                    margin-top: 12px;
                    margin-right: 10px;
                    width: 35px;
                    height: 35px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .content_right {
                    margin-top: 12px;
                    .text {
                        font-size: 12px;
                        font-weight: 400;
                        color: #333333;
                    }
                }
                .addmargintop {
                    margin-top: 16px;
                }
            }
            .line {
                margin-left: 7px;
                width: 95%;
                height: 1px;
                background-color: #d1d1d1;
            }
        }
    }

    .map {
        margin-top: 30px;
        margin-bottom: 30px;
        width: 100%;
        width: 345px;
        height: 246px;
        background: #ffffff;
        box-shadow: 0px 2px 15px 0px rgba(93, 93, 93, 0.22);
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px;
        #container {
            height: 100%;
            width: 100%;
        }
    }
}
// :deep(.BMap_bubble_pop) {
//     box-sizing: border-box;
//     padding-top: 20px !important;
//     width: 210px !important;
//     height: 93px;
//     &:img {
//         top: 60px;
//     }
// }
// :deep(.BMap_bubble_top) {
//     height: 29px;
// }
:deep(.BMap_bubble_title) {
    font-size: 12px !important;
}
:deep(.BMap_bubble_content) {
    font-size: 12px !important;
}
// :deep(.shadow:nth-child(7) > img) {
//     display: none !important;
// }
:deep(div.shadow) {
    display: none !important;
}
</style>