vue调用高德可能会报错Error: Invalid Object: Pixel(NaN, NaN)

已于 2024-04-19 18:39:03 修改
阅读量411 收藏
点赞数 4
文章标签： vue.js javascript ecmascript
于 2024-04-19 18:18:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53212137/article/details/137973752
版权
文章讲述了在Vue项目中集成高德地图遇到的问题，主要是因为地图容器样式未设置导致数据错误。通过添加正确的CSS样式并确保数据源正确，作者成功解决了这个问题并分享了解决方案。
摘要由CSDN通过智能技术生成

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

叙述如下：

这种情况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": "Feature",
                "properties": {
                    "cityName": "韶关市",
                    "ratio": 0,
                    "rank": 96
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        113.58052,
                        24.760098
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "乐山市",
                    "ratio": 0,
                    "rank": 97
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        103.75082,
                        29.58099
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "阜阳市",
                    "ratio": 0,
                    "rank": 98
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        115.82654,
                        32.889915
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "荆门市",
                    "ratio": 0,
                    "rank": 99
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        112.209816,
                        30.997377
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "哈尔滨市",
                    "ratio": 0,
                    "rank": 100
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        126.61314,
                        45.746685
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "达州市",
                    "ratio": 0,
                    "rank": 101
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        107.493,
                        31.205515
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "自贡市",
                    "ratio": 0,
                    "rank": 102
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        104.777824,
                        29.34555
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "陇南市",
                    "ratio": 0,
                    "rank": 103
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        104.93356,
                        33.388184
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "南充市",
                    "ratio": 0,
                    "rank": 104
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        106.1188,
                        30.800997
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "cityName": "恩施土家族苗族自治州",
                    "ratio": 0,
                    "rank": 105
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        109.48512,
                        30.298103
                    ]
                }
            }
        ]
        
    };

    var breath = new Loca.ScatterLayer({
        zIndex: 121,
    });
    breath.setSource(new Loca.GeoJSONSource({
        data: top10,
    }));
    breath.setStyle({
        unit: 'px',
        size: [50, 50],
        texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
        animate: true,
        duration: 1000,
    });
    console.log(breath)
    loca.add(breath);
    loca.animate.start();

    var dat = new Loca.Dat();
    dat.addLayer(breath, '呼吸点');
    dat.addLayer(scatter, '蓝色气泡');
})
}

然后vue页面代码；这个就是一个简单的demo

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

<script setup>
import { ref, reactive } from 'vue'
import { inithotmap } from '@/services/Heatmap';
import { onMounted, onUnmounted } from "vue";
let map = null;
onMounted(()=>{
  inithotmap();
})
onUnmounted(() => {
map?.destroy();
});

</script>

<style scoped>
#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 */
}
</style>

上面是组件式的写法，然后响应化LOCA这些实例好像不太好然后会导致实例还没加载完你可能用的时候就会报错，下面附上高德工作人员给的选项式写的代码，感觉维护度高一些，很不错，希望官方文档把之前的JavaScript也给与vue的文档这样会好些

<template>
  <div class="home_div">
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "Mapview",
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "312e6012a76e8f5690b25cdc0ca025a6", 
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"], 
        Loca: {
          version: "2.0.0" 
        }
      })
        .then(AMap => {
          var map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 11,
            center: [113.664206, 34.737714],
            mapStyle: "amap://styles/light"
          });
          console.log(map);
         
          var 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: "Feature",
                properties: {
                  cityName: "韶关市",
                  ratio: 0,
                  rank: 96
                },
                geometry: {
                  type: "Point",
                  coordinates: [113.58052, 24.760098]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "乐山市",
                  ratio: 0,
                  rank: 97
                },
                geometry: {
                  type: "Point",
                  coordinates: [103.75082, 29.58099]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "阜阳市",
                  ratio: 0,
                  rank: 98
                },
                geometry: {
                  type: "Point",
                  coordinates: [115.82654, 32.889915]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "荆门市",
                  ratio: 0,
                  rank: 99
                },
                geometry: {
                  type: "Point",
                  coordinates: [112.209816, 30.997377]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "哈尔滨市",
                  ratio: 0,
                  rank: 100
                },
                geometry: {
                  type: "Point",
                  coordinates: [126.61314, 45.746685]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "达州市",
                  ratio: 0,
                  rank: 101
                },
                geometry: {
                  type: "Point",
                  coordinates: [107.493, 31.205515]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "自贡市",
                  ratio: 0,
                  rank: 102
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.777824, 29.34555]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "陇南市",
                  ratio: 0,
                  rank: 103
                },
                geometry: {
                  type: "Point",
                  coordinates: [104.93356, 33.388184]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "南充市",
                  ratio: 0,
                  rank: 104
                },
                geometry: {
                  type: "Point",
                  coordinates: [106.1188, 30.800997]
                }
              },
              {
                type: "Feature",
                properties: {
                  cityName: "恩施土家族苗族自治州",
                  ratio: 0,
                  rank: 105
                },
                geometry: {
                  type: "Point",
                  coordinates: [109.48512, 30.298103]
                }
              }
            ]
          };

          var breath = new Loca.ScatterLayer({
            zIndex: 121
          });
          breath.setSource(
            new Loca.GeoJSONSource({
              data: top10
            })
          );
          breath.setStyle({
            unit: "px",
            size: [50, 50],
            texture:
              "https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",
            animate: true,
            duration: 1000
          });
          console.log(breath);
          loca.add(breath);
          loca.animate.start();

          var dat = new Loca.Dat();
          dat.addLayer(breath, "呼吸点");
          dat.addLayer(scatter, "蓝色气泡");

         
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>
<style  scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}


</style>

Longing.
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
高德地图Uncaught Invalid Object: Pixel(NaN, NaN)
weixin_42786237的博客
07-21 8401
高德地图Uncaught Invalid Object: Pixel(NaN, NaN) var infowinList:[{ name:'台子乡', longitude:101.972699, latitude:36.859000 }, { name:'崖头村', longitude:101.862699, lati
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目高德地图出现错误Uncaught Error: Invalid Object: Pixel(NaN, NaN)
热门推荐
qq_41108396的博客
07-30 1万+
vue项目引入高德地图出现的错误 在首页引入高德地图组件后，跳转其他页面再回到首页时。控制台出现了奇奇怪怪的错误：Uncaught Error: Invalid Object: Pixel(NaN, NaN) 而且这个错误非常任性，时而出现，时而不出现。 我尝试了好几种方式，最后终于解决了但是依然不知道原因是啥。 第一：由于我最刚开始写的时候，是先调取接口接收数据，再初始化地图，把数据传给地图，这样一个同步的过程。这样做的一个非常大的缺点就是：打开页面之后一片空白，至少要5秒钟才出现内容，非常的客户不友好。
vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件
最新发布
lzfengquan的博客
06-20 689
vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件 。 点击具体散点获取展示信息弹框，并为其添加点击事件。划过散点的时候出现每个三点位置的数据提示。
高德地图 Uncaught Error: Invalid Object: Pixel(NaN, NaN)
weixin_72574747的博客
03-30 423
把3D改成2D就行了。
高德地图API-vue2/3，问题：Invalid Object: Pixel(NaN, NaN)
小白正在变黑
12-20 1146
由于该组件是封装的高德jsAPI，有些接受值的判断没那么全面，导致了这个报错。换句话说就是没判断到传空数组的情况，但是你要是传null，就会被触发一些内部的判断逻辑。在使用<el-amap />组件式开发中，当我们使用涉及到点位的position点位（动态绑定）的时候，当我们初始赋值为空数组的时候，应该会报这个错。@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。
关于高德地图的Invalid Object: Pixel(NaN, NaN)
weixin_37601321的博客
09-05 5072
关于高德地图的Invalid Object: Pixel(NaN, NaN)
vue 引入高德地图 amap 报错：jsapi 不生效 INVALID_USER_SCODE
且听风吟的博客
03-31 1840
vue 引入高德地图 amap 报错：jsapi 不生效 INVALID_USER_SCODE
vue 使用高德地图vue-amap组件过程解析
12-10
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js ...
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
今天做一个 VUE 的项目，在引入第三方依赖的 JS 文件时，遇到了一个问题： 控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我...
解决vue打包后刷新页面报错：Unexpected token <
10-16
主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
解决vue net :ERR_CONNECTION_REFUSED报错问题
10-14
在开发Vue应用时，开发者可能会遇到“net :ERR_CONNECTION_REFUSED”错误，这通常表示浏览器无法连接到指定的服务器。这个错误可能出现在多种场景下，比如本地开发环境配置不正确或者网络环境变化等。本文将重点讲解...
vue-amap 使用时控制台报错 Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)
hudabao888666的博客
08-03 1280
Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)
【高德地图】Uncatch Invaild object:pixel(NaN,Nan)或者Uncatch （in promise） invaild object:LngLat(NaN,Nan)：
SunPeng的博客
07-25 4973
【高德地图】Uncatch Invaild object:pixel(NaN,Nan)或者Uncatch （in promise） invaild object:LngLat(NaN,Nan)：
vue项目引入高德地图报错：Map container div not exist
white_777的博客
12-12 4026
Map container div not exist
vue中出现报错Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"
qq_45664442的博客
03-06 1万+
原因：把导入的js当做函数传进来，当方法调用了。 解决办法： import {getDetailData }from “…/…/components/network/detail”;
高德地图Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)
qq_45530512的博客
03-24 2424
经纬度为空[]或unll或undefined。经纬度为空的数据排除掉。
高德地图 uncaught exception: Invalid Object: Pixel(NaN, NaN)
陈正的博客
05-30 7934
uncaught exception: Invalid Object: Pixel(NaN, NaN) 在外网环境下，高德地图报错，放大和缩小地图都报错，而在切换百度地图下正常 原因：数据问题，地图的坐标为空时，百度地图有做处理，而高德地图就会报错 nvl(longitude_point,0),nvl(latitude_point,0) ...
vue运行electron报错error:03000086:digital envelope routines::initialization error
09-01
您在运行Vue与Electron结合的项目时遇到了错误码为"error:03000086:digital envelope routines::initialization error"的报错。这个报错通常是由于openssl库初始化失败导致的。以下是一些可能的解决方法： 1. 更新Node.js版本：确保您使用的是最新版本的Node.js，因为较旧的版本可能存在与Electron兼容性相关的问题。 2. 清理npm缓存：运行以下命令清理npm缓存： ``` npm cache clean --force ``` 3. 更新Electron依赖：在您的项目根目录下运行以下命令，更新Electron的依赖： ``` npm install electron@latest --save-dev ``` 4. 更新OpenSSL库：尝试重新安装或更新您的OpenSSL库，确保它是最新版本。具体步骤可能因操作系统而异，请根据您的操作系统进行相应的操作。 如果上述方法都无法解决问题，您可以提供更多关于您的项目配置和错误堆栈的信息，以便我能够提供更具体的帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值