百度地图插件

安装

CDN全局安装

<script src="https://unpkg.com/vue-baidu-map"></script>

插件的引入

Vue.use(VueBaiduMap.default, {
    ak: 'YOUR_APP_KEY',
})

ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apico... */

地图视图

BmView 是用于渲染百度地图实例可视化区域的容器

使用 Bmview 渲染一个地图实例：

<template id="baidu">   
    <baidu-map class="map">
        <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
    </baidu-map>
</template>

给地图添加一个缩放控件

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

把控件放到我们渲染的地图实例里就可以了

效果如下：

Vue的百度地图插件尝试

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>baidumap</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-baidu-map"></script>
    <style>
        #map{
            width: 1000px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map">
        <baidu></baidu>
    </div>
    <template id="baidu">
            
        <baidu-map class="map">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
        </baidu-map>
    
    </template>
    <script>
        Vue.use(VueBaiduMap.default, {
            ak: 'YOUR_APP_KEY',
        })
        Vue.component("baidu",{
            template:'#baidu'
        })
        new Vue({
            el:'#map'
        })
    </script>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的Vue的百度地图插件尝试全部内容，希望文章能够帮你解决Vue的百度地图插件尝试所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: 一个vue的日历组件下一篇:vue从后台获取数据赋值给data，如...

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程