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

ynf-fw-mtl-api

import tools from './loadScript'
import loadMap from './loadMap'
import config from './mapConfig'

function amapOpen(obj) {
    const { longitude, latitude } = obj
    window._AMapSecurityConfig = {
        securityJsCode: obj?.jsCode || config.amapSecret,
    }
    let key = config.amapKey
    if (obj?.jsKey) {
        key = obj?.jsKey
    }
    let url = `${config.amapURL}${key}`
    console.log('openMapAmapUrl', url)

    tools.loadScript(url, function () {
        const state = {
            amap: null, // 地图HTML元素
            map: null, // 地图实例
            marker: null, // 地图标点
            geolocation: null, // 地图定位插件
            geocoder: null, // 地图逆地理编码插件
            check: null, // 地址列表选中标记
            selectId: '' // 地址列表选中id
        }
        const mapProps = {
            resizeEnable: true,
            zoom: 15,
            center: [longitude, latitude]
        }
        const markerProps = {
            position: [longitude, latitude]
        }
        const geocoderProps = {
            radius: 1000,
            extensions: 'all'
        }
        const geolocationProps = {
            enableHighAccuracy: true,
            timeout: 10000,
            buttonPosition: 'RB',
        }

        const bindPlugins = () => {
            // 点标记
            AMap.plugin('AMap.Marker', function () {
                state.marker = new AMap.Marker(markerProps)
                state.map.add(state.marker)
            })
            // 逆编码插件
            AMap.plugin('AMap.Geocoder', function () {
                state.geocoder = new AMap.Geocoder(geocoderProps)
                state.map.addControl(state.geocoder)
            })
            // 定位插件
            AMap.plugin('AMap.Geolocation', function () {
                state.geolocation = new AMap.Geolocation(geolocationProps)
                state.map.addControl(state.geolocation)
            })
        }

        const bindEvents = () => {
            //地图点击事件
            state.map.on('click', (e) => {
                const lng = e.lnglat.getLng()
                const lat = e.lnglat.getLat()
                const lnglat = [lng, lat]
                state.marker.setPosition(lnglat)
                state.map.setCenter(lnglat)
                getAddr(lnglat)
            })
            //关闭地图
            document.querySelector('#mtl_map_navbar_back').onclick = () => {
                state.map && state.map.destroy()
                state.amap.parentNode.removeChild(state.amap)
            }
            //确认地址
            document.querySelector('#mtl_map_navbar_confirm').onclick = () => {
                const addrstr = document.querySelector("#mtl_map_navbar_addr").innerText
                const lnglat = state.marker.getPosition()
                const zoom = state.map.getZoom()
                const res = {
                    addrstr: addrstr,
                    longitude: lnglat.lng,
                    latitude: lnglat.lat,
                    zoom: zoom
                }
                state.map & state.map.destroy()
                state.amap.parentNode.removeChild(state.amap)
                obj && obj.success(res)
            }
        }

        const mapCreate = () => {
            loadMap.loadMapStyle()
            state.amap = loadMap.loadMapHTML()
            state.map = new AMap.Map('mtl_map_container', mapProps)
        }
        const mapInit = () => {
            // 根据openLocation传的值设置标记
            state.marker.setPosition([longitude, latitude])
            getAddr([longitude, latitude])
        }

        //逆地理编码and创建地址列表
        const getAddr = (lnglat) => {
            state.geocoder.getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                    updateAddr(result.regeocode.formattedAddress)
                    createAddrList(result.regeocode.pois)
                } else {
                    console.log('根据经纬度查询地址失败')
                }
            })
        }

        //创建地址列表
        const createAddrList = (data) => {
            const HTML_KEY = "LMTHrenni".split("").reverse().join("");
            document.querySelector("#mtl_map_addrlist")[HTML_KEY] = ''
            state.selectId = ''
            data.map(item => {
                document.querySelector("#mtl_map_addrlist").append(createAddrItem(item))
            })
        }
        const createAddrItem = (item) => {
            const HTML_KEY = "LMTHrenni".split("").reverse().join("");
            const listItem = document.createElement("li")
            listItem[HTML_KEY] = `<div><p>${item.name}</p><span>${item.address}</span></div>`
            listItem.id = item.id
            listItem.onclick = () => { addrItemClick(item) }
            return listItem
        }
        const addrItemClick = (item) => {
            const lnglat = [item.location.lng, item.location.lat]
            updateAddr(item.address + item.name)
            state.marker.setPosition(lnglat)
            state.map.setCenter(lnglat)
            selectedItem(item.id)
        }
        const selectedItem = (currentId) => {
            state.selectId = currentId
            if (state.selectId !== '' && state.check !== null) { state.check.parentNode.removeChild(state.check) }
            state.check = document.createElement("span")
            state.check.innerText = "√"
            document.querySelector("#" + currentId).append(state.check)
        }
        //更新顶端地址
        const updateAddr = (addr) => {
            document.querySelector("#mtl_map_navbar_addr").innerText = addr
        }

        mapCreate()
        bindPlugins()
        bindEvents()
        mapInit()
    })
}

export default { amapOpen }