uni-app 地图开发总结(未完)

最新推荐文章于 2025-04-17 08:34:53 发布

原创

最新推荐文章于 2025-04-17 08:34:53 发布

· 1.1k 阅读

1 ·

版权

本文总结了uni-app地图组件的使用经验，包括基本使用、动态设置缩放、点击覆盖物定位及点击坐标文字展现对应位置。在实际开发中，需要注意动态绑定数据和适配不同平台的地图API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面，开发uni的时候。地图组件的选择首要就是用uni原生封装好的map组件 uni-app官方map组件文档基本上打点路径回溯等基本功能是可以实现的，那如果需要复杂级开发。考虑平台之间的差距，很多办法可能只适用H5不适用app与小程序。值得一提的是，如果有指定地图（app），我这里开发测试的时候H5统一显示的是腾讯地图，真机运行统一显示的是高德地图，但是只需要在manifest上面设定清楚并配置key值，在打包的时候就会打包成想要的地图类型。

附录

①测试sha1码

地图生成安卓的测试js是需要sha1的以下为测试的sha1：
sha1：97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD
注意经过打包可以是可以查看真实打包后的地图组件设计

1、基本使用

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 130px;" :latitude="latitude" :longitude="longitude"	 :polyline="covers"
					:markers="markes" :scale="10">
				</map>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
   
		data() {
   
			return {
   
				id: 0, 
				title: 'map',
				latitude: 21.79343,
				longitude: 110.93480,
				markes: [{
   
					latitude: 21.79343,
					longitude: 110.93480
				}, {
   
					latitude: 21.70343,
					longitude: 110.99480
				}],
				covers: [{
   
					points: [{
   
							latitude: 21.79343,
							longitude: 110.93480
						},
						{
   
							latitude: 21.

最低0.47元/天解锁文章