<template>
  <div style="width: 100%; height: 210px">
    <div v-if="flag" id="map-container" style="height: 210px; width: 100%" />
    <el-empty v-else description="公司地址有误" style="padding: 0" />
  </div>
</template>
<script lang="ts" setup>
import { jsonp } from '@/utils'

const windows: any = window
let flag = ref(true)

// 组件挂载后，渲染对应组件
const initMap = (address: string) => {
  jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
    output: 'jsonp',
    address: address.replace('/', ''),
    key: '3M5BZ-SFCRJ-AHSF7-XRA5Q-Y6NIJ-DXBH4'
  }).then((res: any) => {
    console.log(res, 'addr')
    if (res.status === 0) {
      const { lat, lng } = res.result.location
      const center = new windows.TMap.LatLng(lat, lng) //设置中心点坐标
      //初始化地图
      const map = new windows.TMap.Map('map-container', {
        center
      })

      new windows.TMap.MultiMarker({
        map: map,
        styles: {
          // 点标记样式
          marker: new windows.TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 } // 描点位置
          })
        },
        geometries: [
          // 点标记数据数组
          {
            // 标记位置(纬度，经度，高度)
            position: center,
            id: 'marker'
          }
        ]
      })
    } else flag.value = false
  })
}

defineExpose({
  initMap
})
</script>
<style lang="scss" scoped>
// .common-map-loc {
//   // width: 100%;
//   // height: 200px;
// }
// #map-ccontainer {
//   width: 883px;
//   height: 200px;
// }
</style>
