首页地图

manifest.json

@@ -17,7 +17,8 @@
 		"modules": {
 			"Payment": {},
 			"Share": {},
-			"OAuth": {}
+			"OAuth": {},
+			"Maps": {}
 		},
 		"safearea": {
 			"bottom": {
@@ -159,12 +160,9 @@
 		}
 	},
 	"quickapp": {},
-
 	"mp-weixin": {
-		"appid": "wx8b2b4e2abfd0744f",
-		"requiredPrivateInfos": [ 
-		    "getLocation"
-		  ],
+		"appid": "wx932f9873f2dc5655",
+		"requiredPrivateInfos": ["getLocation"],
 		"setting": {
 			"urlCheck": false,
 			"minified": true,

pages/index/diy/index_mall.vue

@@ -1,19 +1,26 @@
 <template>
 	<view>
 		<!-- <headerSerch :dataConfig="headItem"></headerSerch> -->
-		<view class="nav-bar_2 flex-row justify-between">
+		<view class="nav-bar_2">
 			<text class="text_3">中意购</text>
 		</view>
-		<view class="block_2 flex-row justify-between">
-			<view class="image-text_9 flex-row justify-between">
-				<image class="icon_1" referrerpolicy="no-referrer"
-					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng64f8d7838848f656c98b8047aa0940b03a63be81a880f5a9920d8242f6be887d" />
-				<text class="text-group_1">上海市浦东新区秀浦路29号三层303室</text>
+		<view class="block_2  ">
+			<view class = "map_box" >
+				<map id="map"
+					 class="map"
+					 :enable-scroll="false"
+					 :latitude="markers[0].latitude"
+					 :longitude="markers[0].longitude"
+					 :markers="markers"
+				>
+				</map>
 			</view>
-			<view class="image-text_10 flex-row justify-between">
-				<text class="text-group_2" @click="getCurrentLocation()">切换地点</text>
+
+			<view class="image-text_10 flex-row">
+<!--				<text class="text-group_2" @click="getCurrentLocation()">切换地点</text>-->
+				<text class="text-group_2" @click="changeAddress">切换地点</text>
 				<image class="icon_2" referrerpolicy="no-referrer"
-					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng91356afb3fca819201cc9be0df3b1c18cca66d523b364042bcf5fbdf766a8902" />
+					src="../../../static/images/quehuan.png" />
 			</view>
 		</view>
 		<!-- 轮播 -->
@@ -48,6 +55,25 @@
 		</view>
 		<view v-else>
 		</view>
+		<uni-popup ref="popup" type="top">
+			<view class="popup flex-col justify-center ">
+
+				<view class="map1_box flex-row justify-center">
+					<map id="map1"
+						 class="map"
+						 :latitude="markers1[0].latitude"
+						 :longitude="markers1[0].longitude"
+						 :markers="markers1"
+						 @regionchange="regionChange"
+					>
+					</map>
+				</view>
+				<view class="btn_box flex-row justify-center">
+					<u-button @click="closePopup">取消</u-button>
+					<u-button @click="changeAddressConfirm">确定</u-button>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -65,13 +91,42 @@ import {latestGroupon, historyGroupon, detailGroupon, goodsDetail} from '../../.
 import {
 	goShopDetail
 } from '@/libs/order.js';
+import UButton from "../../../uni_modules/uview-ui/components/u-button/u-button";
 export default {
 	components: {
+		UButton,
 		headerSerch,
 		latestGroupBuying
 	},
 	data () {
 		return {
+			markers:[{
+				id: 1,
+				latitude: '26.64702',//纬度，必填
+				longitude:'106.63024',//经度，必填
+				title:'标记点名称',//标注点名
+				width:32,//标注图标宽度，Number类型
+				height:32,//标注图标高度，Number类型
+				iconPath:'../../../static/images/addressIcon.png',//显示的图标，必填
+				label: {
+					content: `标记点名称`,
+					textAlign:"center"
+				}
+			}],
+
+			markers1:[{
+				id: 1,
+				latitude: '26.64702',//纬度，必填
+				longitude:'106.63024',//经度，必填
+				title:'标记点名称',//标注点名
+				width:32,//标注图标宽度，Number类型
+				height:32,//标注图标高度，Number类型
+				iconPath:'../../../static/images/addressIcon.png',//显示的图标，必填
+				label: {
+					content: `地址名称，暂时展示这个吧`,
+					textAlign:"center"
+				}
+			}],
 			currentId: 0,
 			noticeShow: false,
 			noticeContent: '',
@@ -140,6 +195,52 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * 地图点击事件 定位不正确，原因未知，先不用
+		 * @param e
+		 */
+		// tap(e){
+		// 	console.log(e)
+		// 	this.markers1[0].latitude= e.detail.latitude;
+		// 	this.markers1[0].latitude= e.detail.latitude;
+		//
+		// },
+		/**
+		 * 地图拖动事件
+		 * @param e
+		 */
+		regionChange(e){
+			this.mapContext = uni.createMapContext("map1", this);
+			this.mapContext.getCenterLocation({
+				type: 'gcj02',
+				success: (res) => {
+					this.markers1[0].longitude = res.longitude;
+					this.markers1[0].latitude = res.latitude;
+
+				}
+			});
+
+		},
+		/**
+		 * 解析地址信息
+		 * @param longitude
+		 * @param longitude
+		 */
+		// getAddressMsg(longitude,longitude){
+		// 	//家里没信号收不到验证码短信。申请不到腾讯地图key，先这样吧。
+		//
+		// },
+
+		closePopup(){
+			this.$refs.popup.close()
+		},
+		changeAddressConfirm(){
+			this.$refs.popup.close()
+			this.markers = this.markers1
+		},
+		changeAddress(){
+			this.$refs.popup.open('top')
+		},
 		// 通过自带的方法获取到当前的经纬度，调用方法获取到地址获取到地址的中文信息
 		getCurrentLocation () {
 			let that = this //在uniapp中药定义一下this才能使用
@@ -149,6 +250,10 @@ export default {
 					console.log("dizhixinxi -> ", res)
 					that.positionInfo.longitude = res.longitude;
 					that.positionInfo.latitude = res.latitude;
+					this.markers1[0].longitude = res.longitude;
+					this.markers1[0].latitude = res.latitude;
+					this.markers[0].longitude = res.longitude;
+					this.markers[0].latitude = res.latitude;
 					// that.loAcquire(that.positionInfo.longitude, that.positionInfo.latitude)
 				}
 			});
@@ -364,6 +469,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	@import '../../../static/css/common.css';
 page {
 	background-color: #ee4040;
 }
@@ -652,14 +758,14 @@ page {
 
 
 .block_2 {
-	display: flex;
-	justify-content: space-around;
 	box-shadow: 0px 2px 4px 0px rgba(178, 35, 56, 0.05);
-	background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7ac954eaf57b4d42b263ef296c3fa351_mergeImage.png);
 	align-self: center;
 	margin: 20rpx;
 	margin-top: 4px;
-	padding: 15px 8px 15px 8px;
+	height: 70px;
+	position: relative;
+	top:0;
+	left:0
 }
 
 .image-text_9 {
@@ -684,12 +790,11 @@ page {
 	white-space: pre-line;
 }
 
-.flex-row {
-	display: flex;
-}
-
 .image-text_10 {
 	width: 56px;
+	position: absolute;
+	top:25px;
+	right:10px
 }
 
 .text-group_2 {
@@ -697,7 +802,6 @@ page {
 	color: rgba(153, 153, 153, 1);
 	font-size: 10px;
 	font-weight: NaN;
-	text-align: right;
 	line-height: 20px;
 }
 
@@ -706,15 +810,17 @@ page {
 	height: 12px;
 	margin: 4px 0 4px 0;
 }
-
-
-
-
-
-
-
-
-
+.bord{
+	border: 1px solid red;
+}
+.map_box{
+	width: 100%;
+	height: 70px;
+}
+.map{
+	width: 100%;
+	height: 100%;
+}
 
 .indicator {
         @include flex(row);
@@ -727,7 +833,7 @@ page {
              background-color: rgba(255, 255, 255, 0.35);
              margin: 0 5px;
              transition: background-color 0.3s;
-    
+
             &--active {
                  background-color: #ffffff;
              }
@@ -747,4 +853,17 @@ page {
              font-size: 12px;
          }
     }
+	.popup{
+		width: 750rpx;
+		height: 750rpx;
+		background-color: #F9F9F9;
+	}
+	.map1_box{
+		width: 750rpx;
+		height: 670rpx;
+	}
+	.btn_box{
+		width: 750rpx;
+		height: 80rpx;
+	}
 </style>

static/css/common.css

@@ -0,0 +1,103 @@
+body *,
+page view {
+	box-sizing: border-box;
+	flex-shrink: 0;
+}
+
+body {
+	font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+		Arial, PingFang SC-Light, Microsoft YaHei;
+	margin: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 1px solid transparent;
+	outline: none;
+	background-color: transparent;
+}
+
+button:active {
+	opacity: 0.6;
+}
+
+.flex-col {
+	display: flex;
+	flex-direction: column;
+}
+
+.flex-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.flex-row-reverse {
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+.bord{
+	border: 1px solid red;
+}
+
+
+
+
+.justify-start {
+	display: flex;
+	justify-content: flex-start;
+}
+
+.justify-center {
+	display: flex;
+	justify-content: center;
+}
+
+.justify-end {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.justify-evenly {
+	display: flex;
+	justify-content: space-evenly;
+}
+
+.justify-around {
+	display: flex;
+	justify-content: space-around;
+}
+
+.justify-between {
+	display: flex;
+	justify-content: space-between;
+}
+
+.align-start {
+	display: flex;
+	align-items: flex-start;
+}
+
+.align-center {
+	display: flex;
+	align-items: center;
+}
+
+.align-end {
+	display: flex;
+	align-items: flex-end;
+}
+
+.sticky {
+	/* #ifndef APP-PLUS-NVUE */
+	display: flex;
+	position: -webkit-sticky;
+	/* #endif */
+	position: sticky;
+	top: 0rpx;
+	z-index: 99;
+}
+.bord{
+	border:  1px  solid  red;
+}