常见问题

在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>
}

出现902状态码和跨域问题

需申请JS安全密钥，并且 JS安全密钥 设置在 JS API 脚本加载之后，具体参考JS API接入说明。

加载完成后没有显示地图

• 原因1：未设置Map的样式（示例中的style参数）。
• 原因2：地图容器未设置宽高（示例中的container）。

正确示例 ✅

<div id="container" style="width:100vw; height:100vh"></div>

<script type="text/javascript">
  window._DiMapSecurityConfig = {
    securityJsCode: "你申请的安全密钥",
  };
</script>

<script src="https://lbs.xiaojukeji.com/api/v2/static/loader.js"></script>

<script type="text/javascript">
  //地图初始化应该在地图容器div已经添加到DOM树之后
  window.DiMapLoader.load({
		key: "你申请的key"
	}).then(({ DiMap }) => {
		new DiMap.Map({
			container: "container",
			style: "dimap://styles/normal"
		})
	})
</script>

加载JS地图时，微信小程序中拿不到loader.js

微信小程序原生只支持腾讯地图，我们的JS API 是支持web和h5的，需要在web-view中引用loader。

其它注意事项：

• 需要在配置里开启不校验域名才能在开发者工具中请求。
• 如果小程序要上线需要在微信的后台管理中配置域名白名单，否则线上也无法访问到。

地图显示有空缺

QPS限流可能会导致地图加载不完整，需找对接的商务同学提升QPS。