小程序使用map

2008的肉包

已于 2022-08-28 22:49:44 修改

阅读量2.7k

点赞数 3

文章标签：小程序 java 前端

于 2022-08-28 00:09:15 首次发布

本文链接：https://blog.csdn.net/weixin_66496801/article/details/126550272

版权

原生腾讯地图：

直接使用map标签，其他配置参考wx文档map,

下面代码只作举例

wxml：

<map 
enable-building="{{true}}"
show-scale="{{true}}" 
show-compass="{{true}}" 
show-location="{{true}}" 
latitude="40.13688946041713" 
longitude="116.20873211575088" 
bindtap="takIt" 
class="txmap">
</map>

wxss:

.txmap{
    width: 100vw;
    height: 100vh;
}

js:

data: {
    markers:[
      {
        id:0,
        iconPath:"/pages/static/img/晕倒图.png",
        width:50,
        height:50,
        longitude:116.20873211575088,
        latitude:40.13688946041713
      }
    ]
  },
  takIt(e){
    console.log(e);
  },

还有一种情况，就是不仅要使用地图，还要使用路线导航之类的，这个时候就要交给插件了：

先看实测效果图：

那么就开始枯燥无味的走流程了：

首先要获取到腾讯位置服务的key码：

腾讯位置服务 - 立足生态，连接未来

登陆注册之后点击

找到应用管理-我的应用；

创建应用：

创建完成之后点击-----添加key：

有了key码之后就是插件的使用了：

1、插件申请接入：

在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务路线规划” 申请，审核通过后，小程序开发者可在小程序内使用该插件。

2、引入插件包：

路线规划appId： wx50b5593e81dd937a

// app.json
{
  "plugins": {
    "routePlan": {
      "version": "1.0.19",
      "provider": "wx50b5593e81dd937a"
    }
  }
}

3、设置定位授权：

路线规划插件需要小程序提供定位授权才能够正常使用定位功能：

// app.json
{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

4、使用插件：

插件页面调用示例：

let plugin = requirePlugin('routePlan');
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
let endPoint = JSON.stringify({  //终点
  'name': '北京西站',
  'latitude': 39.894806,
  'longitude': 116.321592
});

    // 还可以拼接navigation参数，navigation=1代表显示导航按钮，为0代表不显示导航按钮
wx.navigateTo({
  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

插件页面参数

属性	类型	说明	是否必须传入
key	string	调用路线规划插件需要申请腾讯位置服务的服务账号，key是开发者的唯一标识。申请key	是
referer	string	调用来源，一般为您的应用名称，请务必填写！	是
endPoint	string	终点	是
startPoint	string	起点, 如果不传起点参数，则起点默认当前用户的真实定位	否
mode	string	默认出行规划方式，目前支持三种方式：driving（驾车）、transit（公交）、walking（步行），不传则默认发起驾车规划	否
navigation	number	值为1时，开启驾车导航功能；默认不开启此功能	否
themeColor	string	插件主题色，16进制色值，默认是#427CFF	否

startPoint 说明

属性	类型	说明	是否必须传入
name	string	位置名称	是
latitude	number	纬度	是
longitude	number	经度	是

endPoint 说明

属性	类型	说明	是否必须传入
name	string	位置名称	是
latitude	number	纬度	是
longitude	number	经度	是
poiid	string	终点POI ID（可通过腾讯位置服务地点搜索服务得到），当目的地为较大园区、小区时，会以引导点做为终点（如出入口等），体验更优。	否

注意：个人账号在类目不对或者tx看你不顺眼的情况下是通过不了权限的

复制..不是，研究到这里的时候可能会发现一个问题，就是如果没有资质是用不了页面的，这个时候可以在开发者工具里看报错提示，会提示要你引入组件，这个时候多点几遍，多试几遍，或许你会发现，他还是不行啊，但是很快啊！猛点几下，有可能就通过了。

高德地图：

令人费解的是，虽然高德地图的key码用上了，但是用的还是tengxun地图，也就是wx自带的map组件

首先如果没有高德开发者账号，就要去注册：

地址：高德开放平台 | 高德地图API

然后去创建新应用：

然后添加key：

就可以得到key码：

下载并安装微信小程序插件：

下载开发包并解压：相关下载-微信小程序插件 | 高德地图API

解压后得到 amap-wx.js 文件，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下，完成安装。

设置安全通讯域名：

在 "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去

之后又是劳累的cv啦：

wxml

地图的展现还是利用的map组件

<view class="tui-map">
  <map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}"  include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;"></map>
</view>
<view class="tui-map-search" bindtap="getAddress">
   <icon size='20' type='search' class='tui-map-search-icon'></icon> 
  <input class="tui-map-input" placeholder="搜索" focus="{{focusStatus}}"></input>
</view>
<view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
  <view class="page-group">
    <view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</view>
    <view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</view>
    <view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</view>
  </view>
  <view class="tui-warn">
    {{distance}}米
  </view>
  <view class="tui-warn">
    {{duration}}分钟
  </view>
</view>

wxss


  .tui-map-search{
    width: 100%;
    height: 80rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    box-sizing: border-box;
    padding: 5rpx 10px;
    background-color: #fff;
    line-height: 70rpx;
  }
  .tui-map-input{
    height: 70rpx;
    line-height: 70rpx;
    font-size: 30rpx;
    margin-left: 25px;
  }
  .tui-map-search-icon{
    position: absolute;
    top: calc(50% - 10px);
    left: 10px;
  }
  .tui-map{
    width: 100%;
    height: calc(100% - 80rpx);
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .tui-map-direction{
    width: 32px;
    height: 32px;
    position: fixed;
    right: 10px;
    bottom: 80px;
    z-index: 100000;
  }
  
  .page-group{
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: #fff;
  }
  .page-nav-list{
    padding:20rpx 0 ;
    font-size: 30rpx;
    display: table-cell;
    text-align: center;
    width: 100%;
    color: #222;
  }
  .page-nav-list.active{color:blue;}
  .tui-warn{
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    color: lightseagreen;
    font-size: 30rpx;
  }
  .tui-search-bottom{
    height: 150px;
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
  }

js

首先要把下载好的js导入js文件

var amapFile = require('../libs/amap-wx.js');

var markersData = [];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    key: '8ec405c4f28b27bc6ff8171184d066cd',
    show: false,
    currentLo : null,
    currentLa : null,
    newCurrentLo : null,
    newCurrentLa : null,
    distance : 0,
    duration : 0,
    markers : null,
    scale: 16,
    polyline: null,
    statusType: 'car',
    includePoints:[]
  },
  makertap: function(e) {
    var id = e.markerId;
    var that = this;
    that.showMarkerInfo(markersData,id);
    that.changeMarkerColor(markersData,id);
  },
  /**
   * 生命周期函数--监听页面加载
   */
   getAddress(e){
    var _this = this;
    wx.chooseLocation({
      success(res){
        var markers = _this.data.markers;
        markers.push({
          id: 0,
          longitude: res.longitude,
          latitude: res.latitude,
          title: res.address,
          // 自定义图标
          iconPath: '',
          width: 32,
          height: 32
        });

        var points = _this.data.includePoints;
        points.push({
          longitude: res.longitude,
          latitude: res.latitude
        });
        _this.setData({
          newCurrentLo: res.longitude,
          newCurrentLa: res.latitude,
          includePoints: points,
          markers: markers,
          show:true
        });
        _this.getPolyline(_this.data.statusType);
      }
    });
  },
  drawPolyline(self,color){
    return {
      origin: this.data.currentLo + ',' + this.data.currentLa,
      destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
      success(data) {
        var points = [];
        if (data.paths && data.paths[0] && data.paths[0].steps) {
          var steps = data.paths[0].steps;
          for (var i = 0; i < steps.length; i++) {
            var poLen = steps[i].polyline.split(';');
            for (var j = 0; j < poLen.length; j++) {
              points.push({
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            }
          }
        }
        self.setData({
          distance: data.paths[0].distance,
          duration: parseInt(data.paths[0].duration/60),
          polyline: [{
            points: points,
            color: color,
            width: 6,
            arrowLine: true
          }]
        });
      }
    }
  },
  getPolyline(_type){
    var amap = new amapFile.AMapWX({ key: this.data.key });
    var self = this;
    switch (_type){
      case 'car':
        amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
        break;
      case 'walk':
        amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
        break;
      case 'ride':
        amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
        break;
      default:
        return false;
    }
  },
  goTo(e){
    var _type = e.currentTarget.dataset.type;
    this.setData({statusType : _type});
    this.getPolyline(_type);
  },
  onLoad(options) {
    var _this = this;
    wx.getLocation({
      success(res){
        _this.setData({ 
          currentLo: res.longitude, 
          currentLa: res.latitude,
          includePoints: [{
            longitude: res.longitude,
            latitude: res.latitude
          }],
          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: res.address,
            // 自定义图标
            iconPath: '',
            width: 32,
            height: 32
          }]
        });
      }
    })
  },
})