Merge pull request '邓洁 page: 地图' (#18) from dengjie into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/18

components/publishSlide/publishSlide.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="slide">
-		<view class="mask" @click.self="quitSlide">
+		<view class="mask" @click="quitSlide">
 			<view class="content" @click.stop>
 				<view class="container">
 					<view class="content-1" @click="enterTransfer">
@@ -75,10 +75,12 @@
 		z-index: 20;
 
 	}
+
 	.content {
 		position: fixed;
 		transform: translate(-50%, -50%);
-			left: 50%; top: 40%;
+		left: 50%;
+		top: 40%;
 		height: 25%;
 		width: 90%;
 		background-color: #fff;
@@ -86,6 +88,7 @@
 		border-radius: 29rpx;
 
 	}
+
 	.container {
 		height: 100%;
 		width: 100%;
@@ -94,6 +97,7 @@
 		align-items: center;
 		z-index: 50;
 	}
+
 	.content-1 {
 		// vertical-align: middle;
 		height: auto;
@@ -103,6 +107,7 @@
 		justify-content: center;
 		align-items: center;
 	}
+
 	.selecter {
 		width: 49px;
 		height: 49px;
@@ -112,9 +117,9 @@
 		flex-direction: column;
 		// background-color: red;
 	}
+
 	.text {
 		font-size: 28rpx;
 		display: block;
 	}
-		
 </style>

pages.json

@@ -8,7 +8,7 @@
 		}
 	},
 	"pages": [
-		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		//pages数组中第一项表示应用启动页
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -21,6 +21,15 @@
 				"enablePullDownRefresh": true
 			}
 		},
+		{
+			"path": "pages/index/map/map",
+			"style": {
+				"navigationBarTitleText": "速配地图",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#339967",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/shopTransfer/shopTransfer",
 			"style": {
@@ -30,7 +39,6 @@
 				"enablePullDownRefresh": false
 			}
 		},
-		//+
 		{
 			"path": "pages/shopAddress/shopAddress",
 			"style": {

pages/index/index.vue

@@ -4,7 +4,7 @@
 		<TabBar :current-page="0"></TabBar>
 		<HomeNavCard></HomeNavCard>
 		<view class="news-box">
-			<u-notice-bar :text="newsTextLists" :bg-color="$uni-bg-color"></u-notice-bar>
+			<u-notice-bar :text="newsText" bg-color="#ffffff"></u-notice-bar>
 		</view>
 
 		<ShowShopList></ShowShopList>
@@ -18,12 +18,7 @@
 		},
 		data() {
 			return {
-				newsTextLists: [
+				newsText: '寒雨连江夜入吴'
-					'寒雨连江夜入吴',
-					'平明送客楚山孤',
-					'洛阳亲友如相问',
-					'一片冰心在玉壶'
-				],
 			}
 		},
 		onLoad() {
@@ -40,5 +35,4 @@
 		background-color: $uni-bg-color-grey;
 		width: 100%;
 	}
-	
 </style>

pages/index/map/map.vue

@@ -0,0 +1,102 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search-box-input">
+				<u-input placeholder="热门店铺" placeholder-style="color: #888888" prefixIcon="search"
+					prefixIconStyle="font-size: 24px;color: #888888;" border="true">
+				</u-input>
+			</view>
+		</view>
+		<view class="content">
+			<map id="map" @markertap="markerClick" class="map" :markers="marker" :show-location="true" :latitude="lat"
+				:longitude="lng"></map>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				lat: '30.57',
+				lng: '104.07',
+				marker: []
+			}
+		},
+		async onShow() {
+			// await this.getLifeTypeList();
+			// await this.getStatusCode()
+			// if (!this.lat && !this.lng) {
+			// 	await this.chooseSpot()
+			// } else {
+			// 	if (this.isGd) {
+			// 		await this.getPoiAround();
+			// 	} else {
+			// 		await this.getPoiPage();
+			// 	}
+			// }
+			// 地图
+			this._mapContext = uni.createMapContext("map", this);
+			this._mapContext.initMarkerCluster({
+				enableDefaultStyle: false,
+				zoomOnClick: true,
+				gridSize: 60,
+				complete(res) {
+					console.log('initMarkerCluster', res)
+				}
+			});
+			this._mapContext.on("markerClusterCreate", (e) => {
+				console.log("markerClusterCreate", e);
+			});
+		},
+		methods: {
+			// 图标点击
+			markerClick(e) {
+				console.log('图标点击', e);
+				// let markerId = e.markerId;
+				// this.marker.forEach(item => {
+				// 	if (markerId === item.id) {
+				// 		if (this.isGd) {
+				// 			uni.navigateTo({
+				// 				url: `/pages/communityLive/details?data=${item.label}&type=gd&name=${this.name}`
+				// 			})
+				// 		} else {
+				// 			uni.navigateTo({
+				// 				url: `/pages/communityLive/details?id=${item.id}&name=${this.name}&type=fgd`
+				// 			})
+				// 		}
+				// 	}
+				// })
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-box {
+		position: absolute;
+		z-index: 2;
+		top: 20rpx;
+		left: 50%;
+		transform: translateX(-50%);
+
+		.search-box-input {
+			width: 580rpx;
+			height: 62rpx;
+			background: #FFFFFF;
+			border-radius: 12rpx;
+			opacity: 0.85;
+		}
+	}
+
+	// 地图
+	.content {
+		width: 100%;
+		height: 460rpx;
+	}
+
+	.map {
+		width: 100%;
+		height: 100vh;
+	}
+</style>