时间戳

首页 > 解决方案 > Google Map Uncaught TypeError：无法读取 vue js html 中 null 的属性“firstChild”？

javascript - Google Map Uncaught TypeError：无法读取 vue js html 中 null 的属性“firstChild”？

问题描述

我的 json 数据是

{"status":true,"data":[{"_id":"5add95c7decc9b1ca03c98ce","source":112479,"info":{"subject":"Tree cutting ","location":{"geo":[76.8228752,9.5274017],"place":"Kottayam "}},"createdAt":"2018-04-23T08:13:59.066Z","accepted":false}]}

我的 vue js 代码是

addDiv = new Vue({
el: "#addDiv",
  data: {
    id : '<%= id %>',
    data: [],
  },
  mounted: function() {
 var vm = this;
 data = {};
 data['refId'] = this.id;
         $.ajax({
            url: "http://localhost:3000/record/one/",
            data: data,
            type: "POST",
            dataType: 'json',
            success: function(e) {
            if (e.status == 1) { 
             vm.data = e.data;
             console.log(vm.data);
             var options = { 
 zoom: 16, 
 center: new google.maps.LatLng(e.data[0].info.location.geo[1], e.data[0].info.location.geo[0]), // Centered 
 mapTypeId: google.maps.MapTypeId.ROADMAP, 
 mapTypeControl: false 
 }; 

 // Init map 
var map = new google.maps.Map(document.getElementById('mapName'), options); 
 //use code 
var i=0;


 // Init markers 
 var marker = new google.maps.Marker({ 
 position: new google.maps.LatLng(e.data[0].info.location.geo[1], e.data[0].info.location.geo[0]), 
 map: map, 
 title: 'Click Me ' + i, 
 }); 

 // Process multiple info windows 
 (function(marker, i) { 
 // add click event 
 google.maps.event.addListener(marker, 'click', function() { 
 infowindow = new google.maps.InfoWindow({ 

 }); 
 infowindow.open(map, marker); 
 }); 
 })(marker, i);
            }

            },
        });
},
})

这是我的html代码

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748">
</script>
<div id="addDiv">
 <div id="mapName" class="map" /></div>
</div>

我收到错误

Uncaught TypeError: Cannot read property 'firstChild' of null
    at Object._.Sf (js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748:83)
    at new Wf (js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748:84)
    at Object.success (7902:464)
    at i (jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
    at A (jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

这是我遇到的错误，我尝试了很多方法，但仍然得到相同的结果，任何人都可以帮我解决问题。我不明白为什么会出现这个错误。请任何人帮助我解决问题的解决方案。

标签： javascriptjquerygoogle-mapsvue.jsvue-component

解决方案

再次检查html，

<div id="mapName" class="map" /></div>

您应该在 class="map" 之后删除 /

发生错误是因为谷歌地图找不到 id

推荐阅读