vue项目中使用百度地图,详细过程

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

简述:我们在写项目的时候,有时候难免会用到地图,这里给大家介绍一下如何在vue项目中使用百度地图,获取可视区域坐标,以及添加线路、站点。

1、首先,在项目中安装百度地图依赖。

npm install vue-baidu-map --save

2、全局注册,在main.js中一次性引入百度地图组件库的所有组件,

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

 //  ak 是在百度地图开放平台申请的密钥 详见:我要申请百度地图ak 

申请百度地图ak的具体步骤如下:

(1)首先进入百度地图开放平台,然后是右上角导航栏 > 开发文档 > JavaScript API,如下图:

vue项目中使用百度地图,详细过程

(2)左边侧边栏 > 开发指南 > 账号和获取密钥,如下图:

vue项目中使用百度地图,详细过程

 或者使用局部注册,详见:百度地图局部注册

3、然后在vue页面直接使用。

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

四角坐标>>

百度地图获取可视区域四角坐标https://blog.csdn.net/weixin_65793170/article/details/128317808?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-128317808-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450路线站点>>

百度地图添加路线和站点https://blog.csdn.net/weixin_65793170/article/details/127846466?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127846466-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450

Vue Baidu Map>>

百度地图,在Vue项目中的使用文档https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

JavaScript API GL>>

百度地图,JavaScript使用文档https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/maptype文章来源地址https://www.toymoban.com/news/detail-413808.html

到了这里,关于vue项目中使用百度地图,详细过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue中使用百度地图

    3.在页面使用 4.百度地图初始化函数及批量生成自定义图标点 5.需求1:切换中心点 6.需求2:鼠标滑过自定义图标改变 需求3:鼠标滑过展示信息窗口

    2024年02月14日
    浏览(45)
  • vue 使用百度地图记录

    参考文档 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/infowindow https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0 参考链接:https://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.html 下载这个js

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

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

    2024年02月06日
    浏览(55)
  • vue3 中使用百度地图

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

    2023年04月17日
    浏览(52)
  • vue-使用Baidu(百度地图)实现输入位置获取定位经纬度

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

    2024年02月16日
    浏览(39)
  • 安卓:百度地图开发(超详细)

    目录 一、百度地图介绍 1. MapView类: 2. BaiduMap类: 3. GeoCoder类: 4.GeoCodeOption类: 5.GeoCodeResult类: 6. LocationClient类: 7.LocationClientOption 类: 8. RoutePlanSearch类: 9.LatLng 类: 10. PoiSearch 类:  11.PoiResult 类: 12.PoiInfo 类: 13.PoiOverlay 类: 14.MarkerOptions类: 15.MapStatusUpdate类: 二、使用

    2024年02月15日
    浏览(38)
  • Vue3 脚手架搭建项目详细过程

    如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载 然后重新安装:npm install @vue/cli -g 由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择,所以我们要使用  cmd / powershell,这里使用 cmd 1.vue create + 项目名称  2.模板选择,通过键

    2024年02月06日
    浏览(71)
  • 【Vue】集成百度地图

    1、获取百度地图 ak 密钥 2、登录网址 https://lbsyun.baidu.com/ 3、注册百度地图开放平台账号,填写认证信息,并且创建应用 注意 BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。 没有设置center 和 zoom 属性的地图

    2024年02月10日
    浏览(39)
  • vue2和vue3的渲染过程简述版

    在Vue 2的渲染过程中,包括以下几个关键步骤: 解析模板:Vue 2使用基于HTML语法的模板,首先会将模板解析成抽象语法树(AST),用于后续的编译和渲染过程。 编译模板:将解析后的抽象语法树编译成渲染函数。编译过程包括静态标记、生成可复用的渲染函数以及处理动态绑

    2024年02月10日
    浏览(34)
  • vue项目中使用高德地图

    最近做的项目中有个地图选择的功能,如下图所示: 所以在此记录下使用方法,望各位大神指导 我的应用 | 高德控制台 第一步: 去高德官网去创建一个属于自己的地图应用 (得到key和秘钥) 我的应用 | 高德控制台  这是添加的方式: 准备-入门-教程-地图 JS API | 高德地图

    2024年02月07日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包