uniapp中使用第三方百度地图

要使用第三方百度地图,首先要去百度地图官方申请一个密钥,之后引入百度地图的API文件,参考使用文档即可开发使用。而在uniapp中是没法直接引入百度地图API文件的,我们要结合uniapp中的web-view组件来使用。

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次iframe内嵌的其他url。
经过我多次实验web-view要引入的.HTML文件放到hybrid/html目录下面一直存在问题,然而放到static目录下面是正常的。

在用到地图的页面,通过web-view组件引入开发百度地图的静态页面

<template>
	<view class="alarmManagement">
		<!-- Map -->
		<view class="map" :style="[{
             
      height: winHeight + px}]">
			<web-view src="/static/html/map.html"></web-view>
		</view>
	</view>
</template>

在/static/html/map.html中开发百度地图的功能

经验分享 程序员 微信小程序 职场和发展