5

我目前正在使用 Google Place API 升级我的网站，在我让它工作之前我还有一个问题，我不明白为什么我会收到此错误消息：Uncaught TypeError: Cannot read property 'value' of null. 我已经阅读了整个Places Library，甚至“扫描”了整个示例文件，但我的代码与他们的完全相同。

这是我的代码：

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_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)

我正在从谷歌调用 JS 文件，如下所示：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={my API key}&sensor=false&libraries=weather,places"></script>

我该如何解决我的小问题？

提前致谢！

4

3 回答 3

8

现在问题已经解决了。显然，在 DIV 标记中包含文本字段是强制性的。

于 2012-04-16T02:39:54.933 回答
5

得到同样的错误。原来预期 id Places 的元素不存在。检查输入错误的元素 ID，或复制/粘贴代码。

于 2014-10-23T07:58:10.000 回答
-1

得到同样的错误。原来是因为我为相同的地址字段调用了两次 initAutocomplete。一旦我删除了多余的请求，它就可以正常工作。

于 2020-04-02T21:00:07.547 回答