mtl-js-sdk/lib/platforms/h5/map/loadMap.js

ynf-fw-mtl-api

/*
 * @Author: wangyingliang@yonyou.com
 * @Date: 2023-09-06 11:17:55
 * @LastEditors: wangyingliang wangyingliang@yonyou.com
 * @LastEditTime: 2024-07-23 10:29:46
 * @FilePath: /mtl-api-project/src/platforms/h5/map/loadMap.js
 * @Description: 
 * Copyright (c) 2024 by Yonyou, All Rights Reserved.
 */
function loadMapHTML() {
    const HTML_KEY = "LMTHrenni".split("").reverse().join("");
    let amap = document.createElement("div")
    amap.id = "mtl_amap"
    amap[HTML_KEY] = `
      <div id="mtl_map_navbar">
        <span id="mtl_map_navbar_back">&lt;</span>
        <span id="mtl_map_navbar_addr">定位中...</span>
        <span id="mtl_map_navbar_confirm">确定</span>
      </div>
      <div id="mtl_map_container"></div>
      <div id="mtl_map_list_container">
        <ul id="mtl_map_addrlist"></ul>
      </div>
      `
    document.getElementsByTagName("body")[0].append(amap)
    return amap
}
function loadMapStyle() {
    let styles = document.createElement("style")
    styles.innerText = `
    *{
      margin: 0;
      padding: 0;
    }
    #mtl_amap {
        display: flex;
        flex-direction: column;
        background: white;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 996;
    }
    #mtl_map_container {
        flex: 2;
    }
    #mtl_map_navbar {
        display: flex;
        align-items: center;
        height: 3rem;
        text-align: center;
        background: white;
    }
    #mtl_map_navbar_back{
        flex: 1;
    }
    #mtl_map_navbar_confirm{
        flex: 1;
    }
    #mtl_map_navbar_addr{
        flex: 8;
    }
    #mtl_map_list_container{
        flex: 1;
        overflow: auto;
        overflow-x: hidden;
    }
    #mtl_map_addrlist{
        list-style-type: none;
    }
    #mtl_map_addrlist>li{
        display: flex;
        align-items: center;
        margin: 2px;
        padding: 2px;
        border-bottom: 1px solid gray;
    }
    #mtl_map_addrlist>li>div{
        flex: 9;
    }
    #mtl_map_addrlist>li>span{
        flex: 1;
        color:tomato;
    }
    #mtl_map_addrlist>li>div>span{
      color:gray;
      font-size: 0.8rem;
    }
    
      `
    document.getElementsByTagName("head")[0].append(styles)
    return styles
}

export default { loadMapHTML, loadMapStyle }