|
| Afficher des cercles sur champ carte |
| Débuté par NoName, 11 oct. 2017 15:40 - 7 réponses |
| |
| | | |
|
| |
Posté le 11 octobre 2017 - 15:40 |
Bonjour.
Pour nos besoins nous imprimons a partir de l'adresse de nos employés une carte mettant en évidence différents périmètres à partir de chez lui.
J'essaye d'utiliser le champ carte jusqu'ici sans succès.
Après avoir regarder des tutos de l'api google map pour créer les cercles, j'ai essayé de l'appliquer a mon projet.
Voici un code d'exemple js fonctionnel trouvé sur un tuto :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Carte des cercles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
#EmplacementDeMaCarte {
height: 100%
}
</style>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
<script>
function initialisation(){
var optionsCarte = {
zoom: 9,
center: new google.maps.LatLng(47.389982, 0.688877)
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 5000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 10000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 20000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 30000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 40000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 50000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 65000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0.1,
radius: 80000
}
var monCercle = new google.maps.Circle(optionsCercle);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js…"></script>
</body>
</html>
A partir de la j'essaye de l'appliquer a mon champ carte, voici ce que j'utilise :
sChaineHTML est une chaîne = [
function initialisation(){
var m = CarteRécupèreObjetJS();
var optionsCarte = {
zoom: 9,
center: new google.maps.LatLng(%1,%2)
}
var maCarte = new google.maps.Map(document.getElementById("m"), optionsCarte);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 5000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 10000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 20000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 30000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 40000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 50000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0,
radius: 65000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
fillOpacity: 0.1,
radius: 80000
}
var monCercle = new google.maps.Circle(optionsCercle);
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MACLE&callback=initialisation"></script>
]
sChaineHTML = ChaîneConstruit(sChaineHTML,SAI_Latitude,SAI_Longitude)
CarteExécuteJS(CARTE_Cercle,sChaineHTML)
Ca plante sur la dernière ligne et donc l’exécution de la balise script.
J'ai bien essayer d'enlever la partie script pour relancer un CarteExécuteJS avec juste la partie interne de cette balise script mais sans succès.
Avez-vous une idée ? |
| |
| |
| | | |
|
| | |
| |
Posté le 11 octobre 2017 - 17:53 |
| |
| |
| | | |
|
| | |
| |
Posté le 12 octobre 2017 - 10:41 |
Merci pour la réponse mais j'avais volontairement remplacé ma vrai clé par la valeur MACLE pour ne pas que ma clé soit utilisé n'importe ou 
Je vois que CarteExecuteJs permet d’exécuter le code que l'ont trouve dans des balises <script></script> Or dans mon cas j'utilise 2 de ces balises.
La première pour déclarer la fonction Initialisation dans laquelle je créé mes cercles. Et la deuxième pour ré-afficher la carte avec cette fonction en paramètre.
Ça plante systématiquement au niveau du second script. |
| |
| |
| | | |
|
| | |
| |
Membre enregistré
68 messages
Popularité : +2 (2 votes) |
|
Posté le 16 octobre 2017 - 11:43 |
Aucune piste ?
La gestion des marqueurs est facilité par les fonctions windev mais pour dessiner un cercle ça semble être une autre paire de manches. |
| |
| |
| | | |
|
| | |
| |
Membre enregistré
940 messages
Popularité : +66 (68 votes) |
|
Posté le 16 octobre 2017 - 12:17 |
bonjour NoName,
ce code fonctionne chez moi, cela dessine deux cercles,
soit sCode = [
var LatLng = new google.maps.LatLng(44.8817329,-0.42851999999993495);
CarteRécupèreObjetJS().panTo(LatLng);
CarteRécupèreObjetJS().setZoom(10);
var m = CarteRécupèreObjetJS();
var optionsCercle = {
map: m,
center: m.getCenter(),
strokeColor: '#FF0000',
fillOpacity: 0,
radius: 5000
}
var monCercle = new google.maps.Circle(optionsCercle);
var optionsCercle = {
map: m,
center: m.getCenter(),
strokeColor: '#AE0000',
fillOpacity: 0,
radius: 10000
}
var monCercle = new google.maps.Circle(optionsCercle);
]
CarteExécuteJS(Carte1, sCode)
bon dèv |
| |
| |
| | | |
|
| | |
| |
Membre enregistré
68 messages
Popularité : +2 (2 votes) |
|
Posté le 17 octobre 2017 - 08:46 |
Merci, c'est parfait.
En fait y a juste pas besoin de déclarer la fonction mais de mettre le contenu de celle ci dans le code a exécuter. |
| |
| |
| | | |
|
| | |
| |
Posté le 17 octobre 2017 - 10:47 |
Bonjour,
J'ai ce code ci-dessous sous google.
je souhaite tracer des traites entre des points.
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
Pour mettre cela en place,
J'ai fais ceci
soit sCode = [
var flightPlanCoordinates =%1
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
%2;
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
]
sCode=ChaîneConstruit(sCode,"[","]")
tabPosition est un tableau de géoPositions
maposition est une geoPosition
maposition.Latitude=37.772
maposition.Longitude=-122.214
Ajoute(tabPosition,maposition)
maposition.Latitude=21.291
maposition.Longitude=-157.821
Ajoute(tabPosition,maposition)
maposition.Latitude=-18.142
maposition.Longitude=178.431
Ajoute(tabPosition,maposition)
maposition.Latitude=-27.467
maposition.Longitude=153.027
Ajoute(tabPosition,maposition)
CarteExécuteJS(CARTE_Exemple, sCode)
Avez vous essayer un truc de ce genre. En fait j'ai des points que je joindresur ma carte (itinéraire), mais manuellement.
Par exemple, juste un trait entre Paris et Montpellier.
Voici le lien JS : https://developers.google.com/maps/documentation/javascript/examples/polyline-simple…
BAV |
| |
| |
| | | |
|
| | |
| |
Posté le 20 octobre 2017 - 18:18 |
| |
| |
| | | |
|
| | | | |
| | |
|