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的DOM操作之删除节点示例
Jan 03 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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
各种战术和打法的原创者
2020/03/04 星际争霸
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
Promise扫盲贴
2019/06/24 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
Python中os.path用法分析
2015/01/15 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python通过future处理并发问题
2017/10/17 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python 有效的括号的实现代码示例
2019/11/11 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
村党支部书记承诺书
2014/05/29 职场文书
法学求职信
2014/06/22 职场文书
个人党性分析材料
2014/12/19 职场文书
稽核岗位职责
2015/02/10 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
十八大观后感
2015/06/12 职场文书
单位工资证明范本
2015/06/12 职场文书
倡议书怎么写?
2019/04/11 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python