如何在传单地图上添加更多标记

时间:2019-06-06 05:25:01

标签: javascript jquery laravel leaflet maps

我想添加一个地址数组,并将其转换为坐标,并为每个坐标创建标记,然后将其添加到地图,尝试迭代循环,但是它不起作用,您能帮我吗?这里的代码:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

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

var planes = [
    ["Prolongación de Xicoténcatl, 68120 Oaxaca de Juárez, MX"],
    ["Av Belisario Domínguez 428, 68050 Oaxaca de Juárez, MX"],
    ["C820B6"]
];
for (var i = 0; i < planes.length; i++) {

    planes[i]=provider.search({
        query: planes[i]
    });
}

for (i = 0; i < value.length; i++) {
    query.then(value => {
        for (i = 0; i < value.length; i++) {
            // Success!
            var x_coor = value[i].x;
            var y_coor = value[i].y;
            var label = value[i].label;
            var marker = L.marker([y_coor, x_coor]).addTo(map).on('click', markerOnClick); 
            marker.bindPopup("<b>Found location</b><br>" + label).openPopup(); // note the "openPopup()" method. It only works on the marker
        };
    }, reason => {
        console.log(reason); // Error!
    });
}

此脚本可以使用一个标记:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

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

var query_addr = "Prolongación de Xicoténcatl 1031, 68120 , MX";

const provider = new window.GeoSearch.OpenStreetMapProvider();
var query_promise = provider.search({
    query: query_addr
});


query_promise.then(value => {
    for (i = 0; i < value.length; i++) {
        // Success!
        var x_coor = value[i].x;
        var y_coor = value[i].y;
        var label = value[i].label;
        var marker = L.marker([y_coor, x_coor]).addTo(map) 
        marker.bindPopup("<b>Found location</b><br>" + label).openPopup();     };
    }, reason => {
        console.log(reason); 
    }
);

我是JS和Laravel的新手,我是编程的新手,我真的很喜欢学习。请您支持我,我会非常感激,我发现它有趣jaavscript

1 个答案:

答案 0 :(得分:1)

以防万一您找不到解决方案,我和您有同样的问题。只需将const provider更改为var provider

所以它会导致如下结果:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

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

var query_addr = "Prolongación de Xicoténcatl 1031, 68120 , MX";

var provider = new window.GeoSearch.OpenStreetMapProvider();
var query_promise = provider.search({
    query: query_addr
});


query_promise.then(value => {
    for (i = 0; i < value.length; i++) {
        // Success!
        var x_coor = value[i].x;
        var y_coor = value[i].y;
        var label = value[i].label;
        var marker = L.marker([y_coor, x_coor]).addTo(map) 
        marker.bindPopup("<b>Found location</b><br>" + label).openPopup();     };
    }, reason => {
        console.log(reason); 
    }
);