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

百度地图插件

安装

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>

把控件放到我们渲染的地图实例里就可以了

效果如下：

完整代码如下：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

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

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

    百度地图插件 安装 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 渲

  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config

  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    目录 Vue集成百度地图实现位置选择 百度地图选择地址效果 集成百度地图的具体实现 第一步:引入百度地图 JavaScript API v3.0 文件 第二步:编写百度地图选择位置组件 第三步:使用百度地图选择位置组件 百度地图Web开发 参考文章 Vue集成百度地图实现位置选择 需求:添加门店时,需要选择门店的省.市.区.详细地址.以及门店的经纬度信息. 解决方案:集成百度地图API,通过在地图上搜索或者点击获取门店的具体位置信息. 百度地图选择地址效果 具体效果如下图所示 集成百度地图的具体

  • vue中百度地图定位及附近搜索功能使用步骤

    目录 1.地图初始化相关 2.获取当前定位 3.根据当前定位地址附近搜索建议 1.地图初始化相关 文档:lbs.baidu.com/index.php?t… 申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 在出口html(public/html)文件下引入标签 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&

  • vue使用百度地图报错BMap is not defined问题及解决

    目录 使用百度地图报错BMap is not defined vue导入百度地图BMap 使用百度地图报错BMap is not defined 1.在index.html添加 密钥申请:http://lbsyun.baidu.com/apiconsole/key <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script

  • 解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

    目录 使用百度地图BMapGL内存泄漏 Out of Memory 解决 1.对象不定义在data中 2.在vue中组件使用 v-if 指令会从dom中移除 总结 使用百度地图BMapGL内存泄漏 Out of Memory 在项目中使用了ElementUI 的 drawer 组件有地图操作 并开启了 :destroy-on-close=“true” . 开关多次以后浏览器崩溃了. 刷新页面,打开任务管理器,复现刚刚的操作,会发现浏览器的内存占用一直在增加 解决 1.对象不定义在data中  

  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b

  • 如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    简介 一如既往,我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程. 话不多说,直接上图: 具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物.实现的过程作者分为以下两点给大家介绍介绍. 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写自定义覆盖物的,那么首先我们来讨论一下水波纹动画的实现. 首先我们可以看到图中的覆盖物是由一个红心和水波紋组成,其中红心是固定不动的,那么我们可以直接这么写: <div class="

  • vue中调用百度地图获取经纬度的实现

    vue中调用百度地图获取经纬度的实现

    项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度 拖动小红标 获取经纬度 关键词 查询获取经纬度 前期准备 首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可. 申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入 <script type=&quo

随机推荐