【腾讯地图】【微信小程序】城市记录（基于地图选点入门版）

080

【效果展示】

map2.gif

【官方文档】

地图选点插件

一、小项目介绍

项目名称：【城市记录】

技术介绍：基于地图选点文章知识版，对其进一步升级进行学习与探讨。并加入 API 地图 MapContext 开发。

二、核心讲解

2-1 wx.createMapContext() 创建上下文 MapContext 对象

在生命周期函数–监听页面初次渲染完成，即 onReady 函数进行添加

  onReady: function () {
    this.mapCtx = wx.createMapContext('friendMap');
  },

2-2 wxml 页面添加 map 标签展示地图

注：在页面中 map 标签需要嵌套一层 view 标签并给上高度。（防止有可能出现是显示空白的情况）

<view style="height: 100%;">
  <map id="friendMap" style="width: 100%; height:100%;" bindmarkertap="bindMarker" scale="{{scale}}" subkey="{{subkey}}" markers="{{markerList}}" show-compass="true" show-scale="true" bindtap="bindCheckPoint" bindlabeltap="bindCheckPoint" bindpoitap="bindPoi" longitude="{{longitude}}" latitude="{{latitude}}" show-location />
</view>

2-3 this.mapCtx.moveToLocation(marker) // 将地图中心移到当前定位点，（需设置 map 标签地图组件 show-location 为true）

主要传参：Object 对象

对象属性：longitude（经度）、latitude（维度）

不传，默认将地图中心点移动到当前本地的地理位置

三、完整代码

cityRecord.wxml 文件

cityRecord.wxml 文件（点击展开） 
<!-- 地图位置 -->
<view class="main-body">
  <map id="friendMap" style="width: 100%; height:100%;" bindmarkertap="bindMarker" scale="{{scale}}" subkey="{{subkey}}" markers="{{markerList}}" show-compass="true" show-scale="true" bindtap="bindCheckPoint" bindlabeltap="bindCheckPoint" bindpoitap="bindPoi" longitude="{{longitude}}" latitude="{{latitude}}" show-location />
  <!-- 移动到当前位置 -->
  <view class="local icon-position" bindtap="moveToLocation">
    当前
  </view>
  <!-- 缩小、放大最大 -->
  <view class="big-small-chenge icon-position active" bindtap="changeMaxSamll" wx:if="{{scale>=10}}">
    最小
  </view>
  <view class="big-small-chenge icon-position active" bindtap="changeMaxBig" wx:if="{{scale<10}}">
    最大
  </view>
  <!-- 是否能进行标点 -->
  <view class="add-info icon-position {{isPoiActive?'active':''}}" bindtap="setPoi">
    标记
  </view>
</view>

cityRecord.js 文件

cityRecord.js 文件（点击展开） 
// 位置服务参考地址：https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker
const chooseLocation = requirePlugin('chooseLocation');
// var userInfo = getApp().globalData.userInfo;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    nowMarkerNum: 0, // 当前标记点数组下标
    isLocalActive: false, // 已跳转到当前
    isBigSmallActive: false, // 是否已跳最大（或最小）
    isPoiActive: false, // 是否开启标记
    isPoi: false, // 是否进行标记
    markerList: [ // 标记点数组（初始化）
      {
        id: 1, // id 
        width: '20', // 标记点图标宽度
        height: '20', // 标记点图标高度
        latitude: 39.908823, // 纬度
        longitude: 116.39747, // 经度
        name: '北京天安门', // 地点名
        iconPath: '/img/nfz.jpg', // 地图上的icon
        callout: { // 气泡
          content: '北京天安门', // 气泡上的名字  
          color: '#0099FF', // 字体颜色
          fontSize: 10, // 字体大小 
          display: 'ALWAYS', // 总是显示
          bgColor: '', // 背景颜色
        }
      },
      {
        id: 2, // id 
        width: '20', // 标记点图标宽度
        height: '20', // 标记点图标高度
        latitude: 22.826675, // 纬度
        longitude: 108.315303, // 经度
        name: '南宁火车站', // 地点名
        iconPath: '/img/nfz.jpg', // 地图上的icon
        callout: { // 气泡
          content: '南宁火车站', // 气泡上的名字  
          color: '#0099FF', // 字体颜色
          fontSize: 10, // 字体大小 
          display: 'ALWAYS', // 总是显示
          bgColor: '', // 背景颜色
        }
      },
    ],
    scale: 4, // 缩放级别，取值范围为3-20，默认值是15
    subkey: 'NE6BZ-ECCKA-FBFKU-CHTRS-OVSAJ-WNBVF', // 你的腾讯地图开发者 - 个性化地图设置样式里的Key
    latitude: 33,
    longitude: 113,

  },
  // 点击标记点时触发，e.detail = {markerId}
  bindMarker(e) {
    var {
      markerId, // 点击到的标记点的下标
    } = e.detail;
    let that = this
    var {
      markerList,
    } = that.data;
    var marker = markerList[markerId - 1];
    // console.log(marker);
    console.log("点击标记点触发", e, marker);
    // that.getPosition(marker.latitude, marker.longitude);

    that.mapCtx.moveToLocation(marker)
    that.setData({
      scale: 16,
    })
    return;

  },
  setPoi() {
    this.setData({
      isPoiActive: !this.data.isPoiActive,
    })
  },
  // 移动到当前位置
  moveToLocation() {
    this.setData({
      scale: 16,
    })
    this.mapCtx.moveToLocation()
  },
  // 修改最小
  changeMaxSamll() {
    this.setData({
      scale: 4,
    })
  },
  // 修改最大
  changeMaxBig() {
    this.setData({
      scale: 15,
    })
  },
  // 点击空白的地方（点击地图时触发，2.9.0起返回经纬度信息）
  bindCheckPoint(e) {
    // console.log("你被标记了", e)
    let that = this
    var {
      isPoiActive,
    } = that.data;
    if (!isPoiActive) {
      // 未启动标记，直接返回
      return;
    }
    // 1. 获取位置信息，确定则直接标记位置
    var {
      latitude,
      longitude,
    } = e.detail;
    // console.log(latitude, longitude);
    // 获取位置
    that.getPosition(latitude, longitude);
    return;
  },
  // 点击有位置名称的地方（如：城市、公司、乡镇等等）
  // 点击地图poi点时触发，e.detail = {name, longitude, latitude}
  bindPoi(e) {
    // console.log(e)
    return;
    let that = this
    var {
      latitude,
      longitude
    } = e.detail
    that.setData({
      scale: that.data.scale + 1,
      latitude,
      longitude,
    })
  },
  /** 
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    let that = this
    return;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // return;
    this.mapCtx = wx.createMapContext('friendMap')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function (e) {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    if (!location) {
      // 为空则直接返回即可
      return;
    }
    let that = this;
    console.log(location)
    // 生成标记点
    that.addMarker(location);
  },
  // 生成标记点
  addMarker(location) {
    let that = this;
    var marker = that.getMarkerByLocation(location);
    var {
      markerList
    } = that.data;
    marker.id = markerList.length + 1;
    markerList.push(marker);
    that.setData({
      markerList,
    })
  },
  // 转换标记点
  getMarkerByLocation(location) {
    let that = this;
    var initMarker = {
      id: 1, // id 
      width: '20', // 标记点图标宽度
      height: '20', // 标记点图标高度
      latitude: location.latitude, // 纬度
      longitude: location.longitude, // 经度
      name: location.name, // 地点名
      iconPath: '/img/nfz.jpg', // 地图上的icon
      callout: { // 气泡
        content: location.name, // 气泡上的名字  
        color: '#0099FF', // 字体颜色
        fontSize: 10, // 字体大小 
        display: 'ALWAYS', // 总是显示
        bgColor: '', // 背景颜色
      }
    };
    return initMarker;
  },
  // 获取位置（根据经度、维度）
  getPosition(latitude, longitude) {
    wx.getLocation({ // 返回当前的经度、纬度
      type: 'gcj02',
      success: function (res) {
        const key = 'NE6BZ-ECCKA-FBFKU-CHTRS-OVSAJ-WNBVF'; //使用在腾讯位置服务申请的key
        const referer = '地图选点'; //调用插件的app的名称
        const location = JSON.stringify({ // 初始地址
          latitude,
          longitude
        });
        const category = '生活服务,娱乐休闲';
        wx.navigateTo({
          url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
        });
      },
      fail: function (err) {
        console.log("err", err)
      }
    });
  },
})

cityRecord.css 文件

cityRecord.css 文件（点击展开） 
/* pages/demo/cityRecord/cityRecord.wxss */
page {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.icon-position {
  width: 70rpx;
  height: 70rpx;
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
  z-index: 100;
  font-size: 24rpx;
}

.main-body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.cover-smaller {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  /* top: 20rpx; */
  bottom: 0px;

  right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-set {
  width: 70rpx;
  height: 70rpx;
  /* background: white; */
  border-radius: 10%;
}

.local {
  color: #0048ff;
  bottom: 130rpx;
  right: 20rpx;
}

.big-small-chenge {
  bottom: 50rpx;
  right: 20rpx;
}

.add-change {
  bottom: 210rpx;
  right: 20rpx;
}

.add-info {
  bottom: 50rpx;
  left: 20rpx;
}

.cut-change {
  bottom: 290rpx;
  right: 20rpx;
}


.icon-position image {
  width: 60rpx;
  height: 60rpx;
  vertical-align: bottom;
}

.class-text {
  font-size: 30rpx;
  color: #2c3c65;
}

.album {
  display: flex;
  /* width: 100%; */
  flex-direction: row;
  background-color: white;
  padding: 40rpx;
  margin: 0rpx 20rpx;
  font-family: -webkit-body;
}

.the-avatar {
  background: #fff;
}


.phone {
  color: #2c3c65;
  font-weight: 450;
  font-size: 28rpx;
  display: flex;
  line-height: 60rpx;
}

.content {
  /* margin-top: 20rpx; */
  /* margin-right: 10rpx; */
  color: black;
  font-weight: 445;
  /* margin-bottom: 15rpx; */
  font-size: 28rpx;
}

.content-title {
  margin-top: 20rpx;
  margin-right: 10rpx;
  color: black;
  font-size: medium;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.line {
  height: 1px;
  border-top: solid Silver 1px;
  margin-bottom: 40rpx;
  margin-top: 30rpx;
}

.search {
  border: 1px #2c3c65 solid;
  border-radius: 100rpx;
}

.active {
  color: red;
}

四、源码地址（等待上传）

github.com/TeaTools/wx…

【文章小尾巴】

文章小尾巴（点击展开）

文章写作、模板、文章小尾巴可参考：《写作“小心思”》
　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　　我是南方者，一个热爱计算机更热爱祖国的南方人。
　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 前端# 微信小程序# 微信
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYlfIKsV' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
Dhtmlx甘特图简单实现-五八三
Dhtmlx甘特图简单实现
Dhtmlx甘特图简单实现
2年前 3622
AI太强了！使用langchain自动生成代码-五八三
AI太强了！使用langchain自动生成代码
AI太强了！使用langchain自动生成代码
2年前 466
Playwright使用教程-五八三
Playwright使用教程
Playwright使用教程
2年前 464
? 配置及使用 Strapi CMS 的一些总结-五八三
? 配置及使用 Strapi CMS 的一些总结
? 配置及使用 Strapi CMS 的一些总结
2年前 419
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？-五八三
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
2年前 402
OpenTelemetry与Jaeger集成指南-五八三
OpenTelemetry与Jaeger集成指南
OpenTelemetry与Jaeger集成指南
2年前 380
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐