我的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)
这是我遇到的错误，我尝试了很多方法，但仍然遇到同样的问题，有人能帮我解决这个问题吗？我不明白为什么会出现此错误。请任何人帮助我找出问题的解决方案。
最佳答案
再次检查html，
<div id="mapName" class="map" /></div>
你应该在 class="map"之后移除/
错误发生是因为谷歌地图找不到id
关于javascript - 谷歌地图未捕获类型错误 : Cannot read property 'firstChild' of null in vue js html?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50022400/