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

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

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

前言

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

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

為什么選擇這個(gè)呢，作為頂級(jí)大廠，百度地圖開(kāi)放平臺(tái)功能非常完善而且簡(jiǎn)單明了

這篇博客主要是以javascriptAPI為主

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

請(qǐng)?zhí)砑訄D片描述

請(qǐng)?zhí)砑訄D片描述

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

2、uniapp中使用百度地圖api

看了很多博客，有的博客說(shuō)npm下載對(duì)應(yīng)的然后全局掛載之類(lèi)的，這里我按照官網(wǎng)所說(shuō)的來(lái)寫(xiě)。

2.1web-view(第一個(gè)小重點(diǎn)!)

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

請(qǐng)?zhí)砑訄D片描述

官網(wǎng)這句話(huà)什么意思呢，簡(jiǎn)單的來(lái)說(shuō)就是類(lèi)似一個(gè)iframe標(biāo)簽，也就是我們常說(shuō)的在一個(gè)頁(yè)面中嵌套另一個(gè)頁(yè)面,并且我們嵌套的這個(gè)頁(yè)面呢會(huì)自動(dòng)鋪滿(mǎn)整個(gè)頁(yè)面(除非我們給它設(shè)置寬高)

也就是說(shuō)我們?cè)谝@示的.vue文件里加上標(biāo)簽來(lái)引入我們的.html文件，從而實(shí)現(xiàn)在頁(yè)面中使用百度地圖

2.2實(shí)例(h5端測(cè)試)

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

請(qǐng)?zhí)砑訄D片描述

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

//這個(gè)文件里面就是我們對(duì)百度地圖進(jìn)行一系列操作和更改的地方
<!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 如果不需要兼容小程序，則無(wú)需引用此 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=這里填剛才我們?cè)诎俣鹊貓D控制臺(tái)中得到的AK"></script>
  
  
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地圖  --------------------------------------------------------------------------------
 			var map = new BMapGL.Map("container");          // 創(chuàng)建地圖實(shí)例 
			var point = new BMapGL.Point(116.404, 39.915);  // 創(chuàng)建點(diǎn)坐標(biāo) 
			map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
			map.enableScrollWheelZoom(true);     //開(kāi)啟鼠標(biāo)滾輪縮放
			map.setHeading(64.5);   //設(shè)置地圖旋轉(zhuǎn)角度
			map.setTilt(73);       //設(shè)置地圖的傾斜角度		
		});
	</script>
</html>

然后我們打開(kāi)我們要用地圖的那個(gè)vue文件

<template>
	<view class="map">
      	//在web-view標(biāo)簽中引入我們map.html文件的地址，如果沒(méi)顯示出來(lái)，按照上面說(shuō)的把map.html文件放到static目錄下
      //不設(shè)置寬高的話(huà)地圖就會(huì)默認(rèn)的鋪滿(mǎn)整個(gè)頁(yè)面
		<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>

最后讓我們運(yùn)行一下項(xiàng)目

請(qǐng)?zhí)砑訄D片描述

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

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

基本使用講解

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

部分參數(shù)

map.setMapType(BMAP_EARTH_MAP);      // 設(shè)置地圖類(lèi)型為地球模式
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); 
//上面這兩個(gè)值不要或者像我一樣設(shè)置成0,然后添加地圖類(lèi)型為默認(rèn)
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,

]}));

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

總結(jié)

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

相關(guān)文章

最新評(píng)論