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 :nth-child前有无空格的区别分析
Jul 11 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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程序?
2006/12/08 PHP
php5.2.0内存管理改进
2007/01/22 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python executemany的使用及注意事项
2017/03/13 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python安装whl文件过程图解
2020/02/18 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
项目采购员岗位职责
2014/04/15 职场文书
关爱老人标语
2014/06/21 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
HTML基础详解(上)
2021/10/16 HTML / CSS
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python