javascript 在 Google Places API 上获取“未捕获的类型错误：无法读取 null 的属性‘值’”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10158847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting"Uncaught TypeError: Cannot read property 'value' of null" on Google Places API
提问by Erik
I'm currently upgrading my website with Google Place API and I have one more problem away until I'm getting it to work and I don't understand why I'm getting this error message: Uncaught TypeError: Cannot read property 'value' of null. I have readed the whole Places Libraryand even "scanned" the whole example filebut my code is the exactly the same as theirs.
我目前正在使用 Google Place API 升级我的网站，但在让它开始工作之前我还有一个问题，我不明白为什么我会收到以下错误消息：Uncaught TypeError: Cannot read property 'value' of null. 我已经阅读了整个Places Library，甚至“扫描”了整个示例文件，但我的代码与他们的完全相同。
Here's my code:
这是我的代码：
var geocoder;
var map;
var myplace = '<?php echo str_replace(" ", "-", utf8_encode($_COOKIE["wrn-myplace"])); ?>';
var myplace_clean = '<?php echo $_COOKIE["wrn-myplace"]; ?>';
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : myplace_clean}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var myplace_center = results[0].geometry.location;
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var myplaceControlDiv = document.createElement('div');
var myplaceControl = new MyPlaceControl(myplaceControlDiv, map, myplace_center);
myplaceControlDiv.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myplaceControlDiv);
} else {
alert('Funktionen "geocoder" kunde inte anv?ndas p? grund av f?ljande fel: ' + status);
}
});
var mapOptions = {
streetViewControl: false,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('weather-map'), mapOptions
);
var input = document.getElementById('google-search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if(place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
var cloudControlDiv = document.createElement('div');
var cloudControl = new CloudControl(cloudControlDiv, map);
cloudControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(cloudControlDiv);
var fullscreenControlDiv = document.createElement('div');
var fullscreenControl = new FullscreenControl(fullscreenControlDiv, map);
fullscreenControlDiv.index = 3;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullscreenControlDiv);
var boxText = document.createElement("div");
boxText.style.cssText = 'background-color: #000000; border: 1px solid #ffffff; color: #eaeaea; font-family: Arial; font-size: 11px; padding: 5px 10px 5px 10px;';
boxText.innerHTML = 'Du ?r h?r';
var myPopup = {
content: boxText,
disableAutoPan: false,
maxWidth: 300,
pixelOffset: new google.maps.Size(-100, -100),
zIndex: null,
boxStyle: {
opacity: 0.80,
width: '200px'
},
closeBoxMargin: '3px',
closeBoxURL: 'http://p.yusukekamiyamane.com/icons/search/fugue/icons/cross-octagon-frame.png',
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
enableEventPropagation: true
};
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);
map.setZoom(10);
$('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
show_positionis called in the initializefunction and this is the "description" for my error message:
show_position在initialize函数中调用，这是我的错误消息的“描述”：
kK
tK.(anonymous function).dl
(anonymous function)
(anonymous function)%7Bmain,places,weather%7D.js:9
bf.(anonymous function).Hc.c%7Bmain,places,weather%7D.js:24
O%7Bmain,places,weather%7D.js:9
df%7Bmain,places,weather%7D.js:24
hf%7Bmain,places,weather%7D.js:24
(anonymous function)
ef.controls
(anonymous function)%7Bmain,places,weather%7D.js:24
b%7Bmain,places,weather%7D.js:10
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
O%7Bmain,places,weather%7D.js:9
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
af.(anonymous function).ke%7Bmain,places,weather%7D.js:23
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
ff%7Bmain,places,weather%7D.js:24
(anonymous function)
I'm calling for the JS file from Google like this:
我正在像这样从 Google 调用 JS 文件：
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={my API key}&sensor=false&libraries=weather,places"></script>
How can I fix my small problem?
我该如何解决我的小问题？
Thanks in advance!
提前致谢！
回答by Erik
The problem is now solved. Apparently it was mandatory to have the text field within the DIV tags.
现在问题解决了。显然，必须在 DIV 标签中包含文本字段。
回答by Dan Dascalescu
Got the same error. Turned out the element whose id Places was expected, didn't exist. Check for mistyped element ids, or copy/pasted code.
得到了同样的错误。原来预期 id Places 的元素不存在。检查输入错误的元素 ID，或复制/粘贴代码。
回答by will
Got same error. I had turned out to be because I had was calling initAutocomplete for the same address fields, twice. Once I removed the redundant request, it worked without error.
得到同样的错误。我原来是因为我曾两次为相同的地址字段调用 initAutocomplete。一旦我删除了多余的请求，它就可以正常工作了。
