OpenStreetMap: carte intégration en page (comme Google Maps)

StackOverflow https://stackoverflow.com/questions/925164

Question

Y at-il un moyen d'intégrer / mashup OpenStreetMap dans votre page (comme la façon dont API Google Maps travaux)?

Je dois montrer une carte dans ma page avec quelques marqueurs et permettent glisser / zoom autour, le routage peut-être. Je pense qu'il y aurait une API Javascript pour cela, mais je ne peux pas sembler trouver.

Recherche me fait pour l'accès aux données cartographiques brutes , mais qui semble être plus pour l'édition de la carte; En outre, en collaboration avec ce serait une lourde tâche pour AJAX.

Était-ce utile?

La solution

Vous devez utiliser des trucs JavaScript pour montrer votre carte. OpenLayers est le choix numéro un pour cela.

Il est un exemple à http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example et quelque chose de plus avancé à

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

et

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Autres conseils

Il y a maintenant Brochure , qui est construit avec les appareils mobiles à l'esprit.

Il y a un Guide de démarrage rapide pour la notice. Outre les fonctions de base telles que des marqueurs, des plug-ins, il prend également en charge routage utilisant un service externe.

Pour une simple carte, il est à mon humble avis plus facile et plus rapide à mettre en place que OpenLayers, mais entièrement configurable et tweakable pour des utilisations plus complexes.

Simple OSM Slippy Map Demo / Exemple

Cliquez sur « extrait de code Run » pour voir un OpenStreetMap intégré carte slippy avec un marqueur sur elle. Il a été créé avec Brochure .

code 

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Caractéristiques

  • Utilise OpenStreetMap.
  • Centres la carte du GPS cible.
  • place un marqueur sur le GPS cible.

Remarque:

J'ai utilisé la version CDN de Brochure , mais vous pouvez

Jetez un oeil à Mapstraction . Cela peut vous donner plus de flexibilité pour fournir des cartes basées sur google, osm, Yahoo, etc mais votre code ne sera pas changer.

Je prendrais aussi un oeil à outils de développement de CloudMade . Ils offrent un service de carte de base de l'OSM magnifiquement style, un plugin OpenLayers, et même leur propre poids léger, client de cartographie JavaScript très rapide. Ils accueillent également leur propre service de routage dont vous avez parlé comme condition possible. Ils ont une grande documentation et des exemples.

Vous pouvez utiliser OpenLayers (js API pour les cartes).

Il y a un exemple sur leur page montrant comment intégrer OSM tuiles.

Si vous voulez juste intégrer une carte OSM sur une page Web, la meilleure façon est d'obtenir le code iframe directement à partir du site de l'OSM:

  1. Accédez à la carte que vous voulez sur https://www.openstreetmap.org
  2. Sur le côté droit, cliquez sur l'option « Partager » icône, puis cliquez sur « HTML »
  3. Copiez le code iframe résultant directement dans votre page Web. Il devrait ressembler à ceci: 

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

Si vous voulez faire quelque chose de plus complexe, voir wiki OSM « Déploiement de votre propre Slippy Carte ».

Il est moyen simple de le faire si vous craignez Javascript ... Je suis encore à apprendre. Open Street fait un plugin Wordpress simple que vous pouvez personnaliser. Ajouter le plugin OSM Widget.

Ce sera une charge jusqu'à ce que je figure mon Python Java concotion en utilisant les fichiers de ligne coverter TIGER du Bureau du recensement.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top