传递谷歌地图到功能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>