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

uniapp使用百度地圖的保姆式教學(適合初學者!)

 更新時間：2023年03月27日 14:32:48   作者：謝謝，我還在努力  
公司項目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

最近在寫一個移動端的地圖項目，也是首次完整的去了解百度地圖api，這篇博客會手把手的教你如何使用百度地圖api和一些常見問題，后續(xù)我也會繼續(xù)更新完善此博客

1、百度地圖api，獲取密鑰

為什么選擇這個呢，作為頂級大廠，百度地圖開放平臺功能非常完善而且簡單明了

這篇博客主要是以javascriptAPI為主

首先登入控制臺左側(cè)應用管理→我的應用→創(chuàng)建應用

請?zhí)砑訄D片描述

請?zhí)砑訄D片描述

完成這些后可以看到我的應用中多了個剛才創(chuàng)建的，里面的訪問應用（AK）就是我們需要的AK。

2、uniapp中使用百度地圖api

看了很多博客，有的博客說npm下載對應的然后全局掛載之類的，這里我按照官網(wǎng)所說的來寫。

2.1web-view(第一個小重點!)

百度地圖api與我們之前使用的過的其他組件不同，初學者看官網(wǎng)中寫的是在html頁面中使用，然后uniapp項目里我們的頁面卻是.vue的文件，所以很懵逼。所以在這里呢，我們用到了uniapp中一個組件，名字叫web-view

請?zhí)砑訄D片描述

官網(wǎng)這句話什么意思呢，簡單的來說就是類似一個iframe標簽，也就是我們常說的在一個頁面中嵌套另一個頁面,并且我們嵌套的這個頁面呢會自動鋪滿整個頁面(除非我們給它設(shè)置寬高)

也就是說我們在要顯示的.vue文件里加上標簽來引入我們的.html文件，從而實現(xiàn)在頁面中使用百度地圖

2.2實例(h5端測試)

首先我們創(chuàng)一個map.html的文件(這里建議把文件放在static目錄下，不然在vue中引入的時候會發(fā)現(xiàn)沒反應)

請?zhí)砑訄D片描述

層級目錄這個有幾個都無所謂，反正根目錄得在static下,然后我們編輯下map.html文件

//這個文件里面就是我們對百度地圖進行一系列操作和更改的地方
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地圖</title>
		<style type="text/css">
			html {
				height: 100%
			}
 
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
 
			#mapPage {
				height: 100%;
				position: relative;
			}
 
			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
		</div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，則無需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
 
	<!-- 百度地圖 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=這里填剛才我們在百度地圖控制臺中得到的AK"></script>
  
  
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地圖  --------------------------------------------------------------------------------
 			var map = new BMapGL.Map("container");          // 創(chuàng)建地圖實例 
			var point = new BMapGL.Point(116.404, 39.915);  // 創(chuàng)建點坐標 
			map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點坐標和地圖級別
			map.enableScrollWheelZoom(true);     //開啟鼠標滾輪縮放
			map.setHeading(64.5);   //設(shè)置地圖旋轉(zhuǎn)角度
			map.setTilt(73);       //設(shè)置地圖的傾斜角度		
		});
	</script>
</html>

然后我們打開我們要用地圖的那個vue文件

<template>
	<view class="map">
      	//在web-view標簽中引入我們map.html文件的地址，如果沒顯示出來，按照上面說的把map.html文件放到static目錄下
      //不設(shè)置寬高的話地圖就會默認的鋪滿整個頁面
		<web-view src="/static/html/map.html" style="width: 100%;height: 500px;"></web-view>
      
	</view>
	
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {

		}
		
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 300px;
	}
</style>

最后讓我們運行一下項目

請?zhí)砑訄D片描述

可以看到地圖已經(jīng)加載出來了

3、百度地圖api基本參數(shù)和使用介紹

基本使用講解

var map = new BMapGL.Map("container");//創(chuàng)建地圖實例，與id匹配
var point = new BMapGL.Point(116.404, 39.915);//創(chuàng)建中心點的坐標(經(jīng)緯度)，百度地圖在坐標上有個轉(zhuǎn)換，百度對外接口用的是BD09坐標系，這個下一個博客會細說
map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點坐標和地圖級別
map.setHeading(64.5);   //設(shè)置地圖旋轉(zhuǎn)角度
map.setTilt(73);       //設(shè)置地圖的傾斜角度

部分參數(shù)

map.setMapType(BMAP_EARTH_MAP);      // 設(shè)置地圖類型為地球模式
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 copyrightCtrl = new BMapGL.CopyrightControl();  // 添加版權(quán)控件,左下方
map.addControl(copyrightCtrl);

切換成2d地圖

map.setHeading(0);  
map.setTilt(0); 
//上面這兩個值不要或者像我一樣設(shè)置成0,然后添加地圖類型為默認
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,

]}));

關(guān)于地圖交互功能和坐標轉(zhuǎn)換功能在下一篇博客里

總結(jié)

到此這篇關(guān)于uniapp使用百度地圖的保姆式教學的文章就介紹到這了,更多相關(guān)uniapp使用百度地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論