关于高德地图的Invalid Object: Pixel(NaN, NaN)

 以下 Pixel 和 LngLat 的值均不为空,但是控制台偏偏报 Pixel(NaN, NaN) 和 LngLat (NaN, NaN)
        var endMarker = new AMap.Marker({
          position: new AMap.LngLat(this.center[i].lng,this.center[i].lat),
          icon: myIcon,
          offset: new AMap.Pixel(-13, -30)
        });
        // i 替换成设备数量---------------------------------------------------
        endMarker.setLabel({
          offset: new AMap.Pixel(-3.5, -7),  //设置文本标注偏移量
          content: this.center[i].name, //设置文本标注内容
          direction: 'center' //设置文本标注方位
        });

地图样式: 点击切换在 3D和模块化之间变化,使用的是v-show进行判断,

 错误: 当页面进来后首先显示的不是3D模式而是模块化地图,控制台就报错,并且切换成3D地图的时候,一片空白.

解决: 不在mounted()周期函数中初始化地图,在点击切换时才初始化地图

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端高德地图开发可以通过高德地图开放平台提供的API来实现。以下是一个简单的前端高德地图开发教程: 1. 注册高德地图开放平台账号,并创建应用,获取API Key。 2. 在HTML文件中引入高德地图API的JS文件,如下所示: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 3. 在JS文件中创建地图实例,并设置地图中心点和缩放级别,如下所示: ```javascript var map = new AMap.Map('container', { center: [116.397428, 39.90923], zoom: 13 }); ``` 其中,'container'为地图容器的ID,[116.397428, 39.90923]为地图中心点的经纬度,zoom为缩放级别。 4. 在JS文件中添加地图控件,如下所示: ```javascript // 添加比例尺控件 map.addControl(new AMap.Scale()); // 添加缩放控件 map.addControl(new AMap.Zoom()); ``` 5. 在JS文件中添加标记点,如下所示: ```javascript var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '北京市' }); marker.setMap(map); ``` 其中,[116.397428, 39.90923]为标记点的经纬度,title为标记点的标题。 6. 在JS文件中添加信息窗口,如下所示: ```javascript var infoWindow = new AMap.InfoWindow({ content: '<h3>北京市</h3><p>中国的首都</p>', offset: new AMap.Pixel(0, -30) }); infoWindow.open(map, marker); ``` 其中,content为信息窗口的内容,offset为信息窗口的偏移量。 以上是一个简单的前端高德地图开发教程,可以根据实际需求进行详细的开发

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值