Wie Sie Bilder hinzufügen, auf Karte mit leaflet und Javascript

Ich bin auf der Suche nach einer Möglichkeit, hinzufügen von Bildern zu einem 'Merkblatt Karte' mit Javascript.

Was ich will zu tun ist, um Last-image, passen Sie seine Größe und position, und befestigen Sie es an einem leaflet-Karte.

  • Willkommen ALSO hier an, DAMIT wir Ihnen helfen, reparieren Sie Ihre 'versuche'. Bitte beschreiben Sie, was Sie bisher war, wo Sie stecken etc, damit jemand der dir helfen kann. Möchten Sie wissen, wie zu Fragen, ist eine gute Frage? Folgen Sie dieser Anleitung: stackoverflow.com/help/how-to-ask
  • Ist es das, was du suchst? stackoverflow.com/a/10628079/2441511
InformationsquelleAutor jc k | 2017-01-06
  1. 8

    Hier ist eine einfache demo, die zeigt, wie fügen Sie ein Bild mit imageOverlay.

    Passen Sie die position und Größe des Bildes, indem imageBounds

    JS:

    //center of the map
var center = [-33.8650, 151.2094];

//Create the map
var map = L.map('map').setView(center, 5);

//Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);

//add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

    CSS:

    html,
body {
  height: 100%;
}
#map {
  height: 100%;
}

    HTML:

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">

<div id="map"></div>

    InformationsquelleAutor user2314737
Schreibe einen Kommentar