// 企业地址页面

import * as config from '../../../../utils/config';
// import * as tencentMapPlugin from '../../../../utils/plugins/tencentMap';
import common from '../../../../utils/common';

const app = getApp(); // 获取应用实例

Page({

  /**
   * 页面的初始数据
   */
  data: {
    adList: [
      'https://mmbiz.qpic.cn/mmbiz_jpg/GlJNOlDRz7BRyqxutKE4iaqgnvoCU5hiarzia1c8Qj3IXvmME6MeQxCGnx7EQOL2t560kIxQ5aahx532g4uFwIaug/0?wx_fmt=jpeg',
      'https://mmbiz.qpic.cn/mmbiz_jpg/GlJNOlDRz7BRyqxutKE4iaqgnvoCU5hiarPoR3wnTvbJOLClPADBrg2jbeAggP3WKMonwRLic6iaKs0AsiavqqFFibgQ/0?wx_fmt=jpeg'
    ],
    address: '',
    latitude: null,
    longitude: null,
    phone: '',
    companyname: '',
    imagePath: app.globalData.imagePath,
    map: {},
    markers: [],
    circles: []
  },
  regionchange(e) { // 视野改变时,regionchange会触发两次,返回的type值分别为begin/end
    console.log('regionchange', e.type);
  },
  markertap(e) { // 点击标记点时触发
    const that = this;
    let index = e.detail.markerId;
    let name = this.data.markers[index].title;
    let latitude = this.data.markers[index].latitude;
    let longitude = this.data.markers[index].longitude;
    console.log('markertap', index);
    const menu = !common.charisEmpty(this.data.phone) ? ['打电话', '到这里'] : ['到这里'];
    tt.showActionSheet({
      itemList: menu,
      success(res) {
        if (res.tapIndex == 0) {
          tt.makePhoneCall({
            phoneNumber: that.data.phone
          });
        } else {
          // tencentMapPlugin.routePlan(name, latitude, longitude);
          that.openMapApp(name, latitude, longitude);
        }
      },
      fail(res) {
        console.error('error', res);
      }
    });
  },
  controltap(e) { // 点击控件时触发
    console.log('controltap', e.controlId);
  },
  previewImage(e) {
    tt.previewImage({
      current: this.data.adList[e.target.dataset.id],
      urls: this.data.adList
    });
  },
  navigateTo(e) {
    switch (e.target.id) {
      case "navigate":
      case "address":
        tt.openLocation({
          latitude: Number(this.data.latitude),
          longitude: Number(this.data.longitude),
          name: this.data.companyname,
          scale: 15
        });
        break;
      case "phone":
        tt.makePhoneCall({
          phoneNumber: this.data.phone
        });
        break;
      default:
        break;
    }
  },
  openMapApp(name, latitude, longitude) {
    this.mapCtx.openMapApp({
      latitude: latitude,
      longitude: longitude,
      destination: name,
      success(res) {
      },
      fail(err) {
      }
    });
  },

  /**
   * 说明：生命周期函数--监听页面加载(触发1次)
   * 触发时间：初始化的时候触发、被销毁后进入触发
   * 参数：带参数
   */
  onLoad: function (options) {
    let address = options.address;
    let latitude = options.latitude;
    let longitude = options.longitude;
    let phone = options.phone;
    let companyname = options.companyname;
    this.setData({
      address: address,
      latitude: latitude,
      longitude: longitude,
      phone: phone,
      companyname: companyname,
      map: { // 地图属性
        coordinate: { // 坐标
          latitude: 22.566583, // 中心纬度
          longitude: 114.100045 // 中心经度
        },
        scale: 16, // 缩放级别,取值范围为3-20
        showLocation: true, // 默认值:false,显示带有方向的当前定位点
        enable3D: true, // 默认值:false,展示3D楼块(工具暂不支持)
        showCompass: true // 默认值:false,显示指南针
      },
      markers: [ // 标记点,用于在地图上显示标记的位置
        {
          id: 0, // 标记点id,marker点击事件回调会返回此id
          latitude: 22.566583, // 纬度(浮点数,范围 -90 ~ 90)
          longitude: 114.100045, // 经度(浮点数,范围 -180 ~ 180)
          title: companyname, // 标注点名,点击时显示,callout存在时将被忽略
          iconPath: app.globalData.imagePath + "/images/common/jxl.png", // 显示的图标,项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径和网络图片(2.3.0)
          rotate: 0, // 旋转角度,顺时针旋转的角度,范围 0 ~ 360,默认为0
          alpha: 1, // 标注的透明度,默认1,无透明,范围 0 ~ 1
          width: 25, // 标注图标宽度(默认为图片实际宽度)
          height: 25, // 标注图标高度(默认为图片实际高度)
          callout: { // 自定义标记点上方的气泡窗口
            content: companyname, // 文本
            color: "#636162", // 文本颜色
            fontSize: 14, // 文字大小
            borderRadius: 10, // 边框圆角
            borderWidth: 1, // 边框宽度
            borderColor: "#222222", // 边框颜色
            bgColor: "#fff", // 背景色
            padding: 5, // 文本边缘留白
            display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
            textAlign: "center", // 文本对齐方式,有效值: left, right, center
            anchorX: 0, // 相对于原地位置的横向偏移量，向右为正数
            anchorY: 0 // 相对于原地位置的纵向偏移量，向下为正数
          }
        }
      ],
      circles: [ // 在地图上显示圆
        {
          latitude: 22.566583, // 纬度(浮点数,范围 -90 ~ 90)
          longitude: 114.100045, // 经度(浮点数,范围 -180 ~ 180)
          color: "#ee7788aa", // 描边的颜色(8位16进制表示,后两位表示alpha值)
          fillColor: "#7cb5ec88", // 填充的颜色(8位16进制表示,后两位表示alpha值)
          radius: 50, // 半径
          strokeWidth: 1 // 描边的宽度
        }
      ]
    });
  },

  /**
   * 说明：生命周期函数--监听页面初次渲染完成(触发1次)
   * 触发时间：初次渲染完成时触发、被销毁后进入页面渲染完成时触发
   */
  onReady: function () {
    this.mapCtx = tt.createMapContext('map');
  },

  /**
   * 说明：生命周期函数--监听页面显示
   * 触发时间：进入时触发、由下一页返回当前页的时候
   */
  onShow: function () {},

  /**
   * 说明：生命周期函数--监听页面隐藏
   * 触发时间：进入下一页
   */
  onHide: function () {

  },

  /**
   * 说明：生命周期函数--监听页面卸载(被销毁)
   * 触发时间：返回上一页的时候、跳转tabbar页的时候
   */
  onUnload: function () {

  },

  /**
   * 说明：页面相关事件处理函数--监听用户下拉动作(下拉事件)
   */
  onPullDownRefresh: function () {

  },

  /**
   * 说明：页面上拉触底事件的处理函数(上拉触底事件)
   */
  onReachBottom: function () {

  }
});

<!-- SWIPER -->
<swiper indicator-dots="{{adList.length > 1}}" class="round-dot" autoplay="{{true}}" indicator-active-color="#53cac3" circular="{{true}}" interval="5000" duration="500">
    <block tt:for="{{adList}}" tt:key="index">
        <swiper-item>
            <image src="{{item}}" class="slide" data-id="{{index}}" bindtap="previewImage" />
        </swiper-item>
    </block>
</swiper>

<!-- HEADER -->
<view class="head-wrapper logo-mode">
    <image class="logo" src="/static/images/common/logo_680x680.png"></image>
    <view class="title">
        <view class="name">{{companyname}}</view>
        <image class="navigate" id="navigate" src="/static/images/common/navigate.png" bindtap="navigateTo"></image>
    </view>
</view>

<!-- MORE -->
<view class="more">
    <van-cell-group>
        <van-cell title="企业地址" label="{{address}}" id="address" bindtap="navigateTo" />
        <van-cell tt:if="{{phone}}" title="联系电话" label="{{phone}}" id="phone" bindtap="navigateTo" />
    </van-cell-group>
</view>

<!-- MAP -->
<map id="map" longitude="{{map.coordinate.longitude}}" latitude="{{map.coordinate.latitude}}" scale="{{map.scale}}" markers="{{markers}}"  circles="{{circles}}"  show-location="{{map.showLocation}}" enable-3D="{{map.enable3D}}" show-compass="{{map.showCompass}}" bindcontroltap="controltap" bindmarkertap="markertap" bindregionchange="regionchange" style="width: 100%; height: 47vh;">
</map>

分割线以下的是“疑似部分代码”产生bug的地方：

/**
   * 说明：生命周期函数--监听页面加载(触发1次)
   * 触发时间：初始化的时候触发、被销毁后进入触发
   * 参数：带参数
   */
  onLoad: function (options) {
    let address = options.address;
    let latitude = options.latitude;
    let longitude = options.longitude;
    let phone = options.phone;
    let companyname = options.companyname;
    this.setData({
      address: address,
      latitude: latitude,
      longitude: longitude,
      phone: phone,
      companyname: companyname,
      map: { // 地图属性
        coordinate: { // 坐标
          latitude: latitude, // 中心纬度
          longitude: longitude // 中心经度
        },
        scale: 16, // 缩放级别,取值范围为3-20
        showLocation: true, // 默认值:false,显示带有方向的当前定位点
        enable3D: true, // 默认值:false,展示3D楼块(工具暂不支持)
        showCompass: true // 默认值:false,显示指南针
      },
      markers: [ // 标记点,用于在地图上显示标记的位置
        {
          id: 0, // 标记点id,marker点击事件回调会返回此id
          latitude: latitude, // 纬度(浮点数,范围 -90 ~ 90)
          longitude: longitude, // 经度(浮点数,范围 -180 ~ 180)
          title: companyname, // 标注点名,点击时显示,callout存在时将被忽略
          iconPath: app.globalData.imagePath + "/images/common/jxl.png", // 显示的图标,项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径和网络图片(2.3.0)
          rotate: 0, // 旋转角度,顺时针旋转的角度,范围 0 ~ 360,默认为0
          alpha: 1, // 标注的透明度,默认1,无透明,范围 0 ~ 1
          width: 25, // 标注图标宽度(默认为图片实际宽度)
          height: 25, // 标注图标高度(默认为图片实际高度)
          callout: { // 自定义标记点上方的气泡窗口
            content: companyname, // 文本
            color: "#636162", // 文本颜色
            fontSize: 14, // 文字大小
            borderRadius: 10, // 边框圆角
            borderWidth: 1, // 边框宽度
            borderColor: "#222222", // 边框颜色
            bgColor: "#fff", // 背景色
            padding: 5, // 文本边缘留白
            display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
            textAlign: "center", // 文本对齐方式,有效值: left, right, center
            anchorX: 0, // 相对于原地位置的横向偏移量，向右为正数
            anchorY: 0 // 相对于原地位置的纵向偏移量，向下为正数
          }
        }
      ],
      circles: [ // 在地图上显示圆
        {
          latitude: latitude, // 纬度(浮点数,范围 -90 ~ 90)
          longitude: longitude, // 经度(浮点数,范围 -180 ~ 180)
          color: "#ee7788aa", // 描边的颜色(8位16进制表示,后两位表示alpha值)
          fillColor: "#7cb5ec88", // 填充的颜色(8位16进制表示,后两位表示alpha值)
          radius: 50, // 半径
          strokeWidth: 1 // 描边的宽度
        }
      ]
    });
  },

最后，也附上我刚好看到遇到类似此问题的小伙伴发布的帖子链接，如下：

地图组件bug - API或组件 - 抖音开放平台 (open-douyin.com)

地图组件marker设置问题 - API或组件 - 抖音开放平台 (open-douyin.com)

最后的最后，最近开始研究抖音小程序开发，希望更好地营造技术圈氛围，给社区贡献一份力量！😀