前端vue3项目中百度地图的使用api以及操作实例

 更新时间:2023年05月18日 08:43:21   作者:Chioe__  
最近项目要用到百度地图api,好久没用到地图,就百度了一番,但是找了好几篇文章,发现都没办法成功实现,现将方法记录如下,下面这篇文章主要给大家介绍了关于前端vue3项目中百度地图的使用api以及操作实例,需要的朋友可以参考下

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

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{
      }
    }
  });

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/

总结

到此这篇关于前端vue3项目中百度地图的使用api以及操作的文章就介绍到这了,更多相关vue3百度地图使用api内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue全局混入之状态判断是否执行点击

    vue全局混入之状态判断是否执行点击

    这篇文章主要介绍了vue全局混入之状态判断是否执行点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 如何在vue项目中嵌入jsp页面的方法(2种)

    如何在vue项目中嵌入jsp页面的方法(2种)

    这篇文章主要介绍了如何在vue项目中嵌入jsp页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 让你一看就明白的$nextTick讲解

    让你一看就明白的$nextTick讲解

    在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过,我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom,这篇文章主要给大家介绍了关于$nextTick的相关资料,需要的朋友可以参考下
    2021-07-07
  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    这篇文章主要介绍了vue中$router和$route的区别,对vue感兴趣的同学,一定要看下
    2021-05-05
  • vue中自定义指令directive的详细指南

    vue中自定义指令directive的详细指南

    这篇文章主要给大家介绍了关于vue中自定义指令directive的相关资料,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令,需要的朋友可以参考下
    2021-09-09
  • Vue利用自定义指令实现按钮权限控制

    Vue利用自定义指令实现按钮权限控制

    这篇文章主要为大家详细介绍了Vue如何利用自定义指令实现按钮权限控制效果,文中的示例代码讲解详细,具有一定的学习价值,需要的可以参考下
    2023-05-05
  • Vue2.0 slot分发内容与props验证的方法

    Vue2.0 slot分发内容与props验证的方法

    本篇文章主要介绍了Vue2.0 slot分发内容与props验证的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue 二维码长按保存和复制内容操作

    vue 二维码长按保存和复制内容操作

    这篇文章主要介绍了vue 二维码长按保存和复制内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3 Suspense处理异步组件加载的工作原理

    Vue3 Suspense处理异步组件加载的工作原理

    Vue3在新版本中提供了一个新的API,称为Suspense,它可以使异步组件的加载更加高效和流畅,在本文中,我们将详细了解 Vue3 Suspense 处理异步组件加载的工作原理以及如何使用它来提高 Web 应用程序的性能
    2023-06-06

最新评论