冰凌汇编

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 35|回复: 0
收起左侧

[Vue.JS] Vue中使用百度地图

[复制链接]
TashaAwe 发表于 2022-8-21 22:33:07
安装
npm

[JavaScript] 纯文本查看 复制代码
$ npm install vue-baidu-map --save

cdn
[JavaScript] 纯文本查看 复制代码
<script src="https://unpkg.com/vue-baidu-map"></script>

在vue中引入百度地图
需要在main.js里全局注册
ak 需要在 百度地图开放平台 获取

Vue中使用百度地图 - TashaAwe_冰凌汇编

在main.js里写如下代码
[JavaScript] 纯文本查看 复制代码
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_APP_KEY'
})

在组件中调用
[JavaScript] 纯文本查看 复制代码
<template>
        <div class="about">
                <h1>百度地图简单的页面渲染</h1>
                <div id="container"></div>
        </div>
</template>
<style>
        #container {
                width: 800px;
                height: 600px;
        }
</style>
<script>
        export default {
                data(){
                        return {
                                map:null,
                        }
                },
                mounted() {
                        this.initMap();
                        this.map.addEventListener("click",e=>{
                        //这里要使用 window.BMapGL 不然会报错
                                var p = new window.BMapGL.Point(e.latlng.lng,e.latlng.lat);
                                // 创建一个标注
                                var m = new window.BMapGL.Marker(p);
                                // 放入到地图中
                                this.map.addOverlay(m);  
                        })
                },
                methods: {
                        initMap() {
                                // 新建一个百度地图的实例
                                this.map = new window.BMapGL.Map("container");
                                // 创建地图点(地图中心位置)
                                var point = new window.BMapGL.Point(116.404, 39.915);
                                // 设置地图的中心,和缩放级别
                                this.map.centerAndZoom(point, 15);
                                this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                        }
                }
        }
</script>

效果
Vue中使用百度地图 - TashaAwe_冰凌汇编

vue百度地图更多使用详见
https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
冰凌汇编免责声明
以上内容均来自网友转发或原创,如存在侵权请发送到站方邮件9003554@qq.com处理。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|站点统计|Archiver|小黑屋|RSS|冰凌汇编 ( 滇ICP备2022002049号 滇公网安备 53032102000029号)|网站地图

GMT+8, 2022-9-25 07:24 , Processed in 0.135443 second(s), 7 queries , Redis On.

冰凌汇编 - 建立于2021年12月20日

Powered by Discuz! © 2001-2022 Comsenz Inc.

快速回复 返回顶部 返回列表