如何在其他窗口的谷歌地圖上繪製折線

我試圖在我的地圖上繪製折線。繪製折線的腳本是從彈出窗口定義和調用的。如何在其他窗口的谷歌地圖上繪製折線

 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

如何在其他窗口的谷歌地圖上繪製折線

回答

相關問題