微信小程序地图展示区轮廓+展示指定地区标点气泡
发布时间：2024年01月11日
需求：显示当前地区所有的学校列表：名称。区域显示区域名称+下面所属学校数量
根据用户缩小放大当前区域（大于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的数据，前端还没写上去，跟在阿里云数据可视化平台看到的一样，只是颜色不同
文章来源:https://blog.csdn.net/weixin_43018356/article/details/135536420
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- excel公式名称管理器
- 小米SU7汽车发布会； 齐碳科技C+轮融资；网易 1 月 3 日发布子曰教育大模型；百度文心一言用户数已突破 1 亿
- 如何使用代码混淆技术保护移动应用程序安全
- Prometheus配置Grafana监控大屏（Docker）
- Python 数据可视化库之bokeh使用详解
- 九州金榜｜什么样的家庭教育让孩子更幸福
- git中的smart checkout和force checkout
- Docker安装MySql
- C语言中的关键字
- EasyCVR视频监控系统/智能监控方案平台如何添加fmp4播放流协议？