Vue2中百度地图API的使用

2021-05-14 本文已影响0人鹏多多

1，前言

记录一下Vue2项目中，百度地图API的简单使用。

2，申请账号，获取key

需要先申请百度账号，然后登陆百度地图开放平台：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey，按照流程，申请成为开发者，然后创建应用。

申请

应用类型选择浏览器端，Referer白名单填*

创建项目

3，安装依赖

npm i --save vue-baidu-map

4，全局引入用法

先在main.js中引入

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

然后在你的.vue文件中

<template>
    <div id="index">
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
    </div>
</template>

<script>
export default {
    name: 'Index',
    components: {},
    data() {
        return {
            center: { lng: 0, lat: 0 },
            zoom: 0
        }
    },
    created() {},
    mounted() {},
    methods: {
        handler({ BMap, map }) {
            console.log(BMap, map)
            this.center.lng = 121.487899486
            this.center.lat = 31.24916171
            this.zoom = 15
        }
    }
}
</script>

<style lang="less" scoped>
.map{
    width: 500px;
    height: 500px;
}
</style>

没问题的话现在已经可以在页面上看到上海市了

5，局部引入用法

在你的.vue文件中

<template>
    <div id="index">
        <baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler" />
    </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
    name: 'Index',
    components: {
        BaiduMap
    },
    data() {
        return {
            ak: '你的key',
            center: { lng: 0, lat: 0 },
            zoom: 0
        }
    },
    created() {},
    mounted() {},
    methods: {
        handler({ BMap, map }) {
            console.log(BMap, map)
            this.center.lng = 121.487899486
            this.center.lat = 31.24916171
            this.zoom = 15
        }
    }
}
</script>

<style lang="less" scoped>
.map{
    width: 500px;
    height: 500px;
}
</style>

6，常用参数说明&文档

属性

属性名	类型	默认值	描述
ak	String	无	百度地图开发者平台申请的密钥，仅在局部注册组件时声明
center	Point, String	无	定位, 可使用如"广州市海珠区"的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoom	Number	无	缩放等级
min-zoom	Number	无	最小缩放级别
max-zoom	Number	无	最大缩放级别
map-click	Boolean	true	允许点击该项仅在地图组件挂载时加载一次
dragging	Boolean	true	允许拖拽
scroll-wheel-zoom	Boolean	true	允许鼠标滚轮缩放

事件

事件名	参数	描述
click	{type, target, point, pixel, overlay}	左键单击地图时触发此事件。当双击时，产生的事件序列为： click click dblclick
dblclick	{type, target, pixel, point}	鼠标双击地图时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎点赞关注评论；
END

往期文章

个人主页