Question

我尝试完成提到here的代码。但是因为我是java-scripting的新手，所以出了点问题，我的猜测是地图根本无法正确加载。 DIV也在新标签，文本中创建。请帮我在新标签页中打开自定义地图。这是代码：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
  <script>
  function newWindow() {
    var w = window.open('', '_blank'); //you must use predefined window name here for IE.
    var head = w.document.getElementsByTagName('head')[0];

    //Give some information about the map:
    w.document.head.innerHTML = '<title>Simple Map</title></head>';
    w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>';

    var loadScript = w.document.createElement('script');
    //Link to script that load google maps from hidden elements.
    loadScript.type = "text/javascript";
    loadScript.async = true;
    loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

    var googleMapScript = w.document.createElement('script');
    //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
    googleMapScript.type = "text/javascript";
    googleMapScript.async = true;
    googleMapScript.text = 'var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);';

    head.appendChild(loadScript);
    head.appendChild(googleMapScript);
  }
  //addLoadEvent(loadScript);
  </script>
  <button onclick="newWindow()">Click me</button>
</body>
</html>

Answer 1

您似乎没有在第二个脚本对象中定义initialize（）函数。

代码应为

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <script>
    function newWindow() {
        var w = window.open('', '_blank'); //you must use predefined window name here for IE.
        var head = w.document.getElementsByTagName('head')[0];

        //Give some information about the map:
        w.document.head.innerHTML = '<title>Simple Map</title></head>';
        w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>';

        var loadScript = w.document.createElement('script');
        //Link to script that load google maps from hidden elements.
        loadScript.type = "text/javascript";
        loadScript.async = true;
        loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

        var googleMapScript = w.document.createElement('script');
        //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
        googleMapScript.type = "text/javascript";
        googleMapScript.async = false;
        googleMapScript.text = 'function initialize() {var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}';

        head.appendChild(loadScript);
        head.appendChild(googleMapScript);
    }
    //addLoadEvent(loadScript);
</script>
<button onclick="newWindow()">Click me</button>
</body>
</html>

您可以在jsbin上看到示例：http://jsbin.com/loyaca/edit?html,output

自定义谷歌地图在新窗口中

1 个答案: