傳遞谷歌地圖到功能HTML字符串導致意想不到的標識

Question

我試圖通過一個谷歌地圖作爲一個參數成函數調用嵌入到HTML中的JavaScript定義，像這樣：

var html = "<div id='content'><a href='javascript:takeMeThere("+rectangle.getBounds().getCenter()+","+map+");'>"+rectangleId+"</a></div>"; 

但是，這給了我一個意外標識符的錯誤，其中中心座標被傳遞，但是地圖只是一個[object Object]而沒有被標識。地圖是一個全局變量，我takeMeThere功能

function takeMeThere(rectCenter, map) { 
    map.setZoom(17); 
    map.panTo(rectCenter); 
} 

我已經試過不包括地圖作爲參數，因爲它是我認爲它會用它就好了一個全局變量，但它說setZoom不一個函數，因爲它根本不識別地圖，但它不會讓我把它傳遞到我的函數中...

任何人都知道我可以如何傳遞我的地圖？基本上我希望信息泡泡（HTML字符串變成內容）的內容是可點擊的，點擊後會將用戶居中並放大到該區域。

Answer 1

你需要撥打電話的功能模樣（其中latLng是google.maps.LatLng對象和map是google.maps.Map對象）：

takeMeThere(latLng,map); 
// implemented this way: 
takeMeThere(new google.maps.LatLng(rectCenterLat, rectCenterLng),map); 

所以HTML最終成爲（創建一個新google.maps.LatLng對象，你可以通過在參考rectangle，但那就必須在全局命名空間）：

var html = "<div id='content'><a href='javascript:takeMeThere(new google.maps.LatLng(" + rectangle.getBounds().getCenter().toUrlValue(6) + "),map);'>" + rectangleId + "</a></div>"; 

proof of concept fiddle

代碼片斷：

var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var rectangle = new google.maps.Rectangle({ 
 
    map: map, 
 
    bounds: { 
 
     north: 37.442, 
 
     south: 37.44, 
 
     east: -122.14, 
 
     west: -122.142 
 
    } 
 
    }); 
 
    var rectangleId = "rectangle"; 
 
    var html = "<div id='content'><a href='javascript:takeMeThere(new google.maps.LatLng(" + rectangle.getBounds().getCenter().toUrlValue(6) + "),map);'>" + rectangleId + "</a></div>"; 
 
    document.getElementById('info').innerHTML = html; 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function takeMeThere(rectCenter, map) { 
 
    map.setZoom(17); 
 
    map.panTo(rectCenter); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="info"></div> 
 
<div id="map_canvas"></div>