Google商店定位器中的多个标记颜色(由.csv填充)

时间:2015-12-17 16:44:33

标签: javascript google-maps csv store

这是我的问题。我有一个由.csv文件填充的商店定位器。目前,地图上的所有标记都是相同的颜色,它们都具有相同的infoWindow html(相同的HTML,但内容不同)。

我想在同一张地图上添加几个商店,但这些商店'标记需要具有不同的颜色,而infoWindow的内容需要有所不同。

到目前为止我做了什么: 在我的.csv文件中,我添加了一个新列。如果此列中的值为" oui",则此商店需要不同。 我使用以下代码成功更改了这些商店的infoWindow内容:

if(String(csv[i][22]).toLowerCase() == "oui")

但我还没有发现如何用标记做类似的事情。似乎所有的标记都是立即创建的......任何人都可以提供帮助吗?谢谢!

这是我的代码

var host = location.protocol + "//" + location.host;
var markerSrc = host + '/_media/image/signet.png';
var markerWidth = 34;
var markerHeight = 49;
var initLatitude = 45.920587;
var initLongitude = -72.729492;
var initZoom = 7;
var listIcon = [{
    img: "/_media/image/iconCarte1.png",
    link: "/reparation-pare-brise",
    title: "Réparation & remplacement de pare-brise"
}, {
    img: "/_media/image/iconCarte2.png",
    link: "/accessoires-auto/attaches-remorque",
    title: "Attaches de remorque"
}, {
    img: "/_media/image/iconCarte3.png",
    link: "/accessoires-auto/supports-auto-varies",
    title: "Supports variés"
}, {
    img: "/_media/image/iconCarte4.png",
    link: "/accessoires-auto/marquage-antivol",
    title: "Marquage antivol"
}, {
    img: "/_media/image/iconCarte5.png",
    link: "/accessoires-auto/demarreurs-a-distance",
    title: "Démarreurs à distance"
}, {
    img: "/_media/image/iconCarte6.png",
    link: "/accessoires-auto/sellettes",
    title: "Sellettes"
}, {
    img: "/_media/image/iconCarte7.png",
    link: "/accessoires-auto/couvre-caisses-repliables",
    title: "Couvre-caisses repliables"
}, {
    img: "/_media/image/iconCarte8.png",
    link: "/accessoires-auto/vitres-teintees",
    title: "Vitres teintées"
}];
$(function() {
    initGoogleMap();
    initStoreLocator(gCsvData);
});

function watermark(field, text) {
    var o = $(field);
    o.bind("focus", function() {
        if (o.val() == text) {
            o.val("");
            o.removeClass("placeholder");
        }
    });
    o.bind("blur", function() {
        if (o.val() == "") {
            o.val(text);
            o.addClass("placeholder");
        }
    });
    o.trigger("blur");
}
var positionDepart;
var positionArrivee;

function initGoogleMap() {
    var defaultViewCenter = new google.maps.LatLng(initLatitude, initLongitude);
    var mapOptions = {
        center: defaultViewCenter,
        zoom: initZoom,
        draggableCursor: 'default',
        draggingCursor: 'pointer',
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map($(".mapCanvas")[0], mapOptions);
    marker = new google.maps.Marker({
        position: defaultViewCenter,
        map: map,
        visible: false
    });
}

function initStoreLocator(csvData) {
    var stores = toStores(csvData);
    var dataFeed = new storeLocator.StaticDataFeed();
    dataFeed.setStores(stores);
    var pointerImage = new google.maps.MarkerImage(markerSrc, new google.maps.Size(markerWidth, markerHeight), new google.maps.Point(0, 0), new google.maps.Point(markerWidth / 2, markerHeight));
    var view = new storeLocator.View(map, dataFeed, {
        markerIcon: pointerImage
    });
    var container = $(".mapPanel")[0];
    var panel = new storeLocator.Panel(container, {
        view: view,
        directions: true,
        locationSearchLabel: dict[language].titre
    });
    google.maps.event.addListener(panel, 'geocode', function(result) {
        positionDepart = result.geometry.location;
        marker.setPosition(positionDepart);
        map.setZoom(10);
    });
    google.maps.event.addListener(view, 'selectedStore_changed', function(store) {
        if (store !== null) {
            positionArrivee = store.getLocation();
        }
    });
    google.maps.event.addListenerOnce(map, 'idle', function() {
        var searchValue = urldecode(location.hash).substr(1);
        if (searchValue !== "") $('.location-search').find('input').val(searchValue).focus().submit();
        watermark('.location-search input', "Inscrivez votre code postal");
    });
}

function toStores(csv) {
    var stores = [];
    for (var i = 0; i < csv.length; i++) {
        var l = listIcon.length;
        var misc = "";
        for (j = 0; j < l; j++) {
            if (csv[i][10 + j].toLowerCase() == "oui")
                misc += "<a title='" + listIcon[j].title + "' href='" + listIcon[j].link + "'><img src='" + listIcon[j].img + "' alt='icon" + j + "' /></a>";
        }
        var position = new google.maps.LatLng(csv[i][0], csv[i][1]);
        if(String(csv[i][22]).toLowerCase() == "oui"){
            var store = new storeLocator.Store("store" + i, position, null, {
                title: '<div class="city">' + csv[i][2] + '</div><div class="titre">' + csv[i][4] + '</div>',
                address: csv[i][5] + '<br />' + csv[i][6] + '<br />' + csv[i][7],
                phone: csv[i][8] + '<span><br />' + csv[i][9] + '<br />' + csv[i][10],
                misc: csv[i][12] + '</span>',
                web: ""
            });
        }
        else{
            var store = new storeLocator.Store("store" + i, position, null, {
                title: '<div class="city">' + csv[i][2] + '</div><div class="logo"><img src="' + csv[i][3] + '" alt="' + csv[i][4] + '"/></div><div class="titre">' + csv[i][4] + '</div>',
                address: csv[i][5] + '<br />' + csv[i][6] + '<br />' + csv[i][7],
                phone: csv[i][8] + '<span><br />' + csv[i][9] + '<br />' + csv[i][10],
                misc: csv[i][12] + '</span>',
                web: "<a href='" + csv[i][11] + "' class='plusinfos'></a>"
            });
        }

        stores.push(store);
    }
    return stores;
}

function printMap() {
    if (typeof positionArrivee !== "undefined" && typeof positionDepart !== "undefined") {
        var lat = (map.getCenter().lat());
        var latQ = (lat < 0) ? Math.abs(lat) + "S" : lat + "N";
        var lng = (map.getCenter().lng());
        var lngQ = (lng < 0) ? Math.abs(lng) + "W" : lng + "E";
        var zoom = (map.getZoom());
        var span = 180 / (Math.pow(2, zoom));
        var link = "http://maps.google.com/maps?";
        link += "saddr=" + positionDepart;
        link += "&daddr=" + positionArrivee;
        link += "&hl=" + language;
        link += "&t=m&pw=2";
        link += "&ll=" + lat + "," + lng;
        link += "&z=" + zoom;
        link += "&spn=" + span + "," + span;
        window.open(link, "_blank");
    }
}

function urldecode(str) {
    return decodeURIComponent((str + '').replace(/\+/g, '%20'));
}

1 个答案:

答案 0 :(得分:0)

我自己找到了一个解决方案,这里是:

在storeLocator缩小代码中: 函数ba(a)需要看起来像是接受b对象中的新参数

for (var b = ["title", "address", "phone", "misc", "web", "special"], c = [], e = 0, i = b[B]; e < i; e++) 

然后,在J.addStoreToMap中,检查新添加的值并根据需要更改标记

if(!a.b.special)
            b.icon.url = "/_media/image/signet2.png";

在toStores函数中为我的对象添加一个新参数(布尔值,基于.csv文件中的结果)