Accéder à la variable javascript en dehors de la fonction

J'ai une fonction init() qui crée une superposition d'image pour une carte lorsque le corps html est chargé. dans la fonction, une variable mapOverlay est créée. C'est essentiellement la fonction sous "Ajouter une fenêtre de vue d'ensemble à la carte" ici: http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/code-playground.html (Ordnance Survey est l'agence de cartographie du Royaume-Uni, qui utilise son outil de cartographie).Accéder à la variable javascript en dehors de la fonction

Maintenant, je voudrais changer la superposition d'image en utilisant une liste déroulante html. Comment accéder à la variable mapOverlay d'origine pour modifier certaines valeurs?

Voici un exemple de code qui, je l'espère, montrera le problème.

<!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>

Alors, ce que je suis dans l'espoir d'atteindre est d'obtenir la variable mapOverlay de la fonction init(), et utiliser dans la fonction ChangeImage(). Est-ce faisable? Peut-être que cela est limité par la nature de l'API OpenSpace OS, auquel cas je serais mieux de demander sur leur page de la communauté. Mais j'espérais que des situations similaires à celle-ci pourraient apparaître assez souvent dans javascript que la requête est liée à une discussion plus générale.

Source

2014-07-09 EddyTheB

Pouvez-vous pas simplement déclarer le var mapOverlay globalement, à côté de osMap? Il serait alors visible à ChangeImage(). (en gardant l'initialisation de mapOverlay dans init()) – rob

Vous devez déclarer la variable en dehors de la portée de votre fonction pour pouvoir l'utiliser dans d'autres fonctions.

Alors:

<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>

Source

2014-07-09 14:42:56 Thoronwen

Oui, et il est pratique de créer des espaces de noms pour le cas où la quantité de variables globales devient plus grande. Comme ' '. Et utilisez 'myMapVars.mapOverlay' plus loin dans le code. – gorpacrate

Génial, ouais je pensais que ça devait être quelque chose de facile comme ça, mais je n'utilise pas assez le javascript alors il ne m'est jamais arrivé de définir une variable en dehors d'une fonction! Merci pour la solution! – EddyTheB

@EddyTheB N'importe quand :) – Thoronwen

Accéder à la variable javascript en dehors de la fonction

Répondre

Questions connexes