位置: IT常识 - 正文

前端vue3项目中百度地图的使用api及实例(vue3微前端)

编辑:rootadmin
前端vue3项目中百度地图的使用api及实例

目录

一、使用百度地图的准备工作?

二、百度地图的简单Demo

三、百度地图的常用api有哪些?

1、百度地图的类型?

2、百度地图控件


一、使用百度地图的准备工作?

推荐整理分享前端vue3项目中百度地图的使用api及实例(vue3微前端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3微前端,vue3微前端,前端vue项目开发流程及架构,前端 vue,前端 vue,vue前台项目,vue前台项目,vue前端项目实战,内容如对您有帮助,希望把文章链接给更多的朋友!

1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务密钥

百度地图官方地址https://lbsyun.baidu.com/

二、百度地图的简单Demo

以下实例为vue3、ts项目中使用

1、给地图设置一个容器,让地图容器充满网页。

<template> <div id="container"></div> //给地图设置一个容器</template> <script> ... </script> <style scoped> #container { width: 100% !important; height: 55vh !important; margin: 20px auto; overflow: hidden; } </style>

2、调用百度api

import { defineComponent, onMounted } from 'vue'; import { BMPGL } from '@/utils/bmpgl.js'; export default defineComponent({ props: { longitude: { default: '39.915', type: String }, latitude: { default:'116.404', type: String }, title: { default: '', type: String }, reg_address:{ default: '', type: String }, }, setup(props) { onMounted(() => { BMPGL('s5YsFdu79bjzphdfQK1mnqac1o8987EqxjW').then((BMapGL) => { // 百度地图API功能 var map = new BMap.Map('container'); // 创建地图实例 var point = new BMap.Point( props.longitude, props.latitude, );// 创建点坐标 , map.centerAndZoom(new BMap.Point(props.longitude,props.latitude), 2); //初始化地图,设置中心点坐标和地图级别 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var opts = { width: 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title: props.title // 信息窗口标题 }; map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var infoWindow = new BMap.InfoWindow( props.reg_address, opts ); // 创建信息窗口对象 marker.addEventListener('click', function () { map.openInfoWindow(infoWindow, point); //开启信息窗口 }); }); }); return{ } } });前端vue3项目中百度地图的使用api及实例(vue3微前端)

3、实现的地图效果

 三、百度地图的常用api有哪些?

1、百度地图的类型?

(1) map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式;

(2) map.setMapType(BMAP_NORMAL_MAP); // 设置地图类型为标准地图模式;

(3) map.setMapType(BMAP_SATELLITE_MAP); // 设置地图类型为普通卫星地图;

2、百度地图控件

前言:控件是负责与地图交互的UI元素,百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);var LocationControl= new BMapGL.LocationControl(); // 添加定位控件,用于获取定位map.addControl(LocationControl);var CopyrightControl= new BMapGL.CopyrightControl(); // 添加版权控件,用于展示版权信息map.addControl(CopyrightControl);

3、具体可见百度地图api文档: https://lbsyun.baidu.com/

本文链接地址:https://www.jiuchutong.com/zhishi/292313.html 转载请保留说明!

上一篇:GNSS算法相关开源代码(含多传感器融合相关项目)(简述gnss数据处理流程)

下一篇:CNN+LSTM+Attention实现时间序列预测(PyTorch版)

  • 待抵扣税金怎么算
  • 职工受到工伤后应该怎么办
  • 生产车间安装监控的目的
  • 收到房屋租金税率
  • 退回以前年度所得税费用会计分录
  • 增值税一般纳税人证明怎么查询
  • 企业收回以前注销时的坏账准备余额怎么处理?
  • 递延收益怎么入账
  • 营改增后企业所得税
  • 起征点是什么意思举例子说明
  • 卖桶装水税率
  • 国家级企业孵化器是什么意思
  • 园林绿化公司购入剪刀怎么做会计分录
  • 出纳可以做记账表格吗
  • 一月份开的票可以算到12月吗
  • 残保金工资总额怎么算
  • 公司关门账上的盈余公积怎么处理?
  • 残保金退回属于政府补助吗
  • 报关单上的运费怎么看
  • 以前年度损益调整会计分录
  • 个税申报密码是什么意思
  • 哪些费用可以税前扣除
  • 华为折叠手机mateXs3
  • 合同负债和预收账款的关系
  • 企业投资的工程项目包括
  • sixtypopsix.exe - sixtypopsix是什么进程 有什么用
  • 进项发票认证操作
  • 其他应收款期末贷方余额表示什么
  • php关联数组和索引数组的区别
  • EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
  • 进项票留底怎么做分录
  • 企业年度报告内容
  • 劳务报酬已扣税是否需报个税
  • 无法按时交纳税怎么办
  • 蒙特维德云雾森林
  • framework教程
  • Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
  • c++stl详解
  • 资产减值损失结转到哪里
  • 会计怎么计算
  • 建筑工程拨款流程
  • 税收罚款支出计入其他应付款吗对吗
  • 股东借款转增资本公积要验资吗
  • 公司购进软件的账务处理
  • 法人名称是什么意思
  • 加计抵减退税的会计分录
  • 企业异地预交的税怎么算
  • 挖机租赁如何做账
  • 个人所得税孩子教育怎么申报
  • 长期借调人员工资福利
  • 存货和固定资产一经计提减值以后期间不得转回
  • 员工福利费属于什么会计科目
  • 税务师报名条件和要求
  • 仓库包材问题和造成的后果
  • 邮寄发票的快递费走什么科目
  • 销售产品收到现款120元是什么制
  • 辞退福利是入工资还是福利费
  • 商业企业的营业成本包括
  • 怎么查企业适用的会计准则
  • 用户画像
  • mac怎么使用自动切换输入法
  • macu盘安装windows
  • un_a.exe
  • macbookpro4399小游戏
  • win8删除软件在哪里
  • win10无法使用内置管理员账户
  • win8开不了机怎么系统还原
  • 老生常谈的近义词
  • Node.js中的事件循环是什么
  • JavaScript浏览器扩展
  • 关于草丛:单局游戏内
  • 使用jQuery调用XML实现无刷新即时聊天
  • 如何用u盘重装电脑系统
  • android程序代码
  • 房产税纳税义务终止
  • 残疾人交房产契税有优惠吗
  • 福建省国家税务局通用定额发票
  • 税务登记成功后在哪里查询
  • 国地税发展历程
  • 社会保险登记表下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设