Question

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

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

＆＃34;映射＆＃34;被定义为全局变量，当我调试时，我实际上看到window.parent.map的内容是正确的。

这种方法仍然给我以下错误： InvalidValueError：setMap：不是Map的实例

我发现了有关此错误的其他主题，但我没有设法解决我的问题。

更新：这里有一些代码可以重现错误。首先是包含地图的主页面：

<!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%}

Answer 1

两次加载Maps JavaScript API并不是一个好主意。我建议您从弹出页面中删除Maps JavaScript API，并在代码中使用window.parent.google.maps.Polyline

<!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>

这种方法对我有用。

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

1 个答案: