关于App端和PC端部分地图函数的

1.App端地图初始化以及获取自身定位

1.1 地图初始化

<template>
  <div class="page_container">
    <!-- 地图容器container -->
    <div id="container"></div>
  </div>
</template>

这里需要给地图容器设置宽高，不然会导致地图不显示

<style lang="less" scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>

常用的变量和函数

地图上坐标点标识marker: ''

纬度my_lat: ''

经度my_lng: ''

getLocation>>获取当前自身定位函数

js_get_once_location>>手机获取一次系统经纬度并返回给H5（单次定位功能）

window.NativeGetLocationCallbaclk>>获取当前自身定位回调函数,函数返回给H5的是json字符串格式的数据，其格式为：{"longreg":xxxx,"latreg":xxxx,"code":xxx}

handleMark>>根据上面回调函数返回的经纬度信息，添加地图标识点

handlePosition>>地图定位,规划路线,其中AMap.Driving为高德路线规划所需插件

handleOpenArea>>打开手机上高德地图，并根据起点、终点经纬度，自动添入起点终点；其中，js_open_map_app为JS交互--打开三方地图APP

locationType>>参考H5交互文档https://fanneng.yuque.com/mgs44m/cumzgq/blsumr#UVcr3

//第二个入参为json字符串格式：(三种type类型，选择一种)
{"locationType":"WGS-84/BD-09/GCJ-02"}
//locationType: 
WGS-84世界标准坐标（应用场合：国际地图提供商，谷歌国际地图）、
BD-09百度坐标系（应用场合：百度地图）、
GCJ-02中国国测局(火星坐标)（应用场合：高德地图，谷歌地图，腾讯地图，阿里云地图）
此函数的返回给H5的是json字符串格式的数据，
其格式为：{"longreg":xxxx,"latreg":xxxx,"code":xxx}
其中： longreg：坐标的经度,double
 latreg：坐标的维度,double
 code：获取坐标是否成功 成功：200；失败：500, int 
 处理的时候注意与iOS区分，iOS三个值全为string类型。
 后续有业务线需要接此功能时先联系移动端，封装一个有统一入参和出参格式的新交互方法，方便业务线调用。
H5端应先通过code判断获取坐标是否成功，成功则获取经纬度数据
//此函数有回调方法为：NativeGetLocationCallbaclk(json),H5端需要在当前类添加此方法获取到单次定位的回调字符串。
jsBridge.js_get_once_location(JSON.stringfy({"locationType":"WGS-84"})

// 注1：data里面主要定义4个变量，分别是地图对象容器map，坐标点maker，纬度my_lat，经度my_lng
const state = reactive({
    map: '',
    marker: '',
    my_lat: '',
    my_lng: '','
})
// 注2：地图初始化函数
  const initMap = () => {
    let AMap = window.AMap
    state.map = new AMap.Map('container', {
      resizeEnable: true,
    })
  }
//  注3：获取自身当前位置（经纬度）getLocation --获取当前自身定位函数
    const getLocation = () => {
        let u = navigator.userAgent
        //判断是否安卓
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
        // 判断是否IOS
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isAndroid) {
            window?.control?.callHandler?.(
                'js_get_once_location',
                JSON.stringify({ locationType: 'GCJ-02' })
            )
        } else if (isIOS) {
            window.webkit.messageHandlers.js_get_once_location.postMessage({
                locationType: 'GCJ-02',
            })
        }
    }
    // 赋值state.my_lat---state.my_lng--- 获取当前自身定位回调函数
    window.NativeGetLocationCallbaclk = function (json) {
        const targetData = JSON.parse(json)
        if (targetData.code === 200 || targetData.code === '200') {
            state.my_lat = targetData.latreg
            state.my_lng = targetData.longreg
            // console.log(state, '位置函数回调执行')
            handleMark()
        } else {
            commit(SET_MESSAGE_STATE, { switch: true, info: '定位失败', time: '' })
        }
    }
   // 注4：handleMark --->根据已获取的经纬度添加定位点
    const handleMark = () => {
        if (state.marker) {
            state.map.remove(state.marker)
        }
        state.map.setZoomAndCenter(14, [state.my_lng, state.my_lat])
        let AMap = window.AMap
        let position = new AMap.LngLat(state.my_lng, state.my_lat)
        state.marker = new AMap.Marker({
            position: position, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        })
        state.map.add(state.marker)
    }

其他函数1---路线规划函数handlePosition 

    //地图定位  规划路线
    const handlePosition = () => {
        let AMap = window.AMap
        let map = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 20,
        })
  // AMap.Driving为高德路线规划所需插件
        AMap.plugin('AMap.Driving', function () {
            let driving = new AMap.Driving({
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME,
                map: map,
            })
             // startLngLat起点经纬度  ---- endLngLat 经纬度
            let startLngLat = [state.my_lng, state.my_lat]
            let endLngLat = [state.company_longitude, state.company_latitude]

            driving.search(startLngLat, endLngLat, function () {
                // 未出错时，result即是对应的路线规划方案
            })
        })
    }

其他函数2---->handleOpenArea点击打开手机高德地图

    // 打开导航---handleOpenArea 
    const handleOpenArea = () => {
        let u = navigator.userAgent
        //判断是否安卓
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
        // 判断是否IOS
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      // js_open_map_app：调用高德地图
        if (isAndroid) {
            window?.control?.callHandler(
                'js_open_map_app',
                JSON.stringify({
                    latitude: state.company_latitude,
                    longitude: state.company_longitude,
                    address: state.company_address,
                })
            )
        } else if (isIOS) {
            window.webkit.messageHandlers.js_open_map_app.postMessage(
                JSON.stringify({
                    latitude: state.company_latitude,
                    longitude: state.company_longitude,
                    address: state.company_address,
                })
            )
        }
    }