欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API

 更新時(shí)間：2022年04月26日 16:40:46   作者：失散多年的哥哥  
部分項(xiàng)目需要地圖的嵌入，這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助

1.賬號(hào)注冊(cè)

在百度地圖開放平臺(tái)注冊(cè)賬號(hào)并登錄
網(wǎng)站地址： https://lbsyun.baidu.com/index.php?title=jspopularGL

2.獲取密鑰

進(jìn)入開發(fā)文檔并進(jìn)行密鑰申請(qǐng)

在這里插入圖片描述

在這里插入圖片描述

3.創(chuàng)建項(xiàng)目

在這里插入圖片描述

在這里插入圖片描述

4.項(xiàng)目導(dǎo)入

此時(shí)我們已經(jīng)獲取了密鑰，接著就可以在項(xiàng)目中導(dǎo)入了

首先安裝百度地圖

npm install vue-baidu-map --save

接著注冊(cè)（這里我采用局部注冊(cè)）

//局部注冊(cè)   百度地圖
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

最后在界面文件中導(dǎo)入

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 創(chuàng)建標(biāo)注
      map.addOverlay(marker) // 將標(biāo)注添加到地圖中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
}

5.效果展示

在這里插入圖片描述

以上就是vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API的詳細(xì)內(nèi)容，更多關(guān)于vue接入百度地圖API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論