微信小程序地图展示区轮廓+展示指定地区标点气泡

需求：显示当前地区所有的学校列表：名称。区域显示区域名称+下面所属学校数量

根据用户缩小放大当前区域（大于12显示区，小于12显示当前区学校列表），获取：@regionchange的type：end数据，来获取坐标，逆解析获取地址的区，然后传到后端返回当前区的学校数据，然后后端这边由于是新需求就没有经纬度的数据，后端就去命令行操作根据学校的地址得到经纬度然后更新到数据库

<?php
namespace app\admin\command\school;

use fast\Http;
use think\console\Command;
use think\console\Input;
use think\console\input\Argument;
use think\console\input\Option;
use think\console\Output;
use app\common\model\School;

class LatLng extends Command
{
    protected function configure()
    {
        $this->setName('school:latLng')
            ->setDescription('学校地址获取经纬度');
    }

    protected function execute(Input $input, Output $output)
    {
	        School::where($where)->chunk(50, function($rows) {
            foreach ($rows as $row) {
                if ($row['deletetime']) {
                    continue;
                }
                $address = $row['school_address'];
                $params = [
                    'address' => $address,
                    'key'     => "你的KEY你的KEY你的KEY你的KEY你的KEY你的KEY"
                ];
                $url = 'https://apis.map.qq.com/ws/geocoder/v1/';
                $result = Http::get($url, $params);


                $akl = json_decode($result,TRUE);
                if($akl['status'] != 0){
                    continue;
                }
                if($row['lat']){
                    continue;
                }
                $data = [
                    'lat' => $akl['result']['location']['lat'],
                    'lng' => $akl['result']['location']['lng'],
                ];

                $menu = new School;
                $menu->where('id',$row['id'])->update($data);
            }
        });
    }
}

这里是前端案例
后端返回markers的数据格式也跟目前markers的数据结构一样
polygon的数据，后端返回的也是一样的结构
polygon的数据需要去阿里云数据可视化平台获取，然后下载，还需要处理一下
阿里云数据可视化平台
map里的longitude以及latitude应该是动态的，根据当前scale判断是否应该展示当前区的中心经纬度，如果小于12那么就应该是深圳市的中心经纬度

下载后再去按照下面polygon数据格式修改即可
polygon的数据格式
取这个即可

修改

<template>
	<view class="content">
		<map id="myMap" style="width: 100%; height: 800px;" 
		longitude="114.046594" latitude="22.543431"
		:scale="scale"
		:markers="markers" show-location
		@callouttap="callouttap"
		@regionchange="regionchange"
		:polygons="polygon"
		></map>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale:12,
				markers: [
					{
									"id": 9,
									"latitude": "22.5452",
									"longitude": "114.01952",
									"title": "深圳市",
									"iconPath": "/static/uploads/wzdt.png",
									"width": 15,
									"height": 20,
									"alpha": 1,
									"callout": {
										"content": "深圳市",
										"color": "#ffffff",
										"fontSize": 12,
										"borderRadius": 12,
										"padding": 10,
										"bgColor": "#87B0FF",
										"display": "ALWAYS",
										"anchorY": -2
									}
								},
								{
									"id": 11,
									"latitude": "22.55257",
									"longitude": "114.01582",
									"title": "中学",
									"iconPath": "/static/uploads/wzdt.png",
									"width": 15,
									"height": 20,
									"alpha": 1,
									"callout": {
										"content": "中学",
										"color": "#ffffff",
										"fontSize": 12,
										"borderRadius": 12,
										"padding": 10,
										"bgColor": "#87B0FF",
										"display": "ALWAYS",
										"anchorY": -2
									}
								}
				],
				
				polygon:
				[
				    {
				        "points": [
			            {
			                "longitude": 114.066304,
			                "latitude": 22.585671
			            },
			            {
			                "longitude": 114.06212,
			                "latitude": 22.586477
			            },
			            {
			                "longitude": 114.070522,
			                "latitude": 22.579987
			            },
			            {
			                "longitude": 114.069005,
			                "latitude": 22.581216
			            },
			            {
			                "longitude": 114.066304,
			                "latitude": 22.585671
			            }
			        ],
			        "fillColor": "#4F94CD33",
			        "strokeColor": "#3367D1",
			        "strokeWidth": 2,
			        "zIndex": 5
			    }
			]
				
				// 结束
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.getschool()
		},
		methods: {
			getschool() {
				
				this.$u.post('XXXX').then(res => {
					console.log("请求数据",res);
					// this.markers = res.schoollist
				})
			},
			callouttap(e){
				console.log("callouttap",e);
			},
			regionchange(e){
				console.log("regionchange",e);
			}
		}
		
		
	}
</script>

<style>
</style>

结果图
区

区里面学校列表

polygons的数据，前端还没写上去，跟在阿里云数据可视化平台看到的一样，只是颜色不同
微信小程序 地图：点击标记点对应的气泡时触发 与 视野发生变化时触发事件
两个事件不能同时使用，需要加判断，在实际使用当中发现，点击气泡后需要放大地图，同时会触发：“视野发生变化时触发事件”，这样就会影响：scale的赋值，所以点击气泡时不要触发视野移动事件，移动事件加个判断