繁体   English   中英

Google Maps API JS错误

[英]Google maps API js errors

我已经使用API​​ v3集成了Google地图,并且一切正常,但是我遇到了一些控制台错误,想看看是否有人可以指出原因。

在Chrome上,我得到:未捕获的TypeError:无法读取null的属性'lat'VM262:13(匿名函数)VM262:13T.trigger main.js:15N.Hc VM261:137(匿名函数)main.js:13T.trigger main .js:15N.Xl VM261:122(匿名函数)

在Firefox上我得到:TypeError:s为空

根据阅读其他答案,似乎在初始化地图时dom尚未完全加载,但由于我在加载时运行它,因此似乎并非如此。 我的代码在下面,如果有人可以指出为什么这些错误可能发生(一切似乎都正常工作!)的方向,那么将不胜感激(仅供参考,这里有一些php代码用于将db变量插入到js):

var map;
var infos = [];
var ib = new InfoBox();
var infowindow;

function initialize() {
    var contentString = '';
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    map = new google.maps.Map(document.getElementById('map-canvas'));
    var address = 'Netherlands';
    var geocoder = new google.maps.Geocoder();
       geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.fitBounds(results[0].geometry.viewport);
          }
        });
    var markers = [
    [1, '52.350785','5.264702', 2, 'Almere', '01345'],[1, '52.992753','6.564228', 2, 'Assen', '012345678']
    ];
    for (var i = 0; i < markers.length; i++) {
        setMarkers(map, markers[i]);
    }
}

function setMarkers(map, beach) {
    var image = new google.maps.MarkerImage('/img/marker.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(21, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(5, 34));

    var html = '<div class="phoney">'+beach[4]+'<br>'+beach[5]+'<\/div>';
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    content:html,
    title: beach[4],
    zIndex: beach[3]
    });

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 2px solid #4a5461; margin-top: 8px;background: #ffffff; padding: 5px;font-family: \'ff-din-web-n6\',\'ff-din-web\',sans-serif; font-size: 17px; color: #4a5461;";
    boxText.innerHTML = beach[4] + '<br>' + beach[5];

    var myOptions = {
    content:boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
        width: "200px"
    },
    closeBoxMargin: "13px 5px 2px 2px",
    closeBoxURL: "/img/close.png",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
    ib.setOptions(myOptions);
    ib.open(map, marker);
    });
}

$( document ).ready(function() {
    google.maps.event.addDomListener(window, 'load', initialize);
});

非常感谢,

戴夫

戴夫

确保lat和long是十进制值,例如:

var center = {lat:-25.363,lng:131.044};

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM