微信小程序，获取map的显示范围

最新推荐文章于 2023-03-10 10:59:33 发布

原创最新推荐文章于 2023-03-10 10:59:33 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #php #mysql

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个小程序中的地图组件如何获取用户选定的区域范围，并通过PHP后端从数据库中检索该地理范围内标记的数据点。前端使用了自定义的getRange方法来获取经纬度范围并发送HTTP请求，后端则构建SQL查询语句返回符合条件的数据。

小程序代码：getRange:function(e){
var that=this;
    this.mapCtx.getRegion({ //mapCtx=wx.createMapContext('map')
      success: function (res) {
        that.setData({
          northeast: res.northeast,
          southwest: res.southwest
        })
        console.log(that.data.northeast)
        wx.request({
          url: 'https://******/public.php', //仅为示例，并非真实的接口地址
          method: "post",
          data: {
            key: 'www*****',
            method: 'getrange',
            userkey: that.data.userkey,
            x1: that.data.northeast.longitude,
            y1: that.data.northeast.latitude,
            x2: that.data.southwest.longitude,
            y2: that.data.southwest.latitude
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // $_POST
          },
          success: function (res) {
            wx.hideLoading();
            var arr = res.data.list;
           that.setData({
             markers:arr
            })
            console.log(that.data.markers)
          }
        })
      }
    })
}

php服务器端：

$x1=mysql_real_escape_string($_POST['x1']);
$y1=mysql_real_escape_string($_POST['y1']);
$x2=mysql_real_escape_string($_POST['x2']);
$y2=mysql_real_escape_string($_POST['y2']);
$sql="select * from points where lng<'{$x1}' and lng>'{$x2}' and lat<'{$y1}' and lat>'{$y2}'";
$row=$db->getAll($sql);
foreach ($row as $t){
$arr['list'][]=array(
'name'=>$t['cname'],
'id'=>$t['cname'],
'longitude'=>$t['lng'],
'latitude'=>$t['lat']
);
}
echo json_encode($arr);