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.boxy对话框插件代码
Oct 26 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
关于延迟加载JavaScript
May 05 Javascript
javascript 用函数实现继承详解
May 28 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
如何手写一个简易的 Vuex
Oct 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实现的简单mock json脚本分享
2015/02/10 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
tagName的使用,留一笔
2006/06/26 Javascript
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
js单词形式的运算符
2014/05/06 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python实现的rsa加密算法详解
2018/01/24 Python
Python中optparser库用法实例详解
2018/01/26 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Django实现发送邮件功能
2019/07/18 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
java程序员面试交流
2012/11/29 面试题
UNIX文件系统分类
2014/11/11 面试题
信息部岗位职责
2013/11/12 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
秘书英文求职信
2014/04/16 职场文书
具结保证书
2015/01/17 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle