这是我的问题。我有一个由.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'));
}
答案 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文件中的结果)