1 文档

　　官方文档

　　api文档

 

2 准备工作

2.1 注册开发者

1）进入腾讯位置服务官网

　　地址

 

2）注册

　　注册号之后，这个key是需要用到的

image

 

2.2 开通地图服务

1）进入微信公众平台-账号设置-第三方设置-插件管理

image

 

2）添加需要的插件

image

 

2.3 服务器域名配置

1）微信公众平台-开发管理-开发设置

image

 

 2）配置域名

　　往下拉找到服务器域名，点击修改

image

　　加入以下地址

https://apis.map.qq.com

 

image

 

2.4 官方开源示例小程序

　　

map.dd86f5e2

　　进入小程序，下面有源码链接，可以拷下来，放到开发者工具去看看

 

image

 

3 小程序配置

 1）添加配置文件

　　image

　 INDOOR_KEY ：2.1中注册的那个key

export const CDN_PATH = 'https://3gimg.qq.com/lightmap/xcx/demoCenter/images';
export const COS_PATH = 'https://mapapi.qq.com/web/miniprogram/demoCenter/images';
export const PLUGIN_KEY = '';
export const MOYUAN_KEY = '';
export const BAIQIAN_KEY = '';
export const YULU_KEY = '';
export const DIFUNI_KEY = '';
export const INDOOR_KEY = '这里填写2.1中注册的那个key';
export const REFERER = '腾讯位置服务示例中心小程序';
export const WEBSERVICE_APPID = '';
export const CUSTOM_KEY = ''; // 个性化地图key
export const WS_HOST = 'https://apis.map.qq.com'
export const SMART_SOLUTION_KEY = ''; //出行解决方案key
export const NEARBY_CAR_KEY = '';
export const NEARBY_CAR_SK = ''; //出行解决方案sk

 

2）app.json添加配置

　　以下配置和pages同级

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
    }
},
"requiredPrivateInfos": [
  "getLocation",
  "onLocationChange",
  "startLocationUpdateBackground",
  "chooseAddress"
],
"plugins": {
    "routePlan": {
        "version": "1.0.19",
        "provider": "wx50b5593e81dd937a"
    },
    "chooseLocation": {
        "version": "1.0.10",
        "provider": "wx76a9a06e5b4e693e"
    },
    "subway": {
        "version": "1.0.13",
        "provider": "wx6aaf93c4435fa1c1"
    },
    "citySelector": {
        "version": "1.0.2",
        "provider": "wx63ffb7b7894e99ae"
    }
},

 

 

4 小程序开发

4.1 json

{
  "usingComponents": {

  },
  "navigationBarTitleText": "地图显示"
}

 

4.2 wxss

/* pages/show-map/show-map.wxss */
.show-map-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  background: #F8F8F7;
}
.map-container {
  padding:20px 0 0;
  margin-top: 10px;
  background: #FFF;
  width: 100%;
  position: relative;
}
.map-content {
  background: #FFF;
  position: absolute;
  z-index: 1;
  width: 100%;
  opacity: 0;
  box-sizing: border-box;
}
.map-content-show {
  height: auto;
  z-index: 2;
  opacity: 1;
  transition: 0.3s;
}
.map-padding {
  padding-bottom: 20px;
}
.map {
  width:100%;
  height:400px;
}
.indoor-map {
    width: 100%;
    height: 400px;
}
.feature-content {
  height: 56px;
  display: flex;
  justify-content: space-between;
  line-height: 56px;
}
.feature-content-border {
border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

 

4.3 wxml

4.3.1 代码

<map class="map"  enable-overlooking="{{true}}" 
        latitude="{{location.latitude}}" longitude="{{location.longitude}}" show-location="{{true}}"
        markers="{{markers}}"  
        polyline="{{polyline}}"  
        scale="16" enable-poi="true" enable-rotate>
        </map>

 

4.3.2 属性说明

1）enable-overlooking

　　开启俯视

 

2）show-location，latitude，longitude

　　show-location：显示当前定位点

　　latitude：中心经度

　　longitude：中心纬度

　　效果如下

　　

　　image

 

3）markers

　　标注点的数据数组，数据格式如下

[
   {
    callout: {
        content: '腾讯总部大楼',
        padding: 10,
        borderRadius: 2,
        display: 'ALWAYS'
    },
    latitude: 40.040415,
    longitude: 116.273511,
    iconPath: './imgs/Marker1_Activated@3x.png',
    width: '34px',
    height: '34px',
    rotate: 0,
    alpha: 1
   }
]
效果如下

image

 

4）polyline

　　覆盖物(也就是路线)的数组数据，格式如下

[
    {
    points: [
        {latitude:40.040129,longitude:116.274968},
        {latitude:40.038974,longitude:116.275214},
        {latitude:40.038974,longitude:116.275214},
        {latitude:40.038565000000006,longitude:116.272683},
        {latitude:40.03848200000001,longitude:116.27209500000001},
        {latitude:40.03836100000001,longitude:116.27074},
        {latitude:40.03832700000001,longitude:116.270515},
        {latitude:40.03807400000001,longitude:116.268038},
        {latitude:40.03801400000001,longitude:116.26763600000001},
        {latitude:40.03801400000001,longitude:116.26763600000001},
        {latitude:40.03790800000001,longitude:116.267508},
        {latitude:40.03450300000001,longitude:116.270961},
        {latitude:40.03419900000001,longitude:116.271221},
        {latitude:40.03396500000001,longitude:116.271401},
        {latitude:40.03245000000001,longitude:116.272472}
    ],
    color: '#3875FF',
    width: 8,
    dottedLine: false,
    arrowLine: false,
    borderWidth: 2,
    // colorList: ['#3875FF']
    }

]

 

5）scale

地图的比例尺

image

 

4.4 js

4.4.1 代码

// pages/show-map/show-map.js
import {INDOOR_KEY} from '../../../../config/appConfig';

const INIT_POLYLINE = {
    points: [
    ],
    color: '#3875FF',
    width: 8,
    dottedLine: false,
    arrowLine: false,
    borderWidth: 2,
    // colorList: ['#3875FF']
};

const INIT_MARKER = {
    callout: {
        content: '',
        padding: 10,
        borderRadius: 2,
        display: 'ALWAYS'
    },
    latitude: 40.040415,
    longitude: 116.273511,
    iconPath: '../../../../image/Marker1_Activated@3x.png',
    width: '34px',
    height: '34px',
    rotate: 0,
    alpha: 1
};

Page({
    /**
   * 页面的初始数据
   */
    data: {
    key: INDOOR_KEY,
    location:{
      latitude:40.040415,
      longitude:116.273511
    },
    polyline: [{
            ...INIT_POLYLINE
    }],
    markers: [{
            ...INIT_MARKER
        }],
   
    },
    onLoad: function () {
    var that = this
        if (!INDOOR_KEY) {
            console.error('请传入有效的key');
    }
    that.initLocation ()
      setInterval(() => { 
        that.getLocation ()
      }, 5000)
  
  },
    // 初始化中心经纬度
    initLocation(){
      // 获取当前定位信息
      wx.getLocation({
        type: 'gcj02', // 返回地理位置的偏移坐标系，wgs84 是最常用的地理坐标系
        success: (res) => {
           this.setData({
            'location.latitude': res.latitude  , // 设置中心纬度
            'location.longitude': res.longitude , // 设置中心经度
           });
        },
        fail: (err) => {
          console.log('定位失败', err);
        }
      })
    },

    getLocation () {
      // 获取当前定位信息
      wx.getLocation({
        type: 'gcj02', // 返回地理位置的偏移坐标系，wgs84 是最常用的地理坐标系
        success: (res) => {
           var current = {
             latitude:res.latitude + 0.00005 * this.data.polyline[0].points.length,
             longitude:res.longitude + 0.00005 * this.data.polyline[0].points.length
          }
          // 设置路线polyline经纬度集合
           var points = this.data.polyline[0].points
           points.push(current)
           this.setData({
             'polyline[0].points':points
           })
           console.log('获取定位',this.data.polyline)
           // 设置marker经度纬度
           this.setData({
            'markers[0].latitude':current.latitude,
            'markers[0].longitude':current.longitude
           });
           
        },
        fail: (err) => {
          console.log('定位失败', err);
        }
      })
    },
    
});

 

4.4.2 说明

1）INIT_POLYLINE

　　用于初始化线路的数组数据polyline

　　

2）INIT_MARKER

　　用于初始化标记点的数组数据markers

 

3）initLocation方法

　　去获取当前位置的经纬度，初始化latitude，longitude的值，用于在地图显示当前位置

 

4）getLocation方法

　　去获取当前位置的经纬度

　　把当前位置的经纬度赋值给标记点的数据数组中markers[0].longitude(这里只有一个标记点)

　　把当前位置的经纬度赋值添加到路线的数据数组中：polyline[0].points(这里只有一条路线)

　　ps：一下代码在后面把经纬度都不断的加值是因为我在电脑上测试，每次获取到的经纬度都一样，所以为了展示移动的效果，加上后面的值

var current = {
             latitude:res.latitude + 0.00005 * this.data.polyline[0].points.length,
             longitude:res.longitude + 0.00005 * this.data.polyline[0].points.length
          }

 

4.5 效果

　　每5秒获取一次定位，这个线路会从0开始慢慢变长

image