如何在其他窗口的谷歌地图上绘制折线

我试图在我的地图上绘制折线。绘制折线的脚本是从弹出窗口定义和调用的。如何在其他窗口的谷歌地图上绘制折线

 var route = new google.maps.Polyline({ 
      map: window.parent.map, 
      path: result.routeCoordinates, 
      geodesic: true, 
      strokeColor: '#00FF00', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     });

“map”被定义为一个全局变量，当我在调试时，我实际上看到了window.parent.map的内容是正确的。

不过这种做法给了我以下错误： InvalidValueError：的setMap：没有地图

的实例，我发现其他线程这个错误，但我din't管理解决基于这些我的问题。

更新：这里有一些代码将允许重现错误。首先包含地图主页：

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

    <title>GMaps</title> 
    <!-- Google Maps API v3 --> 
    <script src = "https://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    // Global variable 
    var map, infowindow; 

     function initialize(){ 
      var mapOptions = { 
       center: new google.maps.LatLng(-33.924717, 18.423328), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 


      map = new google.maps.Map(
         document.getElementById("map-canvas"), 
         mapOptions); 
      infoWindow = new google.maps.InfoWindow; 
      var marker = new google.maps.Marker({map: map, position : new google.maps.LatLng(-33.924717, 18.423328), icon: '/img/empty_small.png'}); 

      google.maps.event.addListener(marker, 'click', function() { 
       var htmlcontent = '<div class="popup"><iframe src="example2.html" frameborder="0" scrolling="yes" class="popop">iFrames required</iframe></div>'; 
       infoWindow.setContent(htmlcontent); 
       infoWindow.open(map, marker); 
      });  

     } 
     </script> 
</head> 
<body onLoad="initialize()"> 
    <div id = "map-canvas"> 
    </div> 
</body> 
</html>

其次弹出窗口（称为example2.html）：

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

    <title>GMaps</title> 
    <!-- Google Maps API v3 --> 
    <script src = "https://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    function drawPolyline() { 
     var coordinates = [ 
      {lat: -33.924717, lng: 18.423328}, 
      {lat: -33.924717, lng: 20.458451}, 
     ]; 
     var route = new google.maps.Polyline({ 
      map: window.parent.map, 
      path: coordinates, 
      geodesic: true, 
      strokeColor: '#00FF00', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 
     } 
     </script> 
</head> 
<body> 
    <a href="#" onclick="drawPolyline();return false;">Draw Polyline</a> 
</body> 
</html>

为了完整起见，在样式表相关的变量如下：

html{height: 100%} 
body{height: 100%; margin: 0; padding: 0} 
#map-canvas{height: 100%}

来源

2016-09-06 DiscoFever

请提供证明问题的[mcve]。 – geocodezip

@geocodezip我编辑了帖子。感谢您将我指向MCVE页面。 – DiscoFever

加载Google地图JavaScript API两次并不是一个好主意。我建议从你的弹出页面移除地图的JavaScript API的负荷，在你的代码

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
     <link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

     <title>GMaps</title> 

     <script> 
      function drawPolyline() { 
       var coordinates = [ 
        {lat: -33.924717, lng: 18.423328}, 
        {lat: -33.924717, lng: 20.458451}, 
       ]; 
       var route = new window.parent.google.maps.Polyline({ 
        map: window.parent.map, 
        path: coordinates, 
        geodesic: true, 
        strokeColor: '#00FF00', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <a href="#" onclick="drawPolyline();return false;">Draw Polyline</a> 
    </body> 
</html>

这种方法很适合我使用window.parent.google.maps.Polyline。

来源

2016-09-08 08:41:14 xomena

谢谢，解决了我的问题。我想upvote，但不幸的是我没有足够的声誉。 – DiscoFever

如何在其他窗口的谷歌地图上绘制折线

回答

相关问题