Vue的百度地图插件尝试使用


Posted in Javascript onSeptember 06, 2017

百度地图插件

安装

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 #Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
详谈js原型继承的一些问题
Sep 06 #Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 #Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 #Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
js中判断控件是否存在
2010/08/25 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
python制作小说爬虫实录
2017/08/14 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
班组长岗位职责范本
2014/01/05 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
婚庆司仪主持词
2014/03/15 职场文书
电工技术比武方案
2014/05/11 职场文书
企业环保标语
2014/06/10 职场文书
世博会口号
2014/06/20 职场文书
道歉信范文
2015/05/12 职场文书
行政处罚事先告知书
2015/07/01 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL