[Bing] Pointeur sur une map

**eno97** · 24/06/2015, 16h51

Bonjour à toutes et à tous

Je précise avant de commencer que je suis un débutant en html et java

Voilà, je souhaiterai faire une page html dans laquelle j'affiche une carte qui se centre sur une adresse rentrée directement dans le code html et sur laquelle un pointeur se place

J'ai utilisé le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
   <head>
      <title></title>
      <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
      <script>
         var map = null;
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
            map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
	    map.Find(null, '13 rue du dragon paris')
 	    var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
            map.AddShape(shape);
        }
      </script>
   </head>
   <body onload='GetMap();'>
      <div id='myMap' style='position:relative; width:845px; height:760px;'></div>
   </body>
</html>

Le problème est que le fait de centrer la map sur l'adresse prend du temps (peut-être 1 seconde). Du coup, le pointeur va se placer AVANT que la carte ne se centre sur l'adresse

Ma question est la suivante : comment faire pour que le pointeur se place APRES que la carte se soit centrée sur l'adresse?

ou (solution alternative pour l'usage que je veux en faire, et qui m'arrangerai plus)

Comment faire pour que le pointeur n'aille pas se placer sur le centre de la carte, mais à une adresse que je préciserai dans le code?
en gros quelque chose qui ressemblerai à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var shape = new VEShape(VEShapeType.Pushpin, map.Find(null, '13 rue du dragon paris'));

Je vous remercie par avance

**NoSmoking** · 25/06/2015, 22h29

Bonjour,
j'ai du mal à saisir pourquoi ne pas passer par un centrage via les LatLng de l'adresse, une fois qu'on l'a inutile de la redemander.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//  position pour le '13 rue du dragon paris' d'après BingMap
//  {Latitude:48.853420406582345, Longitude:2.330963850021315}

donc je dirais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var map = null;
 
function GetMap() {
  var centre = new VELatLong(48.853420406582345, 2.330963850021315),
      zoom = 16,
      shape;
 
  map = new VEMap('myMap');
  map.LoadMap(centre, zoom);
  map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
 
  shape = new VEShape(VEShapeType.Pushpin, centre);
  map.AddShape(shape);
}

**eno97** · 26/06/2015, 10h17

Bonjour NoSmoking

Merci pour ta réponse

En fait, cette page page internet va être, à terme, couplée avec du code VBA sur Excel, et ce que je souhaiterai, c'est afficher des marqueurs aux différentes adresses renseignées sur mon classeur excel.
Comme je l'ai dit, je débute en javascript, et il y a plein de notions que je n'ai pas encore assimilées. Je n'avais pas pensé à utiliser une variable intermédiaire pour désigner l'endroit que je souhaite pointer, du coup ton code va m'être utile

Est-ce que tu sais comment je peux obtenir, dans mon code, les latitude et longitude à partir d'une adresse?

Merci beaucoup

**NoSmoking** · 28/06/2015, 09h48

Tu peux utiliser directement VEMap.Geocode Method.
Tu peux également récupérer l'adresse dans l'URL de la page pour initialiser ta variable.

exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>VEMap.Geocode Method</title>
<meta name="Author" content="NoSmoking">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<style>
html, body {
  padding: 0;
  margin: 0;
  font: 1em/1.25em Verdana,Arial,sans-serif;
  letter-spacing: 0.015em;
}
#page{
  width:60em;
  margin:auto;
}
#page h1 {
  color: #006699;
}
#myMap{
  margin:0 auto;
  border:1px solid #AAF;
}
.myMapContainer{
  position:relative; /* impératif */
  width:42em;
  height:38em;
  margin:auto;
}
</style>
<script>
var map = null;
function getURLParameter(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
function GetMap(){
  // objet option carte
  var oCarte = {
    'centre': new VELatLong(46.80, 1.70),
    'zoom'  : 6,
    'unit'  : VEDistanceUnit.Kilometers
  }
  // récup. de l'adresse
  var adresse = getURLParameter('adresse') || '13 rue du dragon paris';
  // masque la div au départ
  var oDivMap = document.getElementById('myMap');
  oDivMap.style.visibility = 'hidden';
  // création de la map
  map = new VEMap('myMap');
  // charge la map
  map.LoadMap( oCarte.centre, oCarte.zoom);
  map.SetScaleBarDistanceUnit( oCarte.unit);
 
  // lance la recherche
        map.Geocode( adresse, function( shapeLayer, findResults, places, moreResults, errorMsg){
     if( !errorMsg && places[0]){
        var location = places[0].LatLong;
        var shape = new VEShape( VEShapeType.Pushpin, location);
        map.AddShape( shape);
      }
      else{
        alert( errorMsg);
      }
      // affiche la map au retour
      oDivMap.style.visibility = 'visible';
  });
}
</script>
</head>
<body onload='GetMap();'>
<div id="page">
  <h1>VEMap.Geocode Method</h1>
  <div id='myMap' class="myMapContainer"></div>
</div>
</body>
</html>

essaies ne faisant un appel du style monsite.fr/bing_geodecode.html?adresse=grenoble, par exemple.

[Bing] Pointeur sur une map

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager