如何使用传单和Javascript在地图上添加图像 [英] How to add images on map using leaflet and Javascript
本文介绍了如何使用传单和Javascript在地图上添加图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种使用Java脚本将图像添加到传单地图"的方法.
I am looking for a way to add images to a 'leaflet map' using Javascript.
我要做的是加载图像,调整图像的大小和位置,并将其附加到传单地图上.
What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.
推荐答案
下面是一个基本演示,展示了如何使用imageOverlay
.
Here's a basic demo showing how to add an image using 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在地图上添加图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文