山东大学项目实训——地图圈系统——微信小程序（3）

最新推荐文章于 2023-01-03 15:05:45 发布
最新推荐文章于 2023-01-03 15:05:45 发布
阅读量282 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44181723/article/details/115469725
版权

地图圈系统——微信小程序（3）

一、关键词输入提示

options属性说明：

属性类型必填说明
keywordString是用户输入的关键词（希望获取后续提示的关键词）
regionString否设置城市名，限制关键词所示的地域范围，如，仅获取“广州市”范围内的提示内容,默认值全国
region_fixNumber否取值： 0：[默认]当前城市无结果时，自动扩大范围到全国匹配 1：固定在当前城市
policyNumber否检索策略，目前支持
policy=0：默认，常规策略；
policy=1：本策略主要用于收货地址、上门服务地址的填写，
locationString否定位坐标，传入后，若用户搜索关键词为类别词（如酒店、餐馆时），与此坐标距离近的地点将靠前显示，格式： location=lat,lng （示例：location：39.11457,116.55332）
get_subpoisNumber否是否返回子地点，如大厦停车场、出入口等取值：
0 [默认]不返回
1 返回
该参数适用于 jssdkv1.1 jssdkv1.2
filterString否最多支持五个分类
搜索指定分类
category=公交站
搜索多个分类
category=大学,中学
（注意参数值要进行url编码）
该参数适用于 jssdkv1.1 jssdkv1.2
address_formatString否短地址，缺省时返回长地址，可选值：'short’
该参数适用于 jssdkv1.1 jssdkv1.2
page_sizeNumber否每页条目数，最大限制为20条，默认值10
该参数适用于 jssdkv1.1 jssdkv1.2
page_indexNumber否第x页，默认第1页
该参数适用于 jssdkv1.1 jssdkv1.2
sigString否签名校验
开启WebServiceAPI签名校验的必传参数，只需要传入生成的SK字符串即可，不需要进行MD5加密操作
该参数适用于 jssdkv1.2

调用结果：
1.通过属性success, fail, complete的回调参数来接收调用结果
2.success的回调参数可以有2个，第1个参数接收调用结果，第2个参数控制返回处理后的数据（非必须参数）,示例：success:function(res,data)
3. 该属性适用于 jssdkv1.1 jssdkv1.2

二、示例

WXML 模板文件中添加组件：

<!--绑定输入事件-->
<input style="border:1px solid black;" bindinput="getsuggest" value="{{backfill}}"></input>
<!--关键词输入提示列表渲染-->
<view wx:for="{{suggestion}}" wx:key="index">
    <!--绑定回填事件-->
    <view>
    <!--根据需求渲染相应数据-->
    <!--渲染地址title-->
    <view style="text-align:center;" bindtap="backfill" id="{{index}}">{{item.title}}</view>
    <!--渲染详细地址-->
    <view style="font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
    </view>
</view>

Javascript 关键代码片段：

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
 
//在Page({})中使用下列代码
//数据回填方法
backfill: function (e) {
    var id = e.currentTarget.id;
    for (var i = 0; i < this.data.suggestion.length;i++){
      if(i == id){
        this.setData({
          backfill: this.data.suggestion[i].title
        });
      }  
    }
  },
 
//触发关键词输入提示事件
getsuggest: function(e) {
    var _this = this;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function(res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
}

三、项目代码

1.regeo.wxml中加入如下代码：

<view wx:if="{{addListShow}}">
  <view class="top">
    <view class="back iconfont icon-fanhui" bindtap="back1"></view>
    <view class="search-box {{addListShow?'search-box1':''}}">
      <view class="region" bindtap="chooseCity">{{currentRegion.district}}</view>
      <view class="shu"></view>
      <input bindinput="getsuggest" placeholder="查找具体地点"></input>
    </view>
  </view>
  <!--关键词输入提示列表渲染-->
  <view class="add-list-box">
    <scroll-view class="add-list" scroll-y>
      <view class="add-item" wx:for="{{suggestion}}" wx:key="index">
        <!--绑定回填事件-->
        <view bindtap="backfill" id="{{index}}" data-name="{{item.title}}">
          <!--根据需求渲染相应数据-->
          <!--渲染地址title-->
          <view class="title">{{item.title}}</view>
          <!--渲染详细地址-->
          <view class="add">{{item.addr}}</view>
        </view>
        
      </view>
    </scroll-view>
  </view>
</view>

2.regeo.js中加入如下代码

 back1: function () {
    if (this.data.addListShow) {
      this.setData({
        addListShow: false
      })
    } else {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  chooseCity: function () {
    let self = this;
    self.getRegionData();
    self.setData({
      chooseCity: true,
      regionShow: {
        province: false,
        city: false,
        district: true
      },
      currentProvince: self.data.currentRegion.province,
      currentCity: self.data.currentRegion.city,
      currentDistrict: self.data.currentRegion.district,
    })
  },
  getRegionData: function () {
    let self = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function (res) {//成功后的回调
        console.log(res)
        let provinceArr = res.result[0];
        let cityArr = [];
        let districtArr = [];
        for (var i = 0; i < provinceArr.length; i++) {
          var name = provinceArr[i].fullname;
          if (self.data.currentRegion.province == name) {
            if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
              cityArr.push(provinceArr[i])
            } else {
              qqmapsdk.getDistrictByCityId({
                // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
                id: provinceArr[i].id,
                success: function (res) {//成功后的回调
                  //console.log(res);
                  cityArr = res.result[0];
                  self.setData({
                    regionData: {
                      province: provinceArr,
                      city: cityArr,
                      district: districtArr
                    }
                  })
                },
                fail: function (error) {
                  //console.error(error);
                },
                complete: function (res) {
                  //console.log(res);
                }
              });
            }
          }
        }
        for (var i = 0; i < res.result[1].length; i++) {
          var name = res.result[1][i].fullname;
          if (self.data.currentRegion.city == name) {
            qqmapsdk.getDistrictByCityId({
              // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
              id: res.result[1][i].id,
              success: function (res) {//成功后的回调
                //console.log(res);
                districtArr = res.result[0];
                self.setData({
                  regionData: {
                    province: provinceArr,
                    city: cityArr,
                    district: districtArr
                  }
                })
              },
              fail: function (error) {
                //console.error(error);
              },
              complete: function (res) {
                //console.log(res);
              }
            });
          }
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //选择省
  showProvince: function () {
    this.setData({
      regionShow: {
        province: true,
        city: false,
        district: false
      }
    })
  },
  //选择城市
  showCity: function () {
    this.setData({
      regionShow: {
        province: false,
        city: true,
        district: false
      }
    })
  },
  //选择地区
  showDistrict: function () {
    this.setData({
      regionShow: {
        province: false,
        city: false,
        district: true
      }
    })
  },
  //选择省之后操作
  selectProvince: function (e) {
    //console.log(e)
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentProvince: name,
      currentCity: '请选择城市',
    })
    if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
      var provinceArr = self.data.regionData.province;
      var cityArr = [];
      for (var i = 0; i < provinceArr.length; i++) {
        if (provinceArr[i].fullname == name) {
          cityArr.push(provinceArr[i])
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: cityArr,
              district: self.data.regionData.district
            }
          })
          self.showCity();
          return;
        }
      }
    } else {
      let bjj = self.data.regionShow;
      console.log(bjj)
      let bj = JSON.stringify(bjj)
      console.log(bj)
      self.getById(id, name, bj)
    }
  },
  //选择城市之后操作
  selectCity: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentCity: name,
      currentDistrict: '请选择城市',
    })
    let bjj = self.data.regionShow;
    var bj = JSON.stringify(bjj)
    self.getById(id, name, bj)
  },

  //选择区县之后操作
  selectDistrict: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    let latitude = e.currentTarget.dataset.latitude;
    let longitude = e.currentTarget.dataset.longitude;
    var b = {
      id: 0,
      latitude: latitude,
      longitude: longitude,
      iconPath: "../../src/images/ding.png"
    }
    var markers = this.data.markers
    markers.push(b)
    self.setData({
      currentDistrict: name,
      latitude: latitude,
      longitude: longitude,
      currentRegion: {
        province: self.data.currentProvince,
        city: self.data.currentCity,
        district: name
      },
      markers,
      bottom: {
        title: self.data.currentProvince + "," + self.data.currentCity + "," + name,
        addr: self.data.currentProvince + "," + self.data.currentCity + "," + name,
        latitude: latitude,
        longitude: longitude,
      },

      showbottom: true,
      chooseCity: false,
      keyword: self.data.defaultKeyword
    })
    // self.nearby_search();
  },
  //根据选择省市加载市区列表
  getById: function (id, name, bj) {
    let self = this;
    // var bj=JSON.parse(bj)
    console.log(bj)
    qqmapsdk.getDistrictByCityId({
      // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
      id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
      success: function (res) {//成功后的回调
        console.log(res);
        console.log(bj)
        if (self.data.regionShow.province) {
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: res.result[0],
              district: self.data.regionData.district
            }
          })
          self.showCity();
        } else if (self.data.regionShow.city) {
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: self.data.regionData.city,
              district: res.result[0]
            }
          })
          self.showDistrict();
        } else {
          self.setData({
            chooseCity: false,
          })
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  showAddList: function () {
    this.setData({
      addListShow: true
    })
  },
  getsuggest: function (e) {
    var _this = this;
    var keyword = e.detail.value;
    _this.setData({
      addListShow: true
    })
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      location: _this.data.latitude + ',' + _this.data.longitude,
      page_size: 20,
      page_index: 1,
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function (res) {//搜索成功后的回调
        //console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].province,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          nearList: sug,
          keyword: keyword
        });
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },

3.regeo.wxss中添加如下代码：

.top {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 140rpx;
  left: 0;
  padding: 30rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}
.back {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  text-align: center;
  background: rgb(255,255,255);
  font-size: 50rpx;
  border-radius: 50%;
  float: left;
}
.back cover-image{
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  margin-top: 15rpx;
}
.search-box {
  width: 610rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: rgb(255,255,255);
  margin-left: 20rpx;
  float: left;
  overflow: hidden;
}
.search-box1 {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  background: #eee;
}
.search-box .region {
  width: 199rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-box .shu {
  width: 1rpx;
  height: 80rpx;
  background:#ccc;
  float: left;
}
.search-box input {
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  float: left;
}
.search-box .placeholder{
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
}
.add-list-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 140rpx;
  z-index: 998;
  padding-top: 150rpx;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.add-list {
  width: 100%;
  height: 1000rpx;
}
.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}
.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

四、效果图展示

在这里插入图片描述
在这里插入图片描述

SDUer～
关注
专栏目录
python 2000坐标系和经纬度转换_Python 高德经纬度和省市区的相互转换
weixin_39770626的博客
12-12 1580
需求：用经纬度的值，获取省市区街道信息。因其经纬度是 高德的，所以需要用到高德地图的api。实现方法/步骤：1、把经纬度数据，存放在excel表格里面。2、用python去读取数据，然后执行高德api接口。3、把接口返回的数据，写入到excel表格里面。初始经纬度数据：import requestsfrom openpyxl import load_workbookworkbook = ...
调用高德逆地理接口_PHP实现高德地图的地理/逆地理编码
weixin_42299427的博客
02-05 679
最近因为项目需求，需要把 酒店地址和 经纬度互相转换，于是就学习使用了高德地图WEB服务端API-地理编码/逆地理编码，下面分享出来。产品介绍地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口，提供结构化地址与经纬度之间的相互转化的能力。结构化地址的定义： 首先，地址肯定是一串字符，内含国家、省份、城市、区县、城镇、乡村、街道、门牌号码、屋邨、大厦等建筑物名称。按照...
:seedling:校园导览|校园地图|校园工具|微信小程序
01-27
导览 - 微信地图导览小程序 首款开源的微信地图导览小程序，仅需修改地图文件，就可以适配某一学校/景区，具有出色的用户体验。 官网： :check_box_with_check:一键配置切换 :check_box_with_check:地图路径规划 :check_box_with_check:在线热修补 :star-struck:预览 :memo:使用说明 1、项目根文件新建config.js文件，写入以下内容，并根据自身需求修改 module.exports = { // 调试模式开关，调试模式下只调用本地数据 debug: true, // 学校数据配置名称，学校英文缩写 school: "gdst", // 高德路线规划密钥，必须加入https://restapi.amap.com为request合法域名 // 密钥申请地址http://lbs.amap.com/api/javascript-api/summary/ key: "", // 地图更新地址，用于热修补，无需每次都提交审核 upd
(PYTHION)地理逆编码(根据经纬度获取详细地址)
qq_45373844的博客
08-06 4952
逆地理编码，又称地址解析服务，是指从已知的经纬度坐标到对应的地址描述（如行政区划、街区、楼层、房间等）的转换。常用于根据定位的坐标来获取该地点的位置详细信息，与定位功能是黄金搭档。也就是坐标转地址。...
微信小程序-引入地图、获得经纬度
最新发布
m0_69502730的博客
01-03 1530
微信小程序-引入地图、获得经纬度
山东大学项目实训（二十七）—— 微信小程序开发总结，一年时间真的可以改变一个人很多
bhegi_seg的博客
06-22 1万+
到目前为止，微信小程序开发，到此就算是结束了，其中实现了不少功能，如下：1.1 角色与权限（后端同学实现的，写这个方便介绍后面的功能） 平台可以配置不同的用户角色并授予其不同的操作权限。每个用户在使用平台时都需要指定一个角色。1.2 可视范围——根据角色绑定的权限菜单 全体职工可以查看自己上报的事件（待审核、已通过、被驳回）。 质控人员可以查看所有的事件（待审核、待评价、已通过、已驳回、已评价）。 职能人员可以查看自己/自己部门负责的事件（待整改、待评价、已评价）。 各科室医务人员可以查看本科室相关的事件（
山东大学项目实训——简易微信小游戏（一）
qq_47801057的博客
03-05 4018
一、项目背景 微信小程序接触真实用户快，对用户反馈快速体现，是一个非常好的实践平台。同时就行业背景来看，人们对于无需安装打开即玩的休闲类小游戏的需求依然存在。 二、工作内容 开发绳套奶牛、大鱼吃小鱼、五子棋等几个经典小游戏合集的微信小程序。设计脚本系统和几个游戏角色间的动作交互和响应。难点重点就在于脚本系统和动画系统。 三、实施方案 3.1 任务分工: 徐敬杨:组长，负责人、UI设计 王小龙:脚本编程 韦宇:组织调试 韦潇:CocosCreat...
山东大学项目实训（十七）—— 微信小程序附件上传、下载、预览、删除
long99920的博客
05-07 1689
微信小程序附件上传、下载、预览、删除
山东大学项目实训——简易微信小游戏（三）
qq_47801057的博客
03-29 3169
本章简单介绍如何将在cocos creator上制作好的游戏发布到微信小程序上，下一章将正式进入五子棋小游戏项目的开发。
山东大学项目实训（七）—— 核心功能（4）
long99920的博客
04-13 367
山东大学项目实训
微信小程序车辆电子围栏demo
12-09
基于微信小程序做的车辆电子围栏demo，实现手动点击添加删除标记点、标记点连接生成多边形区域、保存和删除已绘制的多边形区域
微信小程序-地图示例
01-27
微信小程序-地图示例 微信小程序-地图示例
腾讯地图qqmap-wx-jssdk
08-14
腾讯地图SDK，可用于根据经纬度获取城市信息，如省，市，区，附近街道等
微信小程序开发——map地图组件，定位，并手动修改位置偏差。
热门推荐
贝尔·格里屌斯的专栏
01-29 9万+
环境搭建 注册，获取APPID（没有这个不能真鸡调试） 下载微信web开发者工具（挺多bug，将就用） 打开微信web开发者工具，扫码登录，新建小程序，输入APPID，勾选创建quick start项目。 工程结构可以看到工程根目录中有个app.js，这里可以定义全局变量，通过getApp()获取。 项目中有了一些示例，已经有了获取用户信息的方法等。 开发地图定位，选择位置功能我们直接修改ind
微信小程序map腾讯地图功能整理
寻宋的博客
07-05 5988
wxml:&lt;map class="map" longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' polyline='{{polyline}}' bindmarkertap='bindmarkertap' bindregionchange='bindregioncha...
小程序地理定位之使用qqmap-wx-jssdk.min.js插件获取当前位置和附近的地址列表 加入关键词搜索
勤勇的博客
01-25 1万+
&lt;view class="search"&gt; &lt;input placeholder='搜索' placeholder-style='color:#97a7b7;font-size:28rpx' type='text' class='searchBtn' bindinput='bindSearch'&gt; &lt;image class="s...
微信小程序把玩（十八）picker组件
FUCK
09-26 8万+
picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！主要属性：普通选择器时间选择器日期选择器wxml<view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picke
微信小程序--百度地图坐标转换成腾讯地图坐标
程诺
07-07 1万+
最近开发小程序时出现一个问题，后台程序坐标采用的时百度地图的坐标，因为小程序地图时采用的腾讯地图的坐标系，两种坐标有一定的误差，导致位置信息显示不正确。现在需要一个可以转换两种坐标的方法，经过查询发现腾讯地图提供了一个接口用来将多种坐标类型转换成腾讯可用的坐标。方法如下： reverseGeocoder(options:Object) 本接口提供由坐标到坐标所在位置的文字描述的转换，输入坐
内网渗透笔记-端口转发，内网代理
pyphrb的博客
07-28 9173
0x01 内网代理和转发1.1 正向代理(Forward Proxy)Lhost－－》proxy－－》Rhost Lhost为了访问到Rhost，向proxy发送了一个请求并且指定目标是Rhost，然后proxy向Rhost转交请求并将获得的内容返回给Lhost，简单来说正向代理就是proxy代替了我们去访问Rhost。1.2 反向代理（reverse proxy）Lhost<--->proxy<-
微信小程序校园来访预约系统——期末项目源码分享
3. 微信小程序项目结构: 一个标准的微信小程序项目通常包括以下几个部分：JSON配置文件、WXML结构文件、WXSS样式文件、JavaScript逻辑文件。除此之外，还需要一个app.js文件和app.json文件，以及app.wxss文件来定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值