Question

我正在寻找一种使用Javascript将图像添加到'传单地图'的方法。

我想要做的是加载图像，调整图像的大小和位置，并将其附加到传单地图上。

Answer 1

这是一个基本演示，演示如何使用imageOverlay添加图像。

通过提供imageBounds

来调整图像的位置和大小

// 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);

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

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">

<div id="map"></div>

如何使用传单和Javascript在地图上添加图像

1 个答案: