0

我对javascript很陌生，所以请温柔一点；）

我正在使用 Google Maps API V3 并根据此示例创建自定义控件。这很简单，因为它是 Google 的示例。我遇到的麻烦是用现有的包含 javascript 的 DIV 替换 .innerHTML 。

最终，我试图在我的谷歌地图上创建一个包含谷歌 Adsense 广告的自定义控件。通常我会在我的 HTML 中的 body 标记之后创建一个 div，其中包含 Google Adsense 广告的 javascript 代码。

通常我会使用 controlText.innerHTML = 'some html goes here'; 对于自定义控件，但在我的情况下，我想使用包含 Google Adsense 广告的 javascript 代码的现有 DIV。

我试过更换

controlText.innerHTML = 'some html goes here';

和

controlText.innerHTML = document.getElementById("verticalad");

但它只是打破了地图。谁能建议我做错了什么？我希望它很容易解决。

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Custom Controls</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>

    var map;
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    function HomeControl(controlDiv, map) {

    controlDiv.style.padding = '4px';

    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);

    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';

    //**********************************************************************//
    //Normally this would be controlText.innerHTML = 'some html goes here';
    //**********************************************************************//
    controlText.innerHTML = document.getElementById("verticalad");

    controlUI.appendChild(controlText);

    google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
    });

    }

    function initialize() {
    var mapDiv = document.getElementById('map_canvas');
    var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    streetViewControl: false,
    mapTypeControl: true,
    mapTypeControlOptions: {

    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position: google.maps.ControlPosition.RIGHT_BOTTOM

    }

    }
    map = new google.maps.Map(mapDiv, mapOptions);

    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);

    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_CENTER].push(homeControlDiv);
    }

    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="width:100%;height:700px;"></div>

    //****************************************************************
    // This is the div that needs to be in the custom control
    //****************************************************************
    <div id="verticalad"><script type="text/javascript">adsense code goes here</script></div>
    </body>
    </html>
4

2 回答 2

0

我想我在某处丢失了分号，因为我已经设法让它工作了..

我确实将 Adsense 代码完整地保存在 HTML 正文中的 div 中，然后使用 controlText.innerHTML = document.getElementById("verticalad").innerHTML;

我确实还有一个进一步的问题，即 adsense 广告没有出现在 IE 中，但我放置了一个元标记，强制它模拟 IE7，它现在​​工作正常.. 不是我知道的最佳解决方案，但 IE7 工作正常。我认为该网站现在应该在所有现代浏览器中看起来都不错。

如果有人有兴趣查看最终站点，请访问 http://www.flighttracker.gleff.com。

谢谢你的帮助。

杰夫

于 2012-08-01T13:23:29.340 回答
0

要将整个verticalad div 移入控件还是仅将verticalad 的内容移入控件？如果要移动它，请使用appendChild而不是innerHTML

controlText.appendChild(document.getElementById("verticalad"));

如果您想要内容，请使用 verticalad 的 innerHTML

controlText.innerHTML = document.getElementById("verticalad").innerHTML;
于 2012-07-25T13:50:47.277 回答