Personalisierte Karte der WeChat-Miniprogrammkarte (Sonnenaufgangs- und Sonnenuntergangsthema) -----Aktualisiert

Personalisierte Karte: Ändern Sie das Kartenthema dynamisch entsprechend den Sonnenauf- und -untergangszeiten

Das Theme des WeChat-Applets wechselt das dunkle Theme entsprechend der Zeit von Sonnenaufgang und Sonnenuntergang, sodass die weiße Karte im Applet besonders auffällig ist und so eine neue Nachfrage entsteht – personalisierte Karte

Vorbereitung auf die Personalisierung

Die personalisierte Kartenstilkomponente ist eine erweiterte Kartenfunktion, die von Tencent Location Services für Entwickler bereitgestellt wird. Entwickler können Hintergrundoberflächen, Hintergrundlinien, Straßen, POIs und andere Kartenelemente im gesetzlich zulässigen Rahmen anpassen und ihre bevorzugten Karten flexibel gestalten

Rufen Sie die offizielle Website von Tencent Address Service auf (ungültig und nach dem 30. Juni 2023 nicht mehr wirksam)

https://lbs.qq.com/dev/console/custom/apply . Wählen Sie das Thema aus, das Sie entwickeln möchten, und geben Sie die APPID Ihres eigenen Applets ein. Anschließend generiert das System einen Schlüssel (Schlüssel).

Nutzen Sie die Zahlungsdienste des WeChat-Miniprogramms

WeChat Mini-Programm, kostenpflichtige Servicekarte, personalisierter Stil, Komponentenlink: Entwicklungshandbuch

Mini-Programmentwicklung

html 代码. Die Ebenenstilnummer ist der Stilname

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

js 代码. Beachten Sie, dass der Layer-Stil nur einmal definiert werden kann, daher muss der Wert in den Daten festgelegt werden.

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

GetSunriseAndSunsetTime-Funktion (Rückgabestil je nach Sonnenaufgangs- und Sonnenuntergangszeit umschalten)

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
}