VUE中初始化高德地图时机问题

电玩女神 2023-07-03 08:13 147阅读 0赞

created中初始化地图显示一片黄。。。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

mounted中初始化地图正常显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70 1][]

<style>
    	#vueForm, #container{
    		width:500px;
    		height:500px;
    	}
    </style>
    
    <div id="vueForm">
    
    	<div id="container"></div>
        
    </div>
    
    <script>
        new Vue({
            el: '#vueForm',
            data: function() {
                return {
                    
                };
            },
            methods: {
                initMap: function() {
                    var longitude = '';
                    var latitude = '';
                    if(longitude == ''){
                        longitude = 116.397428;
                    }
                    if(latitude == ''){
                        latitude = 39.90923;
                    }
                    var center = [longitude, latitude];
                    var map = new AMap.Map('container', {
                        resizeEnable: true,
                        zoom: 16,
                        scrollWheel: false,
                        center:center
                    })
                }
            },
            created: function() {
                // this.initMap();
            },
            mounted: function() {
                this.initMap();
            }
        });
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200204204206119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200204204328127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE中初始化高德地图时机问题

created中初始化地图显示一片黄。。。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

电玩女神/ 2023年07月03日 08:13/ 0 赞/ 148 阅读

相关 Vue+高德地图

基于VUE的高德地图展示及标点功能描述：在vue框架（vue-cli3）中使用高德地图，展示地图，规划行政区域，标点。 ![在这里插入图片描述][waterm

今天药忘吃喽~/ 2023年02月09日 13:29/ 0 赞/ 16 阅读

相关高德地图定位问题

记录下使用高德、百度地图遇到的一些问题 1、从定位中拿城市名，一般情况下高德地图返回的字段名是city，但是直辖市返回的是字段province const addr

左手的ㄟ右手/ 2022年12月24日 13:51/ 0 赞/ 308 阅读

相关 vue3高德地图

\在src下创建Amap.d.ts文件 declare namespace AMap { /此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回，包含

系统管理员/ 2022年12月09日 11:51/ 0 赞/ 365 阅读

相关 vue引入原生高德地图

由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 [https://elemefe.githu

野性酷女/ 2022年11月05日 11:50/ 0 赞/ 321 阅读

相关【vue】vue集成高德地图

> `前言` vue2.x集成高德地图参考这篇文章：[https://blog.csdn.net/athwang/article/details/108236551][htt

朱雀/ 2022年10月07日 05:56/ 0 赞/ 369 阅读

相关 vue 调用高德地图

一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https ://ele mefe.gi thub.io/vue-a map/\/ 这个就不细说了，按

Myth丶恋晨/ 2022年06月16日 03:25/ 0 赞/ 351 阅读

相关在vue中使用高德地图

问题来源项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图开始在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件

ゞ浴缸里的玫瑰/ 2021年09月20日 12:06/ 0 赞/ 493 阅读

相关 vue中使用高德地图

html引入高德API： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4

た入场券/ 2021年07月26日 12:31/ 0 赞/ 673 阅读

相关 Vue - 加载一个高德地图

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

红太狼/ 2021年07月25日 21:53/ 0 赞/ 608 阅读