您的位置: 首页  >  文章  >  微信小程序-map组件

微信小程序-map组件

分类: 文章 • 2023-12-30 12:27:34

在小程序中使用个性化地图

小程序中的map组件 ：官方文档中的map介绍

登录“微信小程序”，在小程序后台中，“开发”->“开发者工具”->“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》

微信小程序-map组件

小程序个性地图的设置参考： 小程序Javascript SDK。在此获取 qqmap-wx-jssdk.min.js 文件。

遇到的问题

微信小程序的map组件的层级是最高的，当你希望在map 组件之上显示其他的标签，在模拟器上是可以的，但是显示在手机上，就只有map组件了。不是没有渲染，而是被map组件覆盖了， 因为在小程序中，map组件的优先级是最高的，即使你使用了 z-index 也无济于事。

解决方法：

微信小程序为我们提供了 cover-view 组件，可覆盖的原生组件有 map , video ，canvas ， camera ，live-player , live-pusher。

当把标签换为 cover-view 后，的确能显示在 map 组件之上。但是当需求是希望在map组件上显示一个 搜索框 时，问题又来了。因为在 cover-view 中只支持嵌套 cover-view ，cover-image ，button。

而希望显示 input ，会报如下错误：

微信小程序-map组件

解决思路：

在 cover-view 下写 input 标签。

将 cover-view 的高度和 input 的高度相同（假如为50px），在为 input 设置 margin-top:50px（即 cover-view 和 input 的高度），这样就会显示重叠的效果。

将 cover-view 标签中的内容和 input 中的 value 值进行绑定，即使用同一个数据，这样当用户输入需要搜素的地方时，这两个标签的内容就会同步。 

关键代码：

.wxml

<cover-view id='searchDiv'>
  <!-- 输入框，通过将 cover-view 中的内容和 input 标签的 value 设置相同的数据实现 -->
  <cover-view  bindtap='tapInput'>
    <cover-view class='text'>{{key || "搜周边"}}</cover-view>
    <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
  </cover-view>
  <!-- 搜索图片 -->
  <cover-view  catchtap='search_key' class='search_icon' >
    <cover-image src='/images/map/search.png'></cover-image>
  </cover-view>
</cover-view>

.wxss

#searchDiv{
  top: 5px;
  width: 80%;
  margin: 0 10%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #E0E3E4; 
  position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
  height: 50px;
  line-height: 50px;
}
#searchDiv .text{
  margin-left: 20px;
}
#searchDiv .search_input{
  margin-left: 20px;
  /* 使视觉上和text保持一致 */
  margin-top: -50px;
}
#searchDiv .search_icon{
  display: inline-block;
  top: 0;
  position: absolute;
  right: 0px;
}
#searchDiv .search_icon cover-image{
  width: 30px;
  height: 30px;
  padding: 10px;
}

 .js

tapInput() {
  this.setData({
    // 为 input 设置获取焦点
    inputFocus: true
  });
},
// input 失去焦点后将 input 的输入内容给 cover-view
blurInput(e) {
  this.setData({
    key: e.detail.value
  });
}

以上是自己练习时遇到的问题和解决方法，下面附上微信小程序调用 map 组件的完整代码。

微信小程序调用 map 组件的完整代码

map.wxml

<view class='maps'>
  <map
    id="map"
    longitude="{{longt}}"
    latitude="{{lat}}"
    scale="16"
    controls="{{controls}}"
    bindcontroltap="controltap"
    markers="{{markers}}"
    bindmarkertap="markertap"
    polyline="{{polyline}}"
    bindregionchange="regionchange"
    show-location
    show-compass="true"
  ></map>
  
  <cover-view id='searchDiv'>
    <!-- 输入框，通过将 cover-view 的内容和 input 标签的value 绑定相同的 data 实现 -->
    <cover-view  bindtap='tapInput'>
      <cover-view class='text'>{{key || "搜周边"}}</cover-view>
      <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
    </cover-view>
    <!-- 搜索图片 -->
    <cover-view  catchtap='search_key' class='search_icon' >
      <cover-image src='/images/map/search.png'></cover-image>
    </cover-view>
  </cover-view>
</view>

map.wxss

#searchDiv{
  top: 5px;
  width: 80%;
  margin: 0 10%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #E0E3E4; 
  position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
  height: 50px;
  line-height: 50px;
}
#searchDiv .text{
  margin-left: 20px;
}
#searchDiv .search_input{
  margin-left: 20px;
  /* 使视觉上和text保持一致 */
  margin-top: -50px;
}
#searchDiv .search_icon{
  display: inline-block;
  top: 0;
  position: absolute;
  right: 0px;
}
#searchDiv .search_icon cover-image{
  width: 30px;
  height: 30px;
  padding: 10px;
}
#map{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

map.js

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap/qqmap-wx-jssdk.min.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  // 登录 小程序后台，在腾讯位置服务中获取 key ,并在此处的key值中写入你的key
  key: '...' // 必填
});

Page({
  data: {
    inputFocus: false,
    key:"",
    searchRes:[],
    longt: 114.68308,
    lat: 33.63497,
    markers: [ {
        iconPath: '/images/map/position.png',
        id: -1,
        latitude: 33.63497,
        longitude: 114.68308,
        width: 30,
        height: 30,
        title: '周口师范学院'
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: '#FF0000DD',
      width: 2,
      dottedLine: true
    }]
  },
  regionchange(e) {
    // console.log(e.type)
  },
  markertap(e) {
    // console.log(e.markerId)
  },
  controltap(e) {
    // console.log(e.controlId)
  },
  set_key:function(e){
    this.setData({
      key: e.detail.value
    })
  },// 事件触发，调用接口
  search_key: function () {
    var _this = this;
    console.log(this.data.key);
    if (this.data.key == '' || this.data.key == "搜周边"){
      wx.showToast({
        icon: 'none',
        title: '请输入您要游览的地方'
      });
      return;
    }
    // 调用接口
    qqmapsdk.search({
      keyword: _this.data.key,  //搜索关键词
      location: '33.625607,114.64202',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        if(res.data.length == 0){
          wx.showToast({
            icon:'none',
            title: '未搜索到您游览的地方'
          });
          return;
        }
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: '/images/map/position.png', //图标路径
            width: 30,
            height: 30
          })
        }
        _this.setData({ 
          markers: mks, //设置markers属性，将搜索结果显示在地图中
          lat:mks[0].latitude, // 设置地图中心点的经纬度
          longt:mks[0].longitude
        })
      },
      fail: function (res) {
        if (res.data.length == 0) {
          wx.showToast({
            icon: 'none',
            title: '搜索失败'
          });
          return;
        }
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
  tapInput() {
    this.setData({
      // 为 input 设置获取焦点
      inputFocus: true
    });
  },
  // input 失去焦点后将 input 的输入内容给 cover-view
  blurInput(e) {
    this.setData({
      key: e.detail.value
    });
  }
})

 

相关推荐