更改html中的自定义传单标记

change custom Leaflet markers in html

本文关键字：单标记 自定义 html 更改      更新时间：2023-09-26

我是网络地图和传单开发的初学者。。。我发现了一个简单但有用的代码，我想知道如何用mylocal.png（或.svg）交换下面HTML代码中的所有传单标记。提前感谢您的反馈！！！祝所有度过美好的一天

<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://cdn.rawgit.com/tyrasd/osmtogeojson/2.2.5/osmtogeojson.js"></script>
<script>
var api = 'http://overpass-api.de/api/interpreter';
var query = 'area["place"="city"]["name"="Cluj-Napoca"];node[amenity=cafe](area);out;';
var map = L.map('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);
$.get(api, {data: query}, function(resp) {
  var geojson = osmtogeojson(resp);
  var layer = L.geoJson(geojson).addTo(map);
  map.fitBounds(layer.getBounds());
  });
</script>

默认情况下，使用L.GeoJSON时，GeoJSON数据中的每个点都会变成默认的L.Marker。您可以使用L.GeoJSON的pointToLayer选项返回带有使用您的图像的L.Icon的自定义L.Marker。

new L.GeoJSON(data {
    pointToLayer: function (feature, latlng) {
        return new L.Marker(latlng, {
            icon: new L.Icon({
                iconUrl: 'leaf-green.png',
                shadowUrl: 'leaf-shadow.png',
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            })
        });
    }
}).addTo(map);
  • L.GeoJSON教程：http://leafletjs.com/examples/geojson.html
  • 自定义图标教程：http://leafletjs.com/examples/custom-icons.html

试试这个：

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png', // url to your custome icon

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

然后把这个放在地图上初始化

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

就是这样。

相关文章：