devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app 引用地图_uniapp引用地圖

作者：繁依Fanyi0 | 2024-05-14 00:33:58

赞

踩

uniapp引用地圖

插件市场引用为 https://ext.dcloud.net.cn/plugin?id=615

 插件引用后进行了部分修改

目录

 

index页面 

 组件页面  【创建nvue文件】

生成高德地图Key

index页面 

  1. <template>
  2. 	<div>
  3. 		<hchPosition   :storeData="storeData" :markers="markers"></hchPosition>
  4. 	</div>
  5. 	<!-- <div class="content">
  6. 		<map :scale='18' id="myMap"  style="width: 100%;" :style="{height: mapHeight + 'px'}"
  7. 		:markers="markers"  enable-satellite="true" :longitude="longitude" :latitude="latitude" :circles="circles"></map>
  8. 	</div> -->
  9. </template>
  10.  
  11. <script>
  12.     //引用组件  uni-app中创建nvue文件
  13. 	// import hchPosition from '@/components/hch-position/hch-position.vue'
  14. 	import hchPosition from '@/components/hch-position/hch-position.nvue'
  15. 	export default {
  16. 		data() {
  17. 			return {
  18. 				latitude: 0,
  19. 				longitude: 0,
  20. 				circles: [],//圆
  21. 				storeData: [ //门店信息展示  id name address tel 必填
  22. 					{
  23. 						id: 1,
  24. 						name: '热源',
  25. 						address: '热源1号站',
  26. 						tel: '热源1号站：瞬时热量、瞬时流量、单耗',
  27. 					},
  28. 					{
  29. 						id: 2,
  30. 						name: '热源',
  31. 						address: '热源2号站',
  32. 						tel: '热源2号站：瞬时热量、瞬时流量、单耗',
  33. 					}, {
  34. 						id: 3,
  35. 						name: '换热站',
  36. 						address: '换热站1号',
  37. 						tel: '换热站1：瞬时热量、瞬时流量、单耗',
  38. 					},
  39. 				],
  40. 				markers: [ //门店在地图上的标记 以下字段必填  
  41. 					{
  42. 						id: 1,
  43. 						latitude: 39.03,
  44. 						// latitude: 39.939203,
  45. 						longitude: 116.210689,
  46. 						iconPath: '/static/hch-position/ry1.png',
  47. 						callout: {
  48. 							content: "热源1号站",
  49. 							borderRadius: 10,
  50. 							padding: 10,
  51. 							display: "ALWAYS",
  52. 						}
  53. 					}, {
  54. 						id: 2,
  55. 						latitude: 39.945441,
  56. 						longitude: 116.217556,
  57. 						iconPath: '/static/hch-position/ry2.png',
  58. 						callout: {
  59. 							content: "热源2号站",
  60. 							borderRadius: 10,
  61. 							padding: 10,
  62. 							display: "ALWAYS",
  63. 						}
  64. 					},{
  65. 						id: 3,
  66. 						latitude: 39.8226,
  67. 						longitude: 116.250166,
  68. 						iconPath: '/static/hch-position/hrz1.png',
  69. 						callout: {
  70. 							content: "换热站1号",
  71. 							borderRadius: 10,
  72. 							padding: 10,
  73. 							display: "ALWAYS",
  74. 						}
  75. 					}
  76. 				],
  77. 			}
  78. 		},
  79. 		components: {
  80. 			hchPosition,
  81. 		},
  82. 		created() {
  83. 			// this.getLocationInfo()
  84. 		},
  85. 		methods: {
  86. 	// 获取地理位置
  87. 			// getLocationInfo() { 
  88. 			// 	 console.log(111)
  89. 			// 	var that = this
  90. 			// 	uni.getLocation({
  91. 			// 		type: 'wgs84',
  92. 			// 		success(res) {
  93. 			// 			console.log(res, "当前位置");
  94. 						
  95. 			// 			that.latitude = res.latitude
  96. 			// 			that.longitude = res.longitude
  97. 			// 			console.log(res.latitude+"——"+res.longitude)
  98. 			// 			//标记点
  99. 			// 			that.markers = [{
  100. 			// 				id: 1,
  101. 			// 				latitude: res.latitude,
  102. 			// 				longitude: res.longitude,
  103. 			// 				iconPath: '/static/hch-position/wd.png',
  104. 			// 			}]
  105. 			// 			that.circles = [{ //在地图上显示圆
  106. 			// 				latitude: res.latitude,
  107. 			// 				longitude: res.longitude,
  108. 			// 				fillColor: "#D9E6EF", //填充颜色
  109. 			// 				color: "#A7B6CB", //描边的颜色
  110. 			// 				radius: 50, //半径
  111. 			// 				strokeWidth: 2 //描边的宽度
  112. 			// 			}]
  113. 			// 		}
  114. 			// 	});
  115. 			// },
  116. 		}
  117. 	}
  118. </script>
  119.  
  120. <style>
  121.  
  122. </style>

 

 组件页面  【创建nvue文件】

  1. <template>
  2. 	<div>
  3. 		<div class="page-body">
  4. 			<div class="page-section page-section-gap">
  5. 				<map id="myMap" style="width: 100%; height: 300px;" show-compass="true" enable-satellite="true"
  6. 					:latitude="latitude" @anchorpointtap="anchorpointtap" :longitude="longitude" :markers="markers"
  7. 					show-location="true" enable-scroll enable-zoom @tap="bindtap" :circles="circles"
  8. 					@callouttap="callouttap" @regionchange="regionchange" @updated="updated">
  9. 				</map>
  10. 			</div>
  11. 			<div class="store-tips">
  12. 				<div class="store-des-box" v-if="storeFlag" @tap="storeDesEvn">
  13. 					<image class="store-img" :src="storemark"></image>
  14. 					<!-- <image class="store-img" src="/static/img/dzd.png"></image> -->
  15. 					<div class="store-des">
  16. 						<div class="store-name">{{store.name}}</div>
  17. 						<div class="store-address">地址:{{store.address}}</div>
  18. 						<div class="store-tel">电话:{{store.tel}}</div>
  19. 					</div>
  20.  
  21. 				</div>
  22. 			 
  23. 			</div>
  24. 			<div class="near-num">距离最近的门店{{distanceL}}千米</div>
  25. 			<!-- <image class="address-icon" src="/static/Home.png"></image> -->
  26. 		</div>
  27. 	</div>
  28. </template>
  29.  
  30. <script>
  31. 	export default {
  32. 		props: {
  33. 			 
  34. 			storeData: {
  35. 				type: Array,
  36. 			 
  37. 			},
  38. 			markers: {
  39. 				type: Array,
  40. 				 
  41. 			}
  42. 		},
  43. 		data() {
  44. 			return {
  45. 				store: {},
  46. 				storeFlag: false,
  47. 				storeAdFlag: true,
  48. 				distanceL: 0, //附近店门的距离
  49. 				latitude: 39,
  50. 				longitude: 116,
  51. 				circles: [], //圆
  52. 				controls: [],
  53. 				storemark: {},
  54. 			}
  55. 		},
  56. 		watch: {
  57. 			latitude(val) {
  58. 				this.latitude = val
  59. 			},
  60. 			longitude(val) {
  61. 				this.longitude = val
  62. 			}
  63. 		},
  64. 		mounted() {
  65. 			console.log(this.latitude)
  66. 			console.log(this.markers)
  67. 			this.getLocationInfo()
  68. 		},
  69. 		methods: {
  70. 			getLocationInfo() {
  71. 				console.log(111)
  72. 				var that = this
  73. 				uni.getLocation({
  74. 					type: 'wgs84',
  75. 					success(res) {
  76. 						console.log(res, "当前位置");
  77. 						that.latitude = res.latitude
  78. 						that.longitude = res.longitude
  79. 						console.log(res.latitude + "——" + res.longitude)
  80. 						//标记点
  81. 						that.markers.push({
  82. 							id: 1,
  83. 							latitude: res.latitude,
  84. 							longitude: res.longitude,
  85. 							iconPath: '/static/hch-position/wddw.png',
  86. 						})
  87. 						 
  88. 						that.circles = [{ //在地图上显示圆
  89. 							latitude: res.latitude,
  90. 							longitude: res.longitude,
  91. 							fillColor: "#D9E6EF", //填充颜色
  92. 							color: "#A7B6CB", //描边的颜色
  93. 							radius: 50, //半径
  94. 							strokeWidth: 2 //描边的宽度
  95. 						}]
  96. 					}
  97. 				});
  98. 			},
  99. 			// 点击了门店信息
  100. 			storeDesEvn() {
  101. 				uni.showToast({
  102. 					title: "自己自定义跳门店详情页介绍",
  103. 					duration: 2000,
  104. 					icon: "none"
  105. 				})
  106. 			},
  107. 			// 点击气泡
  108. 			callouttap(e) {
  109. 				this.storeFlag = true
  110. 				this.storeAdFlag = false
  111. 				for (let i = 0; i < this.storeData.length; i++) {
  112. 					const ele = this.storeData[i]
  113. 					// debugger
  114.  
  115. 					console.log(e.detail.markerId)
  116. 					if (ele.id == e.detail.markerId) {
  117. 						this.store = ele
  118. 						this.storemark = this.markers[i].iconPath
  119. 						break
  120. 					}
  121. 				}
  122. 			},
  123. 			anchorpointtap(e) {
  124. 				console.log(666666666666666)
  125. 				console.log(e.detail)
  126. 			},
  127. 			// 点击地图
  128. 			bindtap(id) {
  129.  
  130. 				this.storeFlag = false
  131. 				// this.storeAdFlag=true;
  132. 			},
  133. 			// 隐藏广告图片
  134. 			// hideAd() {
  135. 			//   this.storeAdFlag = false
  136. 			// },
  137. 			updated() {
  138. 			 
  139. 			},
  140. 			// 改变视野时改变经纬度
  141. 			regionchange(e) {
  142. 				let _this = this
  143. 				// 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
  144.  
  145. 				// var mapCtx = wx.createMapContext("myMap", this)
  146. 				var mapCtx = uni.createMapContext("myMap", this)
  147. 				mapCtx.getCenterLocation({
  148. 					success: function(res) {
  149. 						_this.centerLatitude = res.latitude
  150. 						_this.centerLongitude = res.longitude
  151. 						_this.nearDistance(
  152. 							_this.markers,
  153. 							_this.centerLatitude,
  154. 							_this.centerLongitude
  155. 						)
  156. 					},
  157. 					fail: function(res) {
  158. 						console.log(res)
  159. 					}
  160. 				}) //获取当前地图的中心经纬度
  161. 			},
  162. 			// 两点间距离
  163. 			distance(la1, lo1, la2, lo2) {
  164. 				var La1 = (la1 * Math.PI) / 180.0
  165. 				var La2 = (la2 * Math.PI) / 180.0
  166. 				var La3 = La1 - La2
  167. 				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
  168. 				var s =
  169. 					2 *
  170. 					Math.asin(
  171. 						Math.sqrt(
  172. 							Math.pow(Math.sin(La3 / 2), 2) +
  173. 							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
  174. 						)
  175. 					)
  176. 				s = s * 6378.137 //地球半径
  177. 				s = Math.round(s * 10000) / 10000
  178. 				return s
  179. 			},
  180. 			// 计算最近的距离
  181. 			nearDistance(array, centerLatitude, centerLongitude) {
  182. 				let temp = []
  183. 				for (let i = 0, l = array.length; i < l; i++) {
  184. 					const element = array[i]
  185. 					let d = this.distance(
  186. 						element.latitude,
  187. 						element.longitude,
  188. 						centerLatitude,
  189. 						centerLongitude
  190. 					)
  191. 					temp.push(d)
  192. 				}
  193. 				this.distanceL = Math.min.apply(null, temp)
  194. 			}
  195. 		},
  196. 		onShow() {},
  197. 		onReady() {}
  198. 	}
  199. </script>
  200.  
  201. <style lang="scss" scoped>
  202. 	.content {
  203. 		text-align: center;
  204. 		height: 400rpx;
  205. 	}
  206.  
  207. 	.page-section {
  208. 		z-index: 0;
  209. 	}
  210.  
  211.  
  212. 	.store-tips {
  213. 		width: 600rpx;
  214. 		height: 100rpx;
  215. 		margin: 10rpx auto;
  216. 		border-radius: 10rpx;
  217. 		position: absolute;
  218. 		top: 10rpx;
  219. 		left: 50%;
  220. 		transform: translate(-50%, 0);
  221. 		z-index: 2;
  222. 		overflow: hidden;
  223.  
  224. 		.store-des-box {
  225. 			background: #fff;
  226. 		}
  227.  
  228. 		.store-img {
  229. 			width: 80rpx;
  230. 			height: 80rpx;
  231. 			border-radius: 10rpx;
  232. 			margin: 10rpx;
  233. 			float: left;
  234. 		}
  235.  
  236. 		.store-des {
  237. 			padding-top: 8rpx;
  238. 			float: left;
  239. 			line-height: 1;
  240. 			font-size: 22rpx;
  241. 			color: #666;
  242. 			padding-left: 20rpx;
  243.  
  244. 			.store-name {
  245. 				font-weight: 600;
  246. 				color: deeppink;
  247. 			}
  248. 		}
  249.  
  250. 		.store-clear {
  251. 			width: 30rpx;
  252. 			height: 30rpx;
  253. 			position: absolute;
  254. 			top: 7rpx;
  255. 			right: 7rpx;
  256. 			margin: 30rpx;
  257. 		}
  258. 	}
  259.  
  260.  
  261.  
  262. 	.address-icon {
  263. 		width: 38rpx;
  264. 		height: 40rpx;
  265. 		position: absolute;
  266. 		top: 22%;
  267. 		left: 50%;
  268. 		z-index: 2;
  269. 		margin-bottom: -20rpx;
  270. 		margin-left: -20rpx;
  271. 	}
  272.  
  273. 	.near-num {
  274. 		padding: 10rpx 20rpx;
  275. 		border-radius: 10rpx;
  276. 		position: absolute;
  277. 		top: 17%;
  278. 		left: 50%;
  279. 		z-index: 2;
  280. 		font-size: 24rpx;
  281. 		background: #fff;
  282. 		transform: translate(-50%, 0);
  283. 	}
  284. </style>

生成高德地图Key

上述代码调试是可以定位到当前位置的，如需发布后仍需定位 则需要申请key

发布版安全码SHA1
应用打包时使用证书的指纹字符串（SHA1）
HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
HBuilderX云端打包选择“公共测试证书”时，SHA1值为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，详情参考：https://ask.dcloud.net.cn/article/36522
HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/36522
注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位 

申请高德地图key时 PackageName为您打包时的包名

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/566516
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号