在vue项目中引入百度地图

最新推荐文章于 2024-05-10 09:55:53 发布

BaekhyunDE

最新推荐文章于 2024-05-10 09:55:53 发布

阅读量1.4k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/BaekhyunDE/article/details/126624644

版权

1、安装

npm install vue-baidu-map

2、全局注册，在main.js中引入以下代码

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '你申请的key'
})

3、界面

<template>
    <div>
        <baidu-map :zoom="zoom" @ready="handler" class="bm-view" :scroll-wheel-zoom='true'>
            <!-- scroll-wheel-zoom：能否通过滚轮缩放地图 -->
        </baidu-map>
    </div>
</template>

<script>
export default {

    data() {
        return {

            // 缩放级别
            zoom: 17
        };
    },

    mounted() {
    },

    methods: {
        handler({ BMap, map }) {

            // 标注点的经纬度
            var point = new BMap.Point(123.403032, 41.799835)
            map.centerAndZoom(point, 13)

            // 创建标注
            var marker = new BMap.Marker(point)

            // 将标注添加到地图中
            map.addOverlay(marker)
            var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
            map.addOverlay(circle)
        },
    },
};
</script>

<style lang="less" scoped>
.bm-view {
    width: 100%;
    height: 85vh;
}
</style>