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

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

根据用户缩小放大当前区域（大于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.059393, latitude:22.587533},
				{longitude:114.057709, latitude:22.586393},
				{longitude:114.054639, latitude:22.58529},
				{longitude:114.053745, latitude:22.584624},
				{longitude:114.053534, latitude:22.582235},
				{longitude:114.052561, latitude:22.581747},
				{longitude:114.047518, latitude:22.582408},
				{longitude:114.045317, latitude:22.584163},
				{longitude:114.041098, latitude:22.583907},
				{longitude:114.038204, latitude:22.582971},
				{longitude:114.034301, latitude:22.582626},
				{longitude:114.03032, latitude:22.580564},
				{longitude:114.028066, latitude:22.581458},
				{longitude:114.023514, latitude:22.581649},
				{longitude:114.022154, latitude:22.580289},
				{longitude:114.018866, latitude:22.579074},
				{longitude:114.014875, latitude:22.579554},
				{longitude:114.009464, latitude:22.57886},
				{longitude:114.005272, latitude:22.57514},
				{longitude:114.005017, latitude:22.571443},
				{longitude:114.005421, latitude:22.568235},
				{longitude:114.004061, latitude:22.56627},
				{longitude:114.003342, latitude:22.563183},
				{longitude:114.003939, latitude:22.560478},
				{longitude:114.005386, latitude:22.558312},
				{longitude:114.0055, latitude:22.556343},
				{longitude:114.002895, latitude:22.555775},
				{longitude:114.001202, latitude:22.555788},
				{longitude:113.99758, latitude:22.554946},
				{longitude:113.998422, latitude:22.553879},
				{longitude:113.998168, latitude:22.552086},
				{longitude:113.998852, latitude:22.55014},
				{longitude:113.999878, latitude:22.549744},
				{longitude:113.999562, latitude:22.548957},
				{longitude:113.997729, latitude:22.54864},
				{longitude:113.99623, latitude:22.546792},
				{longitude:113.997203, latitude:22.545008},
				{longitude:113.996703, latitude:22.543304},
				{longitude:113.996721, latitude:22.538633},
				{longitude:113.99787, latitude:22.532396},
				{longitude:113.99544, latitude:22.53296},
				{longitude:113.996151, latitude:22.53207},
				{longitude:113.995484, latitude:22.530533},
				{longitude:113.994353, latitude:22.530566},
				{longitude:113.9933, latitude:22.527678},
				{longitude:113.994388, latitude:22.521926},
				{longitude:113.990547, latitude:22.520482},
				{longitude:113.990748, latitude:22.510584},
				{longitude:114.010551, latitude:22.510249},
				{longitude:114.024049, latitude:22.509806},
				{longitude:114.025163, latitude:22.509331},
				{longitude:114.0291, latitude:22.505265},
				{longitude:114.030898, latitude:22.504277},
				{longitude:114.036967, latitude:22.503364},
				{longitude:114.042107, latitude:22.502791},
				{longitude:114.046009, latitude:22.502185},
				{longitude:114.050587, latitude:22.501193},
				{longitude:114.053789, latitude:22.499889},
				{longitude:114.057077, latitude:22.499623},
				{longitude:114.05998, latitude:22.500727},
				{longitude:114.062322, latitude:22.502824},
				{longitude:114.06298, latitude:22.507827},
				{longitude:114.064602, latitude:22.510547},
				{longitude:114.069119, latitude:22.51378},
				{longitude:114.077003, latitude:22.515484},
				{longitude:114.079205, latitude:22.514394},
				{longitude:114.080301, latitude:22.512997},
				{longitude:114.081573, latitude:22.512424},
				{longitude:114.084291, latitude:22.513388},
				{longitude:114.087642, latitude:22.515899},
				{longitude:114.090299, latitude:22.51943},
				{longitude:114.090343, latitude:22.520995},
				{longitude:114.088177, latitude:22.522932},
				{longitude:114.085949, latitude:22.523878},
				{longitude:114.083485, latitude:22.526113},
				{longitude:114.08402, latitude:22.527553},
				{longitude:114.085686, latitude:22.528414},
				{longitude:114.088256, latitude:22.528712},
				{longitude:114.090352, latitude:22.529318},
				{longitude:114.091246, latitude:22.530068},
				{longitude:114.092904, latitude:22.532545},
				{longitude:114.094114, latitude:22.53357},
				{longitude:114.097245, latitude:22.534404},
				{longitude:114.100148, latitude:22.532192},
				{longitude:114.101946, latitude:22.531241},
				{longitude:114.105173, latitude:22.531628},
				{longitude:114.104805, latitude:22.532513},
				{longitude:114.104586, latitude:22.546033},
				{longitude:114.104279, latitude:22.555435},
				{longitude:114.104559, latitude:22.555933},
				{longitude:114.104524, latitude:22.567872},
				{longitude:114.101604, latitude:22.566261},
				{longitude:114.096833, latitude:22.56491},
				{longitude:114.093193, latitude:22.564328},
				{longitude:114.092237, latitude:22.564463},
				{longitude:114.090159, latitude:22.567639},
				{longitude:114.088001, latitude:22.569557},
				{longitude:114.084616, latitude:22.570302},
				{longitude:114.082625, latitude:22.570186},
				{longitude:114.079099, latitude:22.568519},
				{longitude:114.077968, latitude:22.569436},
				{longitude:114.077284, latitude:22.571168},
				{longitude:114.075942, latitude:22.572467},
				{longitude:114.074425, latitude:22.575303},
				{longitude:114.074399, latitude:22.576132},
				{longitude:114.07225, latitude:22.579181},
				{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的数据，前端还没写上去，跟在阿里云数据可视化平台看到的一样，只是颜色不同