fish-uniapp/pages/map/index.vue

<template>
	<map id="map" :longitude="map.longitude" :latitude="map.latitude" :markers="mapConfig" scale="12" show-location
		@regionchange="test" style="width: 100%; height: 100%;"></map>
</template>
<script>
	import {
		getFishIndex,
		getFishPlaceInfo
	} from '@/api/fish'

	export default {

		name: "Index",
		components: {},
		props: {},
		data: function() {
			return {
				mapConfig: [],
				map: {
					latitude: 30.579150542191858,
					longitude: 114.31590683471099
				},
			};
		},
		onShow: function() {
			
			this._mapContext = uni.createMapContext("map", this);
			this._mapContext.moveToLocation()

			let that = this;
			
			// uni.getLocation({
			// 	success(localtionRs) {
			// 		that.refresh(localtionRs);
			// 	},
			// })
		},
		methods: {
			test(res) {
				console.log("res",res)
				let that = this;
				if (res.type == "end") {
					console.log(this._mapContext)
					this._mapContext.getCenterLocation({
						success(res){
							that.refresh(res)
						}
					})
				}
			},
			refresh(location){
				let that = this;
				getFishIndex(location).then(res => {
					console.log(res.data)
					if (res.data) {
						res.data.forEach(e => {
							// 需要判断不存在对应标点才继续新增,另外太近标点需要做marker聚合
							// 性能：可以考虑把之前增加的删掉（如果页面上标点太多）
							that.mapConfig.push({
								alpha: .8,
								height: 30,
								width: 30,
								id: e.id,
								name: e.placeName,
								latitude: Number(e.latitude),
								longitude: Number(e.longitude),
								iconPath: e.mode == 0 ? "/static/public_fish.png" :
									"/static/business_fish.png"
							})
						})
					}
				})
			},
		}
	};
</script>
<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}
</style>