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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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采集神器cURL使用方法详解
2016/02/19 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
JavaScript静态的动态
2006/09/18 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python抓取网页内容示例分享
2014/02/24 Python
python基础教程项目三之万能的XML
2018/04/02 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python打开使用的方法
2019/09/30 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python regex库实例用法总结
2021/01/03 Python
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
英语简历自我评价
2014/01/26 职场文书
超市开学活动方案
2014/03/01 职场文书
教学质量评估实施方案
2014/03/17 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers