Question

您好，我试图在传单中添加自定义图标我用json信息和html创建var位置生成此代码

<script type="text/javascript">

        function fc_MapMod_initialize_99()
        {
            var locations = [ ['<h4 class="fleximaptitle">[copy] test feature</h4><p>Marseille, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=11&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Marseille,+France&ftid=0x12c9bf4344da5333:0x40819a5fd970220" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',43.296482,5.36978,'http://localhost/flexi-dev/\images/icons-map/army.png']
,['<h4 class="fleximaptitle">[copy] test feature</h4><p>Paris, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=12&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Paris,+France&ftid=0x47e66e1f06e2b70f:0x40b82c3688c9460" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',48.856614,2.3522219,'http://localhost/flexi-dev/\images/icons-map/accesdenied.png']
,['<h4 class="fleximaptitle">NY test feature</h4><p>New York, État de New York, États-Unis</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=13&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=New+York,+%C3%89tat+de+New+York,+%C3%89tats-Unis&ftid=0x89c24fa5d33f083b:0xc80b8f06e177fe62" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',40.7127753,-74.0059728,'http://localhost/flexi-dev/\images/icons-map/air_fixwing.png']
,['<h4 class="fleximaptitle">test feature</h4><p>82 Rue de Fenouillet, 31200 Toulouse, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=3&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=82+Rue+de+Fenouillet,+31200+Toulouse,+France&ftid=0x12aea4ca3e8f6c0b:0x26677de5987f1b9a" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',43.6320424,1.4229078,'http://localhost/flexi-dev/\images/banners/osmbanner1.png']
,['<h4 class="fleximaptitle">tokyo [copy] test feature</h4><p>Tokyo, Japon</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=10&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Tokyo,+Japon&ftid=0x60188b857628235d:0xcdd8aef709a2b520" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',35.6803997,139.7690174,'http://localhost/flexi-dev/\images/icons-map/bats.png']
  ];

            var markerClusters;
            var markers = [];

            var lat = 48.852969;
            var lon = 2.349903;

            theMap_99 = L.map('fc_module_map_99').setView([lat, lon], 11);
            markerClusters = L.markerClusterGroup({ disableClusteringAtZoom: 15,removeOutsideVisibleBounds:true,animate:true, maxClusterRadius :50 });          // Title display
            L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
            {
                // Datas sources
                attribution: 'OPENSTREETMAP_ATTRIBUTION_TXT',
                minZoom: 1,
                maxZoom: 15         })
            .addTo(theMap_99);

            var customMarkerIcons = [];
            var iconCounter = 0;

            customMarkerIcons[0] = L.icon({
                iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
                iconSize: [40, 67],
                iconAnchor: [25, 67],
                popupAnchor: [-3, -67]
            });

            for (var i = 0; i < locations.length; i++)
            {

                marker = new L.marker(
                    [locations[i][1],
                    locations[i][2]]
                    iconUrl:locations[i][3]             )
                    .bindPopup(locations[i][0])

                markerClusters.addLayer(marker);                markers.push(marker);

                // We only have a limited number of possible icon colors, so rewind icon index when icons finish
                iconCounter = iconCounter >= customMarkerIcons.length ? 0 : iconCounter + 1;
            }
            var group = new L.featureGroup(markers);

            theMap_99.addLayer(markerClusters);
            theMap_99.fitBounds(group.getBounds().pad(0.5));
        }

        // Initialize the Map
        fc_MapMod_initialize_99();
    </script>

但是我的显示屏上没有自定义图标我不明白为什么{icon：locations [i] [3]}拒绝返回图片谢谢你的帮助

编辑：我加注我的代码，但出现此错误

customMarkerIcons[0] = L.icon({
                iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
                iconSize: [40, 67],
                iconAnchor: [25, 67], => Uncaught SyntaxError: missing ) after argument list

带有传单的json中的自定义图标

0 个答案: