vue调用高德可能会报错Error: Invalid Object: Pixel(NaN, NaN)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53212137/article/details/137973752

文章讲述了在Vue项目中集成高德地图遇到的问题，主要是因为地图容器样式未设置导致数据错误。通过添加正确的CSS样式并确保数据源正确，作者成功解决了这个问题并分享了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感谢高德小哥哥的在线解答服务太棒了，虽然是已经解决了问题然后才看见小哥哥回复了，但是还是很棒哈！！！

叙述如下：

这种情况Gpt说的是可能数据不对，但是我用的是高德官方的数据直接拿过来弄的，而且我每个数据都输出打印了。数据是没有问题的然后就陷入死循环：

但是昂，关键的时刻来了：

<template>

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

</template>

这个代码在写地图div容器的时候我没有给这个div设置style

这里是空的，然后就会报上面那个错误，给了下面这样的之后完美显示出来；

#container {

width: 100%;

height: 950px;

position: fixed;

top: 0;

left: 0;

z-index: 1; /* Ensure map is above normal content but below fixed positioned button */

}

这就完美解决报错。所以在用高德地图的时候这个数据报错，如果直接用的人家的代码基础上修改的话，数据引用的一般都是在线数据所以数据可能不会出错。反正注意好吧。这个报错可能是你地图容器什么的没有弄好。

看csdn上没有vue写这个高德的这个我就把这个样例代码也给了：

js文件名字Heatmap.js

import AMapLoader from '@amap/amap-jsapi-loader';
import {ref} from "vue";
let map = ref(null);
let loca = ref(null);
export function inithotmap(){
    window._AMapSecurityConfig = {
        securityJsCode:'7331a8d50a64ee1212f2ca1c90d3b8de',//安全密钥
    }
    AMapLoader.load({
        key: "312e6012a76e8f5690b25cdc0ca025a6",
        version: "2.0",
        Loca:{
            version: "2.0.0",
        }
      }).then(AMap =>{
        map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 11,
            center: [113.664206,34.737714],
            mapStyle: "amap://styles/light"
          });
          console.log(Loca)
        loca = new Loca.Container({
            map:map,
        });

        var geo = new Loca.GeoJSONSource({
            // data: [],
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/china_traffic_event.json',
        });

        var scatter = window.ll = new Loca.ScatterLayer({
            // loca,
            zIndex: 10,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
        });
        scatter.setSource(geo, {
            unit: 'px',
            size: [20, 20],
            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/blue.png',
            borderWidth: 0,
        });
        console.log(scatter)
        loca.add(scatter);


        // 呼吸
      var top10 = {
        type: 'FeatureCollection',
        features: [
            {
                "type": "Featur