uniapp地图-以福州为例

一、使用echarts组件

一、背景图

 二、准备组件环境

2.1  先下载导入echarts组件（在文件目录处点击 Shift+右键 打开powershell进行下载依赖）

npm install echarts mpvue-echarts --save

下载之后就会产生该文件夹和文件

之后将echarts 、mpvue-echarts 、 zrender 三个文件都移动到自己项目的根目录下方

 

2.2  下载之后就已经有了中国各个省份的地图json文件和js文件

html部分：

<view class="wrap">
	  <mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
</view>

然后将其引用在要引用的页面

	//想要展示那些省份的图像就导入哪个省份的json文件
    import * as echarts from 'echarts/echarts.min.js'; /*echarts.min.js为在线定制*/
	// import * as chinaJson from '../../echarts/map/json/china.json'; 
	import * as fujianJson from '@/echarts/map/json/province/fujian.json';
	import mpvueEcharts from 'mpvue-echarts';

记得在data中进行注册

components: {
	  mpvueEcharts
},

完整代码

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="2">
			<block slot="backText">返回</block>
			<block slot="content">地图</block>
		</cu-custom>
		<view class="container" :style="contentHeight">
			<view class="wrap">
				<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts/echarts.min.js'; /*echarts.min.js为在线定制*/
	// import * as chinaJson from '../../echarts/map/json/china.json'; /*echart.min.js为在线定制*/
	import * as fujianJson from '@/echarts/map/json/province/fujian.json';
	import mpvueEcharts from 'mpvue-echarts';
	
		export default {
			components: {
				mpvueEcharts
			},
			data() {
				return {
					echarts,
					data: [
						
						{
							name: '三明市',
							value: this.randomValue()
						},
						{
							name: '福州市',
							value: this.randomValue()
						},
						{
							name: '南平市',
							value: this.randomValue()
						},
						{
							name: '龙岩市',
							value: this.randomValue()
						},
						{
							name: '漳州市',
							// value: this.randomValue()
							value: 20
						},
						{
							name: '厦门市',
							value: this.randomValue()
						},
						{
							name: '泉州市',
							value: this.randomValue()
						},
						{
							name: '莆田市',
							value: this.randomValue()
						},
						{
							name: '宁德市',
							value: this.randomValue()
						},
						
					]
				};
			},
			onLoad() {
	
			},
			computed: {
				contentHeight() {
					var CustomBar = this.CustomBar,
						isIphoneX = this.isIphoneX;
					if (isIphoneX) {
						return `height:calc(100vh - ${CustomBar}px - 34px)`;
					} else {
						return `height:calc(100vh - ${CustomBar}px)`;
					}
				}
			},
			methods: {
				randomValue() {
					return Math.round(Math.random() * 25);
				},
				renderMap(e) {
					const that = this;
					var mydata = that.data;
					let {
						canvas,
						width,
						height
					} = e;
					width = width - 20;
					echarts.setCanvasCreator(() => canvas);
					const chart = echarts.init(canvas, null, {
						width: width,
						height: height
					})
					echarts.registerMap('fujian', fujianJson);
					canvas.setChart(chart)
					var optionMap = {
						title: {
							// x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b}:{c}个企业'
						},
						//左侧小导航图标
						visualMap: {
							min: 0,
							max: 25,
							left: 'left',
							top: 'bottom',
							// orient:'horizontal',
							// text: ['高', '低'], //取值范围的文字
							inRange: {
								color: ['#c5dfff','#4d93f5'] //取值范围的颜色
							},
							show: true, //图注
							pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
								{
									min: 0,
									max: 5,
									label: '0~5家'
								},
								{
									min: 5,
									max: 10,
									label: '5~10家'
								},
								{
									min: 10,
									max: 15,
									label: '10~15家'
								},
								{
									min: 15,
									max: 20,
									label: '15~20家'
								},
								{
									min: 20,
									max: 25,
									label: '20~25家'
								},
							],
							hoverLink: true,
							textStyle: {
								fontSize: 8
							},
						},
						geo: {
							map: 'fujian',
							roam: false, //不开启缩放和平移
							zoom: 1.2,//视角缩放比例
							label: {
								normal: {
									show: false,
									fontSize: 8,
									color: 'rgba(0, 0, 0, 0.5)' //文字颜色
								}
							},
							itemStyle: {
								normal: {
									borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
								},
								emphasis: {
									areaColor: '#4d93f5', //鼠标选择区域颜色
									shadowOffsetX: 0,
									shadowOffsetY: 0,
									shadowBlur: 20,
									borderWidth: 0,
									shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
								}
							}
						},
						//配置属性
						series: [
							{
								type: 'map',
								geoIndex: 0,
								animation: false,
								data: mydata,
							}
						]
					};
					//初始化echarts实例
					chart.setOption(optionMap);
					this.$refs.mapChart.setChart(chart);
				}
			}
		};
	
</script>

<style>
	.container{
		background: white;
	}
	.wrap {
		margin-left: 40rpx;
		padding-top: 50rpx;
		width: 100%;
		height: 600rpx;
	}
</style>

本文章有借鉴该博客：uniapp+Echarts微信小程序实现中国地图_miracle_iu的博客-CSDN博客_小程序echarts地图

二、使用uniapp的Map组件 + 气泡显示

 完整代码

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="2">
			<block slot="backText">返回</block>
			<block slot="content">地图</block>
		</cu-custom>
		<view class="fujianMap">
			<map style="width: 100%; height: 892rpx;" class="map" :customCallout="callout" :scale="scale"
					:latitude="latitude" :longitude="longitude" :markers="covers">
				<cover-view slot="callout">
					<block v-for="(item,index) in covers" :key="index">
						<cover-view class="customCallout" :marker-id="item.id">
							<cover-view class="content">
								{{item.title}}
								<cover-view class="equipment-status" :class="item.joinCluster?'red':''">设备</cover-view>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//covers要和上面自定义气泡中循环名字相同否则不生效
	// 			covers: [{
	// 					id: 0,
	// 					latitude: 26.041054,, //纬度
	// 					longitude: 119.277363, //经度
	// 					iconPath: '/static/img/state2.png', //显示的图标        
	// 					rotate: 0, // 旋转度数
	// 					width: 30, //宽
	// 					height: 30, //高
	// 					title: '设备1', //标注点名
	// 					alpha: 1, //透明度
	// 					joinCluster: true,
	// 					customCallout: {
	// 						anchorY: 0,
	// 						anchorX:0,
	// 						display: "ALWAYS"
	// 					},
	// 				},
	// 			],
	   
			}
	    },
		onLoad() {
			
		},
		methods:{
		
	    },
	}
</script>

<style>

</style>