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

本文主要是介绍微信小程序map 之个性化地图（日出日落主题）-----更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

个性化地图之根据日出日落时间动态变换地图主题
- 个性化前的准备
- ~~进入腾讯地址服务官网（作废 2023年6月30日后不再生效）~~
- 使用微信小程序付费服务
- 小程序开发
- - html `代码`. layer-style 编号为样式名称
  - js`代码`. 注意的是，layer-style只能定义一次，所以值必须在data 中就要设定好
  - GetSunriseAndSunsetTime 函数（根据日出日落时间切换return style)

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

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

个性化前的准备

地图个性化样式组件是腾讯位置服务为开发者提供的地图高级能力，开发者可以在法律允许的范围内，定制背景面、背景线、道路、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
}