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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>Utilisation de bindTo pour mettre à jour distance entre markers</title>
<meta name="Author" content="NoSmoking">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<style>
html, body {
margin: 0;
padding: 0;
font: 1em/1.25 Verdana,sans-serif;
background: #FFF;
}
#main {
margin: auto;
max-width: 60em;
}
h1, h2, h3 {
margin: .25em 0;
color: #069;
}
section {
margin: 0 2em 1em;
}
a, code {
color: #06C;
}
code {
font: 1em/1.25 "Courier New",monospace;
}
.cadre_carte {
width: 50em;
height: 40em;
margin: 0 auto;
padding: 5px;
border: 1px solid #ABC;
border-radius: 5px;
box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte {
width: 100%;
height: 100%;
margin: auto;
}
.bulle {
font: 1rem/1.25 Verdana,sans-serif;
}
.bulle i{
font-size: .8em;
}
.bulle i.inf-distance {
color: #069;
}
.bulle i.sup-distance {
color: #F00;
}
</style>
<script>
function initCarte() {
// déclaration de quelques données
var tData = [
{ lat:44.837368, lon:-0.576144, titre:'Bordeaux', info:'<b>Bordeaux</b><br>la suite du texte...<br>%dist'},
{ lat:45.194276, lon:5.731633, titre:'Grenoble', info:'<b>Grenoble</b><br>la suite du texte...<br>%dist'},
{ lat:45.767299, lon:4.834329, titre:'Lyon', info:'<b>Lyon</b><br>la suite du texte...<br>%dist'},
{ lat:43.297612, lon:5.381042, titre:'Marseille', info:'<b>Marseille</b><br>la suite du texte...<br>%dist'},
{ lat:48.856667, lon:2.350987, titre:'Paris', info:'<b>Paris</b><br>la suite du texte...<br>%dist'}
];
var urlIconePointer = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
var urlIconeMarker = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
var centre = new google.maps.LatLng(47, 1.8);
var oInfo, oMarker;
var oMap = new google.maps.Map(document.getElementById('div_carte'), {
'backgroundColor': '#FFF',
'zoom': 6,
'center': centre,
'zoomControlOptions': {
'style': google.maps.ZoomControlStyle.SMALL
},
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// le pointer référence
var oPointer = new google.maps.Marker({
'position': centre,
'icon' : urlIconePointer,
'zIndex' : 10,
'draggable': true,
'map': oMap
});
// création des marqueurs
var i, nb = tData.length;
for (i = 0; i < nb; i += 1) {
// création du marker
oMarker = new google.maps.Marker({
'position': {'lat' : tData[i].lat, 'lng': tData[i].lon},
'map': oMap,
'icon': urlIconeMarker,
'zIndex' : 0,
'title': tData[i].titre
});
// création infobulle
oInfo = new google.maps.InfoWindow({
'marqueur': oMarker,
'template' : '<div class="bulle">' + tData[i].info + '</div>', // création du template
'content': '' // rien dedans pour le moment par exemple
});
// gestion des liaisons
oMarker.infoBulle = oInfo;
// ajout evenement sur marker
google.maps.event.addListener(oMarker, 'click', function () {
// affichage InfoWindow
this.infoBulle.open(this.getMap(), this);
});
// ajout evenement sur marker si pointer déplacé
google.maps.event.addListener(oMarker, 'pointer_changed', function () {
// récup. du pointer
var pointer = this.get('pointer');
// calcul de la distance
var distance = google.maps.geometry.spherical.computeDistanceBetween(pointer, this.getPosition()) /1000;
var km = distance.toFixed(3) + ' km';
// modif. contenu infoBulle
var contenu, change;
if( distance > 200){ // la valeur serait à gérer via une variable
change = '<i class="sup-distance">' +km +'<\/i>';
}
else{
change = '<i class="inf-distance">' +km +'<\/i>';
}
// remplace par valeur distance
contenu = this.infoBulle.template.replace('%dist', change);
//this.infoBulle.setContent('<div class="bulle">Distance au pointer : <br>' + km +'<\/div>');
this.infoBulle.setContent( contenu);
});
// bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)
oMarker.bindTo('pointer', oPointer, 'position');
}
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="main">
<header>
<h1>Mise à jour distance entre markers</h1>
</header>
<section>
<h2>Application</h2>
<p>On utilise de la méthode <code>bindTo</code> des objets <code>google.maps.MVCObject</code> pour mettre à jour le contenu de l'infoWindow associée aux markers.</p>
<p><code>bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)</code></p>
<div class="cadre_carte">
<div id="div_carte"></div>
</div>
</section>
<section>
<h2>Ressources</h2>
<ul>
<li><a href="https://developers.google.com/maps/documentation/javascript/reference#MVCObject">Les google.maps.MVCObject</a></li>
</ul>
</section>
</div>
</body>
</html> |
Partager