亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

前端vue3項目中百度地圖的使用api以及操作實例

 更新時間：2023年05月18日 08:43:21   作者：Chioe__  
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,但是找了好幾篇文章,發(fā)現(xiàn)都沒辦法成功實現(xiàn),現(xiàn)將方法記錄如下,下面這篇文章主要給大家介紹了關(guān)于前端vue3項目中百度地圖的使用api以及操作實例,需要的朋友可以參考下

一、使用百度地圖的準(zhǔn)備工作？

1、先注冊百度賬號 --> 申請成為百度開發(fā)者 --> 獲取服務(wù)密鑰

百度地圖官方地址

https://lbsyun.baidu.com/

二、百度地圖的簡單Demo

以下實例為vue3、ts項目中使用

1、給地圖設(shè)置一個容器，讓地圖容器充滿網(wǎng)頁。

<template>
    <div id="container"></div> //給地圖設(shè)置一個容器
</template>
 <script>
    ...
 </script>
  <style scoped>
      #container {
        width: 100% !important;
        height: 55vh !important;
        margin: 20px auto;
        overflow: hidden;
      }
  </style>

2、調(diào)用百度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'); // 創(chuàng)建地圖實例 
        var point = new BMap.Point(
            props.longitude,
            props.latitude,  
        );// 創(chuàng)建點坐標(biāo) ，
        map.centerAndZoom(new BMap.Point(props.longitude,props.latitude), 2); 
            //初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別
        var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注
        map.addOverlay(marker); // 將標(biāo)注添加到地圖中
        var opts = {
          width: 200, // 信息窗口寬度
          height: 100, // 信息窗口高度
          title: props.title // 信息窗口標(biāo)題
        };
        map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
        var infoWindow = new BMap.InfoWindow(
          props.reg_address,
          opts
        ); // 創(chuàng)建信息窗口對象
        marker.addEventListener('click', function () {
          map.openInfoWindow(infoWindow, point); //開啟信息窗口
        });
      });
      });
      return{
      }
    }
  });

3、實現(xiàn)的地圖效果

 三、百度地圖的常用api有哪些？

1、百度地圖的類型？

（1） map.setMapType(BMAP_EARTH_MAP); // 設(shè)置地圖類型為地球模式；

（2） map.setMapType(BMAP_NORMAL_MAP); // 設(shè)置地圖類型為標(biāo)準(zhǔn)地圖模式；

（3） map.setMapType(BMAP_SATELLITE_MAP); // 設(shè)置地圖類型為普通衛(wèi)星地圖；

2、百度地圖控件

前言：控件是負(fù)責(zé)與地圖交互的UI元素，百度地圖JS API支持比例尺、縮放、定位、城市選擇列表、版權(quán)，以及自定義控件。

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();  // 添加版權(quán)控件，用于展示版權(quán)信息
map.addControl(CopyrightControl);

3、具體可見百度地圖api文檔： https://lbsyun.baidu.com/

總結(jié)

到此這篇關(guān)于前端vue3項目中百度地圖的使用api以及操作的文章就介紹到這了,更多相關(guān)vue3百度地圖使用api內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論