我試圖在我的地圖上繪製折線。繪製折線的腳本是從彈出窗口定義和調用的。如何在其他窗口的谷歌地圖上繪製折線
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%}
請提供證明問題的[mcve]。 – geocodezip
@geocodezip我編輯了帖子。感謝您將我指向MCVE頁面。 – DiscoFever