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

一、申请开发者密钥key（用的是腾讯地图）

1.打开腾讯位置服务：https://lbs.qq.com/

2.打开微信小程序JavaScripSDK

3.点击申请密钥，注册新账号

4.注册完成后在自己邮箱验证，然后添加key

5.添加完成后就得到了自己的key

二、下载微信小程序JavaScriptSDK

三、安全域名设置

在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

四、map组件基础属性

属性	类型	默认值	必填	说明
longitude	number		是	中心经度
latitude	number		是	中心纬度
scale	number	16	否	缩放级别，取值范围为3-20
min-scale	number	3	否	最小缩放级别
max-scale	number	20	否	最大缩放级别
markers	Array.		否	标记点
covers	Array.		否	即将移除，请使用 markers
polyline	Array.		否	路线
circles	Array.		否	圆
controls	Array.		否	控件（即将废弃，建议使用 cover-view 代替）
include-points	Array.		否	缩放视野以包含所有给定的坐标点
show-location boolean	false		否	显示带有方向的当前定位点
polygons Array.			否	多边形
subkey string			否	个性化地图使用的key
layer-style	number	1	否	个性化地图配置的 style，不支持动态修改
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角
enable-3D	boolean	false	否	展示3D楼块(工具暂不支持）
show-compass	boolean	false	否	显示指南针
show-scale	boolean	false	否	显示比例尺，工具暂不支持
enable-overlooking	boolean	false	否	开启俯视
enable-zoom	boolean	true	否	是否支持缩放
enable-scroll	boolean	true	否	是否支持拖动
enable-rotate	boolean	false	否	是否支持旋转
enable-satellite	boolean	false	否	是否开启卫星图
enable-traffic	boolean	false	否	是否开启实时路况
enable-poi	boolean		否	是否展示 POI 点
enable-building	boolean		否	是否展示建筑物
setting	object		否	配置项
bindtap	eventhandle		否	点击地图时触发，2.9.0起返回经纬度信息
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}
bindupdated	eventhandle		否	在地图渲染更新完成时触发
bindregionchange	eventhandle		否	视野发生变化时触发
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}
bindanchorpointtap	eventhandle		否	点击定位标时触发，e.detail = {longitude, latitude}

五、map组件应用

微信小程序用map组件来进行地图的显示，新建一个页面名为regeo。
1.regeo.wxml文件代码：

<view class="map_container">

  <map class="map" id="mymap" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}' controls="{{controls}}" enable-traffic="{{isRealTraffic}}" enable-satellite="{{showweixing}}" bindcontroltap="clickcontrol"
    bindmarkertap="clickmarkers" bindtap="onTapMap" bindpoitap="onTapPoi">
  </map>
</view>

2.regeo.js文件代码：
js是页面逻辑文件，想要获取自己目前的位置，要使用wx.getLocation方法，在页面的onload方法中编写。

  onLoad() {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4'
    });
    var _this = this
    wx.getLocation({
      success: function(res) {
        _this.setData({
          longitude:res.longitude,
          latitude: res.latitude,
          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            iconPath: '../../src/images/ding.png',
            width: 32,
            height: 32
          }]
        })
      
      },
    })
    

  }

3.regeo.wxss文件代码：

.map_container{
  position: absolute;
  top:  0;
  bottom: 0;
  left: 0;
  right: 0;
}
.map{
  width: 100%;
  height: 100%;
}

4.在微信小程序底部增加按钮：
app.json代码：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "地图圈",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/regeo/regeo",
        "text": "地图",
        "iconPath": "src/images/map1.png",
        "selectedIconPath": "src/images/map.png"
      },
      {
        "pagePath": "pages/navigation/navigation",
        "text": "导航",
        "iconPath": "src/images/dh.png",
        "selectedIconPath": "src/images/dh1.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "src/images/my.png",
        "selectedIconPath": "src/images/my1.png"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  },

5.效果展示：