常见问题

在Vue或React中使用地图

避免响应式地图实例（Vue）

错误示例 ❌

<template>
  <div id="container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// ❌ 请不要直接响应式地图实例对象，避免增加不必要的监听
// ❌ 同理，Vue@2.x中使用data定义的map也会有相同问题
const map = ref(null)

onMounted(() => {
  window.DiMapLoader.load({
    key: '你申请的key'
  }).then(({ DiMap }) => {
    const mapIns = new DiMap.Map({
      container: "container",
      style: "dimap://styles/normal"
    })
    map.value = mapIns
  })
})
</script>

正确示例 ✅

<template>
  <div id="container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// ✅ 通过函数返回地图实例对象，而非响应式对象本身
const map = ref(() => null)

onMounted(() => {
  window.DiMapLoader.load({
    appKey: '你申请的key'
  }).then(({ DiMap }) => {
    const mapIns = new DiMap.Map({
      container: "container",
      style: "dimap://styles/normal"
    })
    map.value = () => mapIns
  })
})
</script>

重复加载地图(Vue & React)

重复加载地图时，避免重复加载资源，请及时销毁地图实例

错误示例（Vue）❌

<template>
  <div id="container"></div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const map = ref(() => null)
const someState = ref(false)

watch(someState, () => {
  // ❌ 通过watch监听状态变化，重复加载地图资源、重复初始化地图实例
  initMap()
})

// ❌ 组件卸载时，无销毁地图实例逻辑

const initMap = () => {
  window.DiMapLoader.load({
    appKey: '你申请的key'
  }).then(({ DiMap }) => {
    const mapIns = new DiMap.Map({
      container: "container",
      style: "dimap://styles/normal"
    })
    map.value = () => mapIns
  })
}
</script>

错误示例（React）❌

import React, { useEffect, useState } from 'react'

function MapComponent() {
  const [map, setMap] = useState(null)
  const [someState, setSomeState] = useState(false)

  useEffect(() => {
    // ❌ 通过useEffect监听状态变化，重复加载地图资源、重复初始化地图实例
    initMap()
  }, [someState])
  
  // ❌ 组件卸载时，无销毁地图实例逻辑

  const initMap = () => {
    window.DiMapLoader.load({
      appKey: '你申请的key'
    }).then(({ DiMap }) => {
      const mapIns = new DiMap.Map({
        container: "container",
        style: "dimap://styles/normal"
      })
      setMap(mapIns)
    })
  }

  return <div id="container"></div>
}

正确示例（Vue）✅

<template>
  <div id="container"></div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeDestory } from 'vue'

const map = ref(() => null)

// ✅ 缓存地图资源状态
let local_DiMap

watch(someState, (newVal) => {
  // ✅ 重复初始化地图实例之前，释放之前的地图实例
  map.value()?.remove()
  initMap()
})

// ✅ 组件卸载时销毁地图
onBeforeDestory(() => {
  map.value()?.remove()
})

const initMap = () => {
  // ✅ 利用缓存的地图资源状态，避免重复加载地图资源
  if (local_DiMap) {
    map.value = () => newMapInstance(local_DiMap)
    return
  }
  window.DiMapLoader.load({
    appKey: '你申请的key'
  }).then(({ DiMap }) => {
    // ✅ 缓存地图资源状态
    local_DiMap = DiMap
    map.value = () => newMapInstance(DiMap)
  })
}

const newMapInstance = (DiMap) => {
  return new DiMap.Map({
    container: "container",
    style: "dimap://styles/normal"
  })
}
</script>

正确示例（React） ✅

import React, { useEffect, useState, useMemo } from 'react'

function MapComponent() {
  const [map, setMap] = useState(null)
  const [someState, setSomeState] = useState(false)

  // ✅ 缓存地图资源状态
  const [local_DiMap, setLocalDiMap] = useState(null)

  useEffect(() => {
    // ✅ 重复初始化地图实例之前，释放之前的地图实例
    map?.remove()
    initMap()
    // ✅ 组件卸载时销毁地图
    return () => {
      map?.remove()
    }
  }, [someState])

  const initMap = () => {
    // ✅ 利用保存的地图资源状态，避免重复加载地图资源
    if (local_DiMap) {
      setMap(newMapInstance(local_DiMap))
      return
    }
    window.DiMapLoader.load({
      appKey: '你申请的key'
    }).then(({ DiMap }) => {
      // ✅ 保存地图资源状态
      setLocalDiMap(DiMap)
      setMap(newMapInstance(DiMap))
    })
  }

  const newMapInstance = (DiMap, style) => {
    return new DiMap.Map({
      container: "container",
      style: "dimap://styles/normal"
    })
  }

  return <div id="container"></div>
}