Question

我有一个init（）函数，它在加载html主体时为地图创建一个图像叠加层。在函数内创建了一个mapOverlay变量。它基本上是“添加概述窗口到地图”下的功能：http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/code-playground.html（Ordnance Survey是英国的地图绘制机构，它使用它们的地图绘制工具）。

现在我想使用html下拉列表更改图像叠加层。如何访问原始的mapOverlay变量以更改其上的某些值？

以下是一些示例代码，我希望能够证明这个问题。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Testing OS OpenSpace</title>

<script type="text/javascript" 
src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=BA08531D8339984EE0405F0AC86026A9";>
</script>

<script type="text/javascript">

// Define the osMap variable
var osMap;

// This function creates the map and is called by the div in the HTML
function init()
  {
  // Create new map  
  osMap = new OpenSpace.Map('map');     
  // Define image overlay with URL  
  var mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
  mapOverlay.setHTML('<img src="Image1.jpg" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  mapOverlay.setPosition(new OpenLayers.LonLat(391500, 805000));
  mapOverlay.setSize(new OpenLayers.Size(3700, 4000));
  osMap.addLayer(mapOverlay);
  // Set map centre in National Grid Eastings and Northings and select zoom level 4
  osMap.setCenter(new OpenSpace.MapPoint(393000, 807000), 6);
  // Set the mapOverlay as a document property, so that it can be changed.
  }

// This function changes the image, or I'd like it to.
function ChangeImage()
  {
    // Get the choice from the dropdown. this bit works.
    var Choice_ = document.getElementById('Choice');
    var Choice = Choice_.options[Choice_.selectedIndex].value;
    // Edit the mapOverlay, not sure how to achieve this part.
    mapOverlay.setHTML('<img src="$Choice" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  }

</script>

<style>
  html, body {height: 100%;}
  #map {width: 700px; height: 500px; border:1px solid black;}
</style>
</head>  

<body onload="init()" id='Body'>

<!-- The div below holds the map -->
<div id="map"></div>

<!-- Now some options for which datasets to display. -->
<td><select id='Choice' onchange="ChangeImage()">
    <option value="Image1.jpg" selected="selected">1</option>
    <option value="Image2.jpg">2</option>
    </select>
</td>

</body>
</html>

所以，我希望实现的是从init（）函数中获取mapOverlay变量，并在ChangeImage（）函数中使用它。这可行吗？也许这受到操作系统开放空间API的性质的限制，在这种情况下，我会更好地询问他们的社区页面。但我希望在javascript中经常出现与此类似的情况，以至于查询与更一般的讨论有关。

Answer 1

您需要在函数范围之外声明变量，以便能够在其他函数中使用它。

所以：

<script>
  var mapOverlay;
  function init() 
  {
    //stuff
    mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
    //more stuff
  }
  function ChangeImage()
  {
    //stuff
    mapOverlay.setHTML('<img src="$Choice" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  }
</script>

访问函数外的javascript变量

1 个答案: