Question

我正在尝试将google地图作为参数传递给嵌入到javascript中定义的html中的函数调用，如下所示：

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

但是，这给了我一个意外标识符的错误，其中传递了中心坐标，但是地图只是一个[对象对象]而没有被识别。地图是一个全局变量，我的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

代码段

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

将Google地图传递到html字符串中的函数会导致意外的标识符

1 个答案: