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

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

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

个性化前的准备

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

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

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

使用微信小程序付费服务

微信小程序付费服务 中地图个性化样式组件 链接: 开发指南

小程序开发

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
}