在新窗口中打开谷歌地图。

Question

我创建了一个Google地图API，希望在新标签页中打开它。请问我的代码有什么问题？我可以打开一个新的标签页，但无法显示Google地图。

以下是我的代码。谢谢！

    function newWindow() 
    { 
     var myLatlng = new google.maps.LatLng(0.7,40);
     var myOptions = 
        {
         zoom: 2,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.HYBRID
        };
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    } 

<A HREF="" onclick="window.open('javascript:newWindow()')" >New Map(In new window)</A>

- KennC.

Answer 1

1. window.open() 接收一个 URL 作为参数。而你的 newWindow() 函数没有返回任何东西，更别说是 URL 了。
2. 你需要传入一个有效的 URL 来调用 window.open()，这将帮助设置地图本身。

3. 如果你要内联附加事件处理程序，请确保正确实现：

   <a onclick="window.open('some_url_here'); return false;">...</a>

话虽如此，为了不干扰 JavaScript 的正常执行，你应该使用外部 JS 代码来附加事件处理程序。

---

也许你想在模态对话框中打开地图？

- Matt Ball

---

哦，好的，谢谢！之前我遇到过一个类似于onclick="window.open('javascript:function()');"的网站。这就是为什么我认为我可以在window.open中执行函数的原因。感谢您为我解决了这个问题。 - KennC.

@KennC：那只是因为该函数返回了一个URL才起作用。此外，我确定你不是指 onclick="window.open('javascript:function()'); 因为 function 是JS中的关键字 :) ... _而且_，当你编写 onclick="/* js context here */" 时，你已经处于JS上下文中，所以在其中编写 javascript:function() 实际上是语法错误。 - Matt Ball

哦，我明白了。是的，我不是指函数这个词。=）再次感谢你。 - KennC.

Answer 2

window.open的变量是URL

<a href="#" onclick="window.open('stackoverflow.com')">New Map(In new window)</a>

- Timothy Ruhle

Answer 3

实际上，您的问题有解决方案。这里的第一个错误是新窗口中的上下文与旧窗口不同。

var w = window.open('', '_blank', options);

w 是一种与 window 不同的 Window 对象。空 URL 会创建一个空白页 "about:blank"，由于没有域名，因此您可以读写访问 w.document。

function newWindowMap(latitude, longitude) {
    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.createElement('input');
    //Place ID, value and type='hidden' here
    var loadScript = w.document.createElement('script');
    loadScript.src = '...'; //Link to script that load google maps from hidden elements.
    var googleMapScript = w.document.createElement('script');
    googleMapScript.src = '...'; //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
    head.appendChild(loadScript);
    head.appendChild(googleMapScript);
}

现在整个loadScript将在新窗口的上下文中运行，谷歌地图将从其中调用一个函数，当它完成加载时。您可以动态创建新的div并使用它来创建地图。

- Illuminati