位置: 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版)

  • 收到退回的款项怎么做分录
  • 法人能把公司账户的钱都转走么
  • 固定资产盘盈为什么计入盈余公积
  • 小企业会计准则和企业会计准则的区别
  • 新会计准则下接会计科目
  • 境外机构在境内发行的人民币债券
  • 退休工资要缴纳税吗
  • 个人生产所得税计算
  • 出口零退税率是什么意思
  • 非独立核算的分公司可以开票吗
  • 安全费用中的固定资产如何写会计分录?
  • 劳务所得税税率表最新
  • 民非企业购买低保政策
  • 认缴制下收到股东转入的钱怎么入账
  • 中国公司外派美国工作
  • 企业给员工发放最低生活保障
  • 民办幼儿园所得税优惠政策
  • 固定资产处理怎么入账
  • 填报企业年报
  • 现金银行存款日记账日清月结
  • 长期股权投资减值准备是什么意思
  • 小微企业免税的会计分录怎么写
  • 企业筹资付给第三方账户
  • win10粘贴复制无效
  • 如何查看自己的qq密码
  • PHP:curl_multi_setopt()的用法_cURL函数
  • u盘写保护格式化
  • win7纯净版系统官网
  • php代码报错
  • 销售商品的结转
  • php7.3安装
  • Linux | 将SpringBoot+Vue项目部署到服务器上
  • iscsiadm命令详解
  • php页面跳转可以用header
  • 以件数为印花税计税的有哪些
  • 接受捐赠计入
  • 税金及附加需不需要计提
  • 农产品怎么自产自销
  • 应收票据背书转让购买原材料
  • 人力资源外包服务平台
  • 弥补企业以前年度亏损 顺序
  • 股东每月分红合理吗?
  • 没有报关单可以出口吗
  • 往来是啥意思
  • 母子公司可以合并吗
  • 怎么判断政府
  • 企业处理原材料会计分录
  • 实际利率 会计
  • 存货盘亏的账务处理怎么做
  • 内部交易固定资产折旧为什么调整
  • win xp系统安装
  • windows7的常用菜单
  • win98拨号上网
  • 开机提示按CTRL+ALT+DEL,无限重启怎么办
  • 在windowsxp的应用程序中,经常有一些菜单选项呈暗灰色
  • 苹果mac系统怎么更新
  • win8系统如何关机
  • win10激活界面打不开
  • win7系统自动重启日志
  • linux的安装方法
  • cocos2dx 教程
  • linux file-nr
  • cocos lua js
  • Access to the path "LibraryUnityAssembliesUnityEngine.xml" is denied.
  • easyui combobox默认选中
  • 家字取名男孩名字
  • android内存泄露 工具
  • 批处理脚本怎么写
  • shell脚本编程实例
  • linux监控网络请求
  • android检测权限是否开启
  • 工具的图
  • ajax与java使用实例
  • 开票软件中如何打印已开具的发票
  • 个体工商户地税没有注销有影响吗
  • 20年灵活就业人员社保新标准
  • 开电子发票流程步骤
  • 临沂学生医疗保险多少钱
  • 东莞国税咨询电话
  • 国外工资个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设