2012-03-03 9 views
0

でのNullまたは未定義のエラーが私はOpenLayersを中map.AddPopup()を呼び出すときに、このエラーが出る:OpenLayersを:AddPopup

プロパティ「左」の値を取得することができません。オブジェクトがnullまたは未定義である

http://www.openlayers.org/api/OpenLayers.js

同じエラーがChromeとIEの両方で起こります。私はその行をコメントアウトすると、マップは正常に動作し、マーカーは正常に動作します。その後、icon0とlonLat0はループ内のいくつかの項目になりますが、それを処理します。最終結果は、マーカーに表示される何らかの種類のテキストボックスでなければなりません。

lonLat0のマーカーが表示されるため、lonLatオブジェクトの問題のようには見えません。

はい、私は一度にそれらの上にテキストを含む多くのマーカーを表示することになります。私は知っている、それは愚かなようですが、それは要件です。

なぜこのエラーが発生するのですか?

<html><body> 
<div id='mapdiv'></div> <script src='http://www.openlayers.org/api/OpenLayers.js'></script> 
<script> 
    map = new OpenLayers.Map('mapdiv'); 
    map.addLayer(new OpenLayers.Layer.OSM()); 
    var lonLat = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()); 
    var markers = new OpenLayers.Layer.Markers('Markers'); 
    map.addLayer(markers); 
    markers.addMarker(new OpenLayers.Marker(lonLat));  
    function onPopupClose(evt) {selectControl.unselect(this.feature); } 
    var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32,32), new OpenLayers.Pixel(-16,-32)); 
    var lonLat0 = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()); 
    markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone())); 

    // Error throws here 
    map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose)); 
    map.setCenter (lonLat, 1);  
</script></body></html> 

答えて

2

エラーを再現して修正できました。そのデモコードは本当に悪いです。私はworking exampleで始まり、必要に応じて修正します。

例えば、<body onload="init()">のjavascriptを呼び出す必要があります。そうでないと、レンダリングされても驚いています。

map = new OpenLayers.Map({ 
    div: "mapdiv", 
    center: new OpenLayers.LonLat(0, 0) 
}); 

enter image description here

をしかし、あなたはあなたのファイルの構造を改善したい包み、ここで完全なコードは次のとおりです。

とにかく、私がしたすべてはこのためmap = new OpenLayers.Map('mapdiv');置き換えられました。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>Open Popup on Layer.Vector</title> 
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> 
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> 
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 

     function init() { 
      map = new OpenLayers.Map({ 
       div: "mapdiv", 
       center: new OpenLayers.LonLat(0, 0) 
      }); 
      map.addLayer(new OpenLayers.Layer.OSM()); 
      var lonLat = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()); 
      var markers = new OpenLayers.Layer.Markers('Markers'); 
      map.addLayer(markers); 
      markers.addMarker(new OpenLayers.Marker(lonLat)); 
      function onPopupClose(evt) { selectControl.unselect(this.feature); } 
      var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32, 32), new OpenLayers.Pixel(-16, -32)); 
      var lonLat0 = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()); 
      markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone())); 

      // Error throws here 
      map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose)); 
      map.setCenter(lonLat, 1); 

     } 

    </script> 
    </head> 
    <body onload="init()"> 
    <div id="mapdiv" class="smallmap"></div> 
    </body> 
</html>