【Vue】集成百度地图

这篇具有很好参考价值的文章主要介绍了【Vue】集成百度地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue 集成 百度地图

1、获取百度地图 ak 密钥
2、登录网址 https://lbsyun.baidu.com/
【Vue】集成百度地图,Vue,vue.js,javascript,前端,vue

3、注册百度地图开放平台账号,填写认证信息,并且创建应用【Vue】集成百度地图,Vue,vue.js,javascript,前端,vue

安装

npm install vue-baidu-map --save

main.js

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, {
  ak: '你的AK 密钥',
});

示例

注意

  • BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。
  • 没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值。
  • 由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。

入门 HelloWorld

<template>
  <div >
    <baidu-map 
        :center="mapCenter" 
        :zoom="mapZoom" 
        class="map-container" 
        @ready="handler"></baidu-map>
  </div>
</template>

<script>
import { BaiduMap} from 'vue-baidu-map';
export default {
  name: "HelloWorld",
  components: {
    BaiduMap,
  },
  data() {
    return {
      // 中心坐标
      mapCenter: { lng: 116.397428, lat: 39.90923 },
      // 缩放级别,1~19
      mapZoom: 13,
      BMap:null,
      map:null
    };
  },
  methods: {
    handler ({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
    }
  }
}
</script>

<style scoped>
  .map-container{
    width: 100%;
    height: 600px;
  }
</style>

简单封装地图

地图组件
<template>
  <div>
    <baidu-map :center="center" :zoom="zoom" class="map-container"></baidu-map>
  </div>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map';
export default {
  components: {
    BaiduMap
  },
  props: {
    center: {
      type: String,
      required: true,
    },
    zoom: {
      type: Number,
      default: 13,
    },
  },
  data() {
    return {
      map: null,
    };
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style>
使用
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <b-d-map :center="mapCenter" :zoom="mapZoom" ref="bdMap"></b-d-map>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import BDMap from "@/components/BDMap.vue";
export default {
  name: 'HomeIndex',
  components: {
    BDMap
  },
  data() {
    return {
      mapCenter: '合肥',
      mapZoom: 13,
    }
  }
}
</script>
<style scoped>

</style>

文档地址

相关示例及其他方法可在此处查询!vue-baidu-map

【Vue】集成百度地图,Vue,vue.js,javascript,前端,vue文章来源地址https://www.toymoban.com/news/detail-687034.html

到了这里,关于【Vue】集成百度地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 中使用百度地图

    最近一个项目要用到地图,因为微信小程序用的也是百度地图,所以想着网页端也用百度地图,在网上查了很多方法,包括引入百度地图第三方库,还是有问题,发现最简单的方法就是在index.html中引入script,然后直接在相关页面肝就完事。 在百度开发者平台上面申请,其他

    2023年04月17日
    浏览(57)
  • vue项目中使用百度地图(一)

    vue+百度地图的基础使用。 首先,第一步申请key,保存好这个密钥。 链接:jspopular | 百度地图API SDK (baidu.com) 使用百度地图有两种方式:1.javaScript API    2.直接引用组件。 以2.0版本为例。 方法1:百度地图javaScript API 引入方式有两种。 方法1:index.html中引用 在想要展示地图的

    2024年02月12日
    浏览(44)
  • vue3使用百度地图(详)

    提示:该博客vue采用vue3,使用百度地图通过组件 vue-baidu-map-3x : 组件官网:https://map.heifahaizei.com/doc/baidu-map.html 下面会从头开始介绍如何使用百度地图以及常用组件功能(附带遇到的问题和解决方案) 步骤:1. 进入百度地图开放平台 | 百度地图API SDK | 地图开发 2.打开顶部控制

    2024年02月06日
    浏览(57)
  • vue项目中使用百度地图,详细过程

    简述:我们在写项目的时候,有时候难免会用到地图,这里给大家介绍一下如何在vue项目中使用百度地图,获取可视区域坐标,以及添加线路、站点。 1、 首先,在项目中安装百度地图依赖。 2、 全局注册,在main.js中一次性引入百度地图组件库的所有组件,  //   ak 是在百

    2023年04月15日
    浏览(45)
  • VUE百度地图加载3D模型(MapVThreeGallery)

    参考百度开发文档 补充下(里面有免费的可以拿来玩)3D模型下载网址 步骤 1: npm install mapv-three 安装插件 2:在index.html加载百度地图 注:加载model.glb文件需要是请求服务器来的,没有服务器资源的可以像我一样在本地用VS插件(Live Server)起了个小型服务器放3D模型数据 ----使用

    2024年02月11日
    浏览(50)
  • 【Vue】集成高德地图

    注册成为高德开发者 获取申请的安全密钥、申请好的Web端开发者Key 创建Vue 工程 创建地图组件 引入地图组件 首先创建一个vue工程 安装 创建地图组件 将代码中的xx 替换成你的安全密钥和Web端开发者Key 引入地图组件 测试预览

    2024年02月11日
    浏览(44)
  • vue-使用Baidu(百度地图)实现输入位置获取定位经纬度

    前言 开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,传递给后端存在数据库 找了一圈发现千篇一律,最后也是使用element的搜索输入款配合原生百度地图实现这个功能 点击地图需要逆地址解析,输入地址时调用百度地图渲染在下拉框,选择传输地址,经

    2024年02月16日
    浏览(42)
  • vue html 百度地图3D楼 建筑物上颜色 修改颜色

    先看效果图: 引入GL版 JS部分: 用mapvgl.ShapeLayer给3D楼上颜色,实际上就是创建一个3D物体 覆盖原来的物体 coordinates参数为多边形物体的经纬度,比如: 这个建筑, 6个经纬度 按顺序 链接成一个图形,再设置图形的高度 就完成了

    2024年02月16日
    浏览(44)
  • vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

    目录 引言 1、引用百度地图 2、在项目中使用百度地图 2-1、页面结构部分 2-2、js逻辑部分 3-1、页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在平易近人、灵活且可扩展,重点是声明式渲染和基于组件的架构。Vue 的反应性和可组合性使其成为开发复

    2024年01月16日
    浏览(38)
  • MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位

    一、实现效果 二、安装MongoDB 可以自行参考菜鸟链接:MongoDB 教程 | 菜鸟教程 (runoob.com) 1.下载mongodb数据库安装包: 网盘链接:https://pan.baidu.com/s/4rb1fOkc 2.进入mongodb-win32-x86_64-windows-5.0.9bin路径下创建db文件夹 3.启动服务 在bin目录下输入cmd+回车,输入命令:mongod --dbpath+你自己的

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包