Fatal编程技术网
  • javascript/
  • Javascript 向传单添加自定义图像-图像不显示？

Javascript 向传单添加自定义图像-图像不显示？

javascript leaflet

Javascript 向传单添加自定义图像-图像不显示？,javascript,leaflet,Javascript,Leaflet,我正在尝试将图像添加到传单中的自定义标记，但我的图像没有显示在地图上 如果有人能看一下我下面的javascript代码，并提出我需要修改的地方，我将不胜感激 非常感谢 <!DOCTYPE html> <html> <head> <title>Custom image</title> <meta charset="utf-8" /> <meta name="viewport"

我正在尝试将图像添加到传单中的自定义标记，但我的图像没有显示在地图上

如果有人能看一下我下面的javascript代码，并提出我需要修改的地方，我将不胜感激

非常感谢

<!DOCTYPE html>

<html>
<head>


<title>Custom image</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    #map {
        width: 600px;
        height: 400px;
    }
</style>


自定义图像
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：600px；
高度：400px；
}


var map=L.map（'map'）.setView（[51.5，-0.09]，13）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var customicon=L.Icon.extend({
选项：{
伊克努尔：'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg',
iconSize:[38,95]，
iconAnchor:[22,94]，
popupAnchor:[-3，-76]
}
}).addTo（地图）；
var customicon2=L.Icon.extend({
选项：{
伊克努尔：'https://th.bing.com/th/id/R27dd55e9cf8e8da143fecd97ce458971?rik=KfMXOxgXTz4Ucw&pid=ImgRaw',
iconSize:[38,95]，
iconAnchor:[23,95]，
弹出锚：[-3.5，-78]
}
}).addTo（地图）；
传单图标本身不做任何事情

您必须将它们作为传单标记的
图标
选项馈送，如中所示

L.marker（[51.5，-0.09]{
图标：绿色图标
}).addTo（地图）；
解决方法如下：

<!DOCTYPE html>
<html>
<head>
    
    <title>Prenton Park</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    
</head>
<body>

<div id='map'></div>

<script>
    var map = L.map('map').setView([53.375, -3.03], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var pp_icon = L.Icon.extend({
        options: {
//          shadowUrl: 'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });

    var prenton_park = new pp_icon({iconUrl: 'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg'});

    L.marker([53.375, -3.03], {icon: prenton_park}).bindPopup("I am Prenton Park.").addTo(map);

</script>



</body>
</html>


普伦顿公园球场
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：600px；
高度：400px；
}
var map=L.map（'map'）.setView（[53.375，-3.03]，13）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var pp_icon=L.icon.extend({
选项：{
//shadowUrl:'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg',
iconSize:[38,95]，
阴影大小：[50,64]，
iconAnchor:[22,94]，
暗影主播：[4,62]，
popupAnchor:[-3，-76]
}
});
var prenton_park=新的pp_图标（{iconUrl:'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg'});
L.marker（[53.375，-3.03]，{icon:prenton_park}）.bindpoop（“我是prenton park”）.addTo（地图）；
Do read.全部排序，谢谢：）全部排序，谢谢：） 
<!DOCTYPE html>
<html>
<head>
    
    <title>Prenton Park</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    
</head>
<body>

<div id='map'></div>

<script>
    var map = L.map('map').setView([53.375, -3.03], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var pp_icon = L.Icon.extend({
        options: {
//          shadowUrl: 'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });

    var prenton_park = new pp_icon({iconUrl: 'https://i.ytimg.com/vi/yek0JUpIDd4/maxresdefault.jpg'});

    L.marker([53.375, -3.03], {icon: prenton_park}).bindPopup("I am Prenton Park.").addTo(map);

</script>



</body>
</html>