Javascript Girl
  1. Javascript Girl
  3. Format GeoJson LineString to Cart
Intereting Posts
Angulaire: Accédez à la valeur de la ressource dans le contrôleur Comment empêcher le navigateur d'invoquer l'authentification authentique de base et gérer l'erreur 401 en utilisant Jquery? JQGrid met à jour plusieurs lignes à la fois, puis enregistrez Activer l'événement onclick avec CTRL pressé Créer des éléments ul et li en javascript. Jquery Erreur de syntaxe, expression non reconnue: Comment puis-je masquer un élément HTML avant la chargement de la page? Impossible d'afficher les données correctes dans le tableau -AngularJS Créer un événement personnalisé JavaScript Qu'est-ce que des sites Web comme YouTube utilisent pour changer l'URL sans avoir recours à la popstate ou avant la charge? L'onglet actif de réglage de Twitter bootstrap 3 dans js ne fonctionne pas Comment autoriser la sélection de texte d'un DIV, mais empêcher la sélection de texte du père DIV? Étendez le bootstrap-typeahead pour prendre un objet au lieu d'une chaîne Obtenez une couleur de pixel à partir d'une image Comment répéter les espaces

Format GeoJson LineString to Cart

C'est mon GeoJson: 

{ "type" : "FeatureCollection", "created" : "2014/07/08 03:00:55 GMT", "announced_date" : "2017/07/10 03:00:55 GMT", "features" : [{ "type" : "Feature", "properties" : { "name" : "n18", "analized_date" : "2013/07/08 10:00:00 GMT" }, "geometry" : { "type" : "GeometryCollection", "geometries" : [{ "type" : "Point", "coordinates" : [134.7, 37.3] }, { "type" : "LineString", "coordinates" : [[134.7, 37.3], [134.6, 37.1]] } ] } }] }

Je peux l'afficher en ligne normale, mais je veux afficher en ligne pointillée. Je google et il y a un moyen: utiliser Polyline mais je ne sais pas comment le convertir en Polyline.

Aidez-nous. Je vous remercie 🙂 .

Pour rendre la ligne poly droite, vous devez créer un objet natif google.maps.Polyline . Une façon de le faire est d'utiliser la couche de données pour charger GeoJSON, puis utiliser ses méthodes pour créer la polyligne à partir du GeoJSON:

extrait de code: 

 function initialize() { // Create a simple map. map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 8, center: { lat: 37, lng: 134 } }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // process the loaded GeoJSON data. google.maps.event.addListener(map.data, 'addfeature', function(e) { if (e.feature.getGeometry().getType() === 'GeometryCollection') { var geometry = e.feature.getGeometry().getArray(); for (var i = 0; i < geometry.length; i++) { if (geometry[i].getType() === 'Point') { map.setCenter(geometry[i].get()); new google.maps.Marker({ map: map, position: geometry[i].get() }); } else if (geometry[i].getType() === 'LineString') { new google.maps.Polyline({ map: map, path: geometry[i].getArray(), // make the polyline dashed. From the example in the documentation: // https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }] }) } } } map.data.setMap(null); }); map.data.addGeoJson(data); } google.maps.event.addDomListener(window, 'load', initialize); var data = { "type" : "FeatureCollection", "created" : "2014/07/08 03:00:55 GMT", "announced_date" : "2017/07/10 03:00:55 GMT", "features" : [{ "type" : "Feature", "properties" : { "name" : "n18", "analized_date" : "2013/07/08 10:00:00 GMT" }, "geometry" : { "type" : "GeometryCollection", "geometries" : [{ "type" : "Point", "coordinates" : [134.7, 37.3] }, { "type" : "LineString", "coordinates" : [[134.7, 37.3], [134.6, 37.1]] } ] } }] }; 
 html, body { height: 100%; margin: 0px; padding: 0px; width: 100%; } #map-canvas { height: 100%; width: 100%; } 
 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>