微信小程序map 之个性化地图（日出日落主题）-----更新-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序map 之个性化地图（日出日落主题）-----更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

个性化地图之根据日出日落时间动态变换地图主题

微信小程序主题有根据日出日落时间切换深色主题，这样白色的地图在小程序中尤为显眼，由此诞生一个新的需求----个性化地图

个性化前的准备

地图个性化样式组件是腾讯位置服务为开发者提供的地图高级能力，开发者可以在法律允许的范围内，定制背景面、背景线、道路、POI等多种地图元素，灵活地设计心仪的地图样式

进入腾讯地址服务官网（作废 2023年6月30日后不再生效）

https://lbs.qq.com/dev/console/custom/apply.进行选择自己开发需要的主题，并输入自己的小程序的APPID，之后系统会生成密钥（key）
小程序个性化地图,微信小程序,微信小程序,小程序

使用微信小程序付费服务

微信小程序付费服务中地图个性化样式组件链接: 开发指南文章来源地址https://www.toymoban.com/news/detail-659561.html

小程序开发

html `代码`. layer-style 编号为样式名称

  <map id="map" 
       latitude="{{latitude}}" 
       longitude="{{longitude}}" 
       scale="17" 
       bindregionchange="regionchange" 
       show-location="{{true}}" 
       subkey="{{subKey}}" 
       layer-style="{{layerStyle}}" >
 </map>

js`代码`. 注意的是，layer-style只能定义一次，所以值必须在data 中就要设定好

Page({
  /**
   * 页面的初始数据
   */
  data: {
    latitude: "",
    longitude: "",
    isPosition: true,
    siteZoneId: '',
    layerStyle: SetLayerStyle(),
    subKey: MAP_SUBKEY,
    }
  })

GetSunriseAndSunsetTime 函数（根据日出日落时间切换return style)

import { TimeFormate } from "./utils";
import {LAYER_STYLES,SUNTIME_LIST} from './config'

//根据当前时间判断样式
function GetSunriseAndSunsetTime() {
  var layerStyle;
  let time = TimeFormate('', 'yyyy/MM/dd');
  let now = new Date().getTime();
  let month = new Date().getMonth();
  //获取当前月的日落、日出时间点
  let sunrise = SUNTIME_LIST[month].sunrise;
  let sunset = SUNTIME_LIST[month].sunset;
  //根据当前时间获取当天日出、日落时间戳
  sunrise = new Date(`${time} ${sunrise}`).getTime();
  sunset = new Date(`${time} ${sunset}`).getTime();
  return {sunrise,sunset}
}

//根据日出日落时间判断返回的个性化地图样式
export function SetLayerStyle(){
  let {sunrise,sunset} = GetSunriseAndSunsetTime();
  let now = new Date().getTime();
  return (now < sunrise || now > sunset)?LAYER_STYLES.sunset:LAYER_STYLES.sunrise
}