définir une zone dans lequelle on veux afficher des points
3 messages
• Page 1 sur 1
Consultez la formation Google Maps, News, Images de WebRankInfo / Ranking Metrics
- kiviste
- Nouveau WRInaute

- Messages: 1
- Inscription: 5 Juin 2008
définir une zone dans lequelle on veux afficher des points
bonjour,
voila je souhaiterais afficher une zone dans laquelle ce trouverais des points dans une zone de 1 km. mon but est de définir une zone de 1 km et d'afficher les point si trouvent. et de noircir par exemple le reste de la carte ne figurant pas dans ma zone. je c'est pas si j'ai été assez clair dans ma description.
merci de votre aide
voila je souhaiterais afficher une zone dans laquelle ce trouverais des points dans une zone de 1 km. mon but est de définir une zone de 1 km et d'afficher les point si trouvent. et de noircir par exemple le reste de la carte ne figurant pas dans ma zone. je c'est pas si j'ai été assez clair dans ma description.
merci de votre aide
- loupy
- Nouveau WRInaute

- Messages: 4
- Inscription: 9 Juin 2008
afficher cercle en fonction de la zone désirée
voila moi j'essaye d'afficher avec un zoom définie la zone de la rue choisi et je voudrais aussi afficher un cercle autour de celle ci. je voudrais avoir un cercle qui entour la rue que j'aurais taper dans ma recherche.
pour le moment j'ai ceci mais c'est l'appelle a la fonction dessiner un cercle qui es pas bonne , il faut que je la mette directement lorsque j'utilise la fonction pour afficher adresse mais je ne sais pas comment faire. pouvez vous m'aider aussi si vous plais.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Google Maps </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAb0odDzJFnk2OJeLW7fMyVBT5bM71AhoC6oOu869xuITwj5GB" type="text/javascript"></script>
<script type='text/javascript'>
var geocoder = null;
//Nom du cercle : cercle
var cercle;
//Couleur du cercle
var cercleCouleur = "#0000ff";
//Epaisseur du trait tracant le cercle (en pixel)
var cercleEpaisseur = "1";
//Opacité du trait tracant le cercle (de 0 à 1)
var cercleOpacite = ".5";
//Couleur du disque
var disqueCouleur = "#0000ff";
//Opacité du disque (de 0 à 1)
var disqueOpacite = ".1";
//Rayon du cercle en kilometre(s)
var rayon = 0.5;
//Nombre de segments composant le cercle
var segment = 60;
//Centre de la carte nommée "MaCarte"
var centre;
//marqueur nommé "monMarqueur" symbolisant le centre du cercle
var monMarqueur;
function load() {
if (GBrowserIsCompatible()) {
MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
MaCarte.setCenter(new GLatLng(47.15984,2.988281), 5);
geocoder = new GClientGeocoder();
centre = MaCarte.getCenter();
var point = new GLatLng (48.627629,-1.985686);
MaCarte.addOverlay (new GMarker(point));
//... On supprime le zoom par double clique sur la carte nommée 'MaCarte' ...
MaCarte.disableDoubleClickZoom();
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
function AfficheGPS(marker){
var center = marker.getPoint();
var gpscenter = center.toString();
var TableauPositionMaxiCarte = gpscenter.split(',');
var LatitudeCarteClick='';
var LongitudeCarteClick='';
var LatitudeCarteClick = TableauPositionMaxiCarte[0].replace('(', '');
var LongitudeCarteClick = TableauPositionMaxiCarte[1].replace(')', '');
//document.getElementById('message').innerHTML = '<u>Les Coordonnees GPS du marqueur sont</u> : <b>Latitude : </b>' + LatitudeCarteClick + ' - <b>Longitude : </b>' + LongitudeCarteClick;
window.setTimeout(function(){MaCarte.panTo(new GLatLng(LatitudeCarteClick, LongitudeCarteClick));}, 1000);
}
function AfficherAdresse(addresse) {
if (geocoder) {
geocoder.getLatLng(
addresse,
function(point) {
if (!point) {
alert('Impossible de geolocaliser cette adresse' + addresse);
} else {
MaCarte.addControl(new GLargeMapControl());
MaCarte.addControl(new GMapTypeControl());
//MaCarte.addControl(new GOverviewMapControl());
MaCarte.addControl(new GScaleControl());
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, 'dragstart', function() {
MaCarte.closeInfoWindow();
});
GEvent.addListener(marker, 'dragend', function(point) {
AfficheGPS(marker);
});
//MaCarte.clearOverlays();
//MaCarte.addOverlay(marker);
//appel de la fonction dessiner un cercle
dessineUnCercle()
// afficher coordonnée de la recherche
AfficheGPS(marker);
MaCarte.setCenter(point, 15);
}
}
);
}
}
//fonction dessineUnCercle()
function dessineUnCercle(){
//Construction du tableau "points" contenant toutes les coordonnées des points nécessaires au tracé du cercle
var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
var points = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
points.push(pint);
}
//le cercle "cercle" est en fait un polygone construit à l'aide des points contenus dans le tableau "points"
cercle = new GPolygon(points, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
//... Affichage du "cercle" sur la carte nommée "MaCarte" ...
MaCarte.addOverlay(cercle);
}
</script>
<style type="text/css">
</style>
</head>
<body onload="load()" onunload="GUnload()"><center>
<div id="EmplacementDeMacarte" style="width: 400px; height: 400px"></div>
<div id="cadre">
<form action="#" onSubmit="AfficherAdresse(this.addresse.value); return false">
<input type="text" size="30" name="addresse" value="recherche" />
<input type="submit" value="Rechercher" />
</form>
<div id="message"></div>
</div>
</body>
</html>
pour le moment j'ai ceci mais c'est l'appelle a la fonction dessiner un cercle qui es pas bonne , il faut que je la mette directement lorsque j'utilise la fonction pour afficher adresse mais je ne sais pas comment faire. pouvez vous m'aider aussi si vous plais.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Google Maps </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAb0odDzJFnk2OJeLW7fMyVBT5bM71AhoC6oOu869xuITwj5GB" type="text/javascript"></script>
<script type='text/javascript'>
var geocoder = null;
//Nom du cercle : cercle
var cercle;
//Couleur du cercle
var cercleCouleur = "#0000ff";
//Epaisseur du trait tracant le cercle (en pixel)
var cercleEpaisseur = "1";
//Opacité du trait tracant le cercle (de 0 à 1)
var cercleOpacite = ".5";
//Couleur du disque
var disqueCouleur = "#0000ff";
//Opacité du disque (de 0 à 1)
var disqueOpacite = ".1";
//Rayon du cercle en kilometre(s)
var rayon = 0.5;
//Nombre de segments composant le cercle
var segment = 60;
//Centre de la carte nommée "MaCarte"
var centre;
//marqueur nommé "monMarqueur" symbolisant le centre du cercle
var monMarqueur;
function load() {
if (GBrowserIsCompatible()) {
MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
MaCarte.setCenter(new GLatLng(47.15984,2.988281), 5);
geocoder = new GClientGeocoder();
centre = MaCarte.getCenter();
var point = new GLatLng (48.627629,-1.985686);
MaCarte.addOverlay (new GMarker(point));
//... On supprime le zoom par double clique sur la carte nommée 'MaCarte' ...
MaCarte.disableDoubleClickZoom();
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
function AfficheGPS(marker){
var center = marker.getPoint();
var gpscenter = center.toString();
var TableauPositionMaxiCarte = gpscenter.split(',');
var LatitudeCarteClick='';
var LongitudeCarteClick='';
var LatitudeCarteClick = TableauPositionMaxiCarte[0].replace('(', '');
var LongitudeCarteClick = TableauPositionMaxiCarte[1].replace(')', '');
//document.getElementById('message').innerHTML = '<u>Les Coordonnees GPS du marqueur sont</u> : <b>Latitude : </b>' + LatitudeCarteClick + ' - <b>Longitude : </b>' + LongitudeCarteClick;
window.setTimeout(function(){MaCarte.panTo(new GLatLng(LatitudeCarteClick, LongitudeCarteClick));}, 1000);
}
function AfficherAdresse(addresse) {
if (geocoder) {
geocoder.getLatLng(
addresse,
function(point) {
if (!point) {
alert('Impossible de geolocaliser cette adresse' + addresse);
} else {
MaCarte.addControl(new GLargeMapControl());
MaCarte.addControl(new GMapTypeControl());
//MaCarte.addControl(new GOverviewMapControl());
MaCarte.addControl(new GScaleControl());
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, 'dragstart', function() {
MaCarte.closeInfoWindow();
});
GEvent.addListener(marker, 'dragend', function(point) {
AfficheGPS(marker);
});
//MaCarte.clearOverlays();
//MaCarte.addOverlay(marker);
//appel de la fonction dessiner un cercle
dessineUnCercle()
// afficher coordonnée de la recherche
AfficheGPS(marker);
MaCarte.setCenter(point, 15);
}
}
);
}
}
//fonction dessineUnCercle()
function dessineUnCercle(){
//Construction du tableau "points" contenant toutes les coordonnées des points nécessaires au tracé du cercle
var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
var points = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
points.push(pint);
}
//le cercle "cercle" est en fait un polygone construit à l'aide des points contenus dans le tableau "points"
cercle = new GPolygon(points, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
//... Affichage du "cercle" sur la carte nommée "MaCarte" ...
MaCarte.addOverlay(cercle);
}
</script>
<style type="text/css">
</style>
</head>
<body onload="load()" onunload="GUnload()"><center>
<div id="EmplacementDeMacarte" style="width: 400px; height: 400px"></div>
<div id="cadre">
<form action="#" onSubmit="AfficherAdresse(this.addresse.value); return false">
<input type="text" size="30" name="addresse" value="recherche" />
<input type="submit" value="Rechercher" />
</form>
<div id="message"></div>
</div>
</body>
</html>
- Amba
- Nouveau WRInaute

- Messages: 3
- Inscription: 7 Déc 2004
voici une modif de ton code pour qu'il fonctionne
- Code: Tout sélectionner
<script type='text/javascript'>
var geocoder = null;
//Nom du cercle : cercle
var cercle;
//Couleur du cercle
var cercleCouleur = "#0000ff";
//Epaisseur du trait tracant le cercle (en pixel)
var cercleEpaisseur = "1";
//Opacité du trait tracant le cercle (de 0 à 1)
var cercleOpacite = ".5";
//Couleur du disque
var disqueCouleur = "#0000ff";
//Opacité du disque (de 0 à 1)
var disqueOpacite = ".1";
//Rayon du cercle en kilometre(s)
var rayonRecherche = 30;
//Nombre de segments composant le cercle
var segment = 60;
//Centre de la carte nommée "MaCarte"
var centre;
//marqueur nommé "monMarqueur" symbolisant le centre du cercle
var monMarqueur;
function load() {
if (GBrowserIsCompatible()) {
MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
MaCarte.setCenter(new GLatLng(47.15984,2.988281), 5);
geocoder = new GClientGeocoder();
centre = MaCarte.getCenter();
var point = new GLatLng (48.627629,-1.985686);
MaCarte.addOverlay (new GMarker(point));
//... On supprime le zoom par double clique sur la carte nommée 'MaCarte' ...
MaCarte.disableDoubleClickZoom();
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
function AfficheGPS(marker){
var center = marker.getPoint();
var gpscenter = center.toString();
var TableauPositionMaxiCarte = gpscenter.split(',');
var LatitudeCarteClick='';
var LongitudeCarteClick='';
var LatitudeCarteClick = TableauPositionMaxiCarte[0].replace('(', '');
var LongitudeCarteClick = TableauPositionMaxiCarte[1].replace(')', '');
document.getElementById('message').innerHTML = '<u>Les Coordonnees GPS du marqueur sont</u> : <b>Latitude : </b>' + LatitudeCarteClick + ' - <b>Longitude : </b>' + LongitudeCarteClick;
window.setTimeout(function(){MaCarte.panTo(new GLatLng(LatitudeCarteClick, LongitudeCarteClick));}, 1000);
}
function AfficherAdresse(addresse) {
if (geocoder) {
geocoder.getLatLng(
addresse,
function(point) {
if (!point) {
alert('Impossible de geolocaliser cette adresse' + addresse);
} else {
centre = point;
MaCarte.addControl(new GLargeMapControl());
MaCarte.addControl(new GMapTypeControl());
//MaCarte.addControl(new GOverviewMapControl());
MaCarte.addControl(new GScaleControl());
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, 'dragstart', function() {
MaCarte.closeInfoWindow();
});
GEvent.addListener(marker, 'dragend', function(point) {
AfficheGPS(marker);
});
MaCarte.clearOverlays();
MaCarte.addOverlay(marker);
//appel de la fonction dessiner un cercle
dessineUnCercle()
// afficher coordonnée de la recherche
AfficheGPS(marker);
//MaCarte.setCenter(point, 15);
}
}
);
}
}
//fonction dessineUnCercle()
function dessineUnCercle(){
/* bounds : représente un rectangle dans lequel va s'inscrire le cercle */
/* il va nous servir à déterminer le niveau de zoom optimum pour afficher le cercle sur la carte */
bounds = new GLatLngBounds();
/* Construction du tableau nommé 'points' contenant toutes les coordonnées des points nécessaires au tracé du cercle */
var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
var points = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
var pint = new GLatLng(centre.lat() + (rayonRecherche/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayonRecherche/lngConv * Math.sin(i * Math.PI/180)));
points.push(pint);
bounds.extend(pint);
}
/* le cercle nommé 'cercle' est en fait un polygone construit à l'aide des points contenus dans le tableau 'points' */
cercle = new GPolygon(points, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
/* La carte nommée "MaCarte" est centrée sur le point 'centreCercle' */
/* et le niveau de zoom pour un affichage optimum du cercle sur la carte */
/* est obtenu par : MaCarte.getBoundsZoomLevel(bounds */
MaCarte.setCenter(centre, MaCarte.getBoundsZoomLevel(bounds));
/* un nouveau marqueur nommé 'marqueurCentreCercle' est créé. */
/* Celui-ci est ancré sur le point nommé 'centreCercle' représentant le centre du cercle */
marqueurCentreCercle = new GMarker(centre);
/* Affichage du marqueur nommé 'marqueurCentreCercle', représentant le centre du cercle, sur la carte nommée 'MaCarte' */
MaCarte.addOverlay(marqueurCentreCercle);
/* Affichage du cercle nommé 'cercle' sur la carte nommée 'MaCarte' */
MaCarte.addOverlay(cercle);
}
</script>
3 messages
• Page 1 sur 1
Formation recommandée sur ce thème :
Formation Google Maps, Google News et Google Images : apprenez comment optimiser le référencement de votre site pour la recherche universelle et notamment Google Maps, Google Actualités et Google Images. Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
- Référencement d'un site en frames - 04-08-2008
- Google teste la recherche locale (Google Search by Location) - 23-09-2003
- Optimiser le référencement de son site dans une zone géographique précise - 31-10-2007
- Yahoo va ouvrir un data center à Avenches en Suisse - 08-10-2007
- Nouvelle version de GoogleStats : v1.1 - 03-01-2003
- Prise en compte de la mise en page HTML par les moteurs de recherche - 15-03-2008
- WebRankInfo interroge Google sur AdSense - 18-04-2004
- Google Toolbar v2.0 - 25-06-2003
Consultez la description détaillée des produits ou services de Google suivants : Google Image Labeler
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité
