我目前正在使用部分视图，使用Umbraco 7加载Google地图和大量信息。
我要做的是在“infoWindow”（代码的底部功能）Google API弹出窗口（标记弹出信息）中加载项目图像。
我尝试了很多不同的方法，但似乎无法获得图像。我能在不破坏事物的情况下获得的最远的是获取图像ID。我一直无法拆分或输出任何东西。
我尝试了以下内容：
var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);
我收到此错误：
Compiler Error Message: CS1976: Cannot use 'Parse' as an argument to a dynamically dispatched operation because it is a method group. Did you intend to invoke the method?
var mediaItem = portfolioItem.GetPropertyValue("images");
这是我用来获取图片ID的行，但每次我尝试拆分它们并输出任何我收到错误的行。
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<link rel="stylesheet" type="text/css" href="/css/Portfolio.css"/>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [];
var map;
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
function initialize() {
var geocoder = new google.maps.Geocoder();
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(32.1288162,-13.2088774),
zoom: 3,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(map_canvas, map_options)
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
@{
int i = 0;
foreach (var portfolioItem in CurrentPage.Descendants("PortfolioItem").OrderBy("Name"))
{
i++;
var url = "";
int port = HttpContext.Current.Request.Url.Port;
url = "http://" + HttpContext.Current.Request.Url.Host;
if (port != 80)
{
url += ":" + port;
}
if (!String.IsNullOrEmpty(portfolioItem.technology))
{
url += "/images/portfolio/" + portfolioItem.technology.ToString().ToLower().Split(new char[] { ',' })[0] + ".png";
}
else
{
url += "/images/portfolio/windmarker.png";
}
var description = portfolioItem.shortDescription.ToString().Replace("'", "'");
var name = portfolioItem.Name.ToString().Replace("'", "'");
var mediaItem = portfolioItem.GetPropertyValue("images");
var location = portfolioItem.Location.ToString().Replace("'", "'");
var mw = "";
if (portfolioItem.HasValue("totalExpectedInstalledCapacity")) { mw = portfolioItem.totalExpectedInstalledCapacity; }
if (portfolioItem.HasValue("totalInstalledCapacity")) { mw = portfolioItem.totalInstalledCapacity; }
if (portfolioItem.HasValue("capacity")) { mw = portfolioItem.capacity; }
@Html.Raw("var marker" + i + " = new google.maps.Marker({");
@Html.Raw(" position: new google.maps.LatLng(" + portfolioItem.latitude + "," + portfolioItem.longitude + "),");
@Html.Raw(" map: map,");
@Html.Raw(" title: '" + portfolioItem.Name.Replace("'", "'") + "',");
@Html.Raw(" icon: { ");
/* Change based on technology */
@Html.Raw(" url: '" + url + "'");
@Html.Raw(" }");
@Html.Raw("});");
@Html.Raw("google.maps.event.addDomListener(document.getElementById('marker" + i + "'), 'click', function(ev) {map.setCenter(marker" + i + ".getPosition());});");
@Html.Raw("marker" + i + ".phase = '" + portfolioItem.phase + "';");
@Html.Raw("marker" + i + ".date = '" + ((DateTime)portfolioItem.date).Year + "';");
@Html.Raw("marker" + i + ".country = '" + portfolioItem.Parent.Name + "';");
@Html.Raw("marker" + i + ".technology = '" + portfolioItem.technology + "';");
@Html.Raw("google.maps.event.addListener(marker" + i + ", 'click', function() {");
@Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
@Html.Raw("});");
@Html.Raw("$('#marker" + i + "').on('click', function() {");
@Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
@Html.Raw("});");
@Html.Raw("marker" + i + ".setVisible(true);");
@Html.Raw("markers.push(marker" + i + ");");
}
}
filterMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
selectAll = function(selected, type)
{
$(type + ' input').prop('checked', selected);
filterMarkers();
}
filterMarkers = function()
{
var phases = [];
var countries = [];
var technologies = [];
var date_start = '';
var date_end = '';
$("#phase input:checked").each(function(index, elem){
phases.push($(this).val());
});
$("#country input:checked").each(function(index, elem){
countries.push($(this).val());
});
$("#technology input:checked").each(function(index, elem){
technologies.push($(this).val());
});
date_start = $("#datestart option:selected").val();
date_end = $("#dateend option:selected").val();
for (i = 0; i < markers.length; i++) {
var marker = markers[i];
var phasetrue = false;
var countriestrue = false;
var technologiestrue = false;
if (phases.length == 0)
{
phasetrue = false;
}
else
{
for (j = 0; j < phases.length; j++)
{
if ((marker.phase).indexOf(phases[j]) > -1)
{
phasetrue = true;
}
}
}
if (countries.length == 0)
{
countriestrue = false;
}
else
{
for (j = 0; j < countries.length; j++)
{
if ((marker.country).indexOf(countries[j]) > -1)
{
countriestrue = true;
}
}
}
if (technologies.length == 0)
{
technologiestrue = false;
}
else
{
for (j = 0; j < technologies.length; j++)
{
if ((marker.technology).indexOf(technologies[j]) > -1)
{
technologiestrue = true;
}
}
}
if(phasetrue == true &&
countriestrue == true &&
technologiestrue == true &&
((date_start <= marker.date && date_end >= marker.date) || (date_start == undefined || date_end ==undefined) || (date_start == '' || date_end == ''))
)
{
marker.setVisible(true);
}
else
{
marker.setVisible(false);
}
}
}
setCenter = function(latitude, longitude)
{
map.panTo(new google.maps.LatLng(latitude, longitude));
}
openInfoWindow = function (name, mediaItem, location, mw, url, marker) {
var infoText = "<div class='portfolioTooltip'><div class='tooltipName'>" + name + "</div><img src='" + mediaItem + "' alt='" + mediaItem + "'title='" + mediaItem + "' />";
var moreInformationLink = "<div><a class='tooltipLink' href=\"" + url + "\" target=\"_blank\">More Information</a></div>";
if (location.length > 0) {
infoText += "<div class='tooltipLabel'>Location</div>";
infoText += "<div class='tooltipData'>" + location + "</div>";
}
if (mw.length > 0) {
infoText += "<div class='tooltipLabel'>MW</div>";
infoText += "<div class='tooltipData'>" + mw + "</div>";
}
infoText += moreInformationLink;
infoText += "</div>";
infowindow.setContent(infoText);
infowindow.open(map, marker);
}
</script>
答案 0 :(得分：1)
我设法通过使用以下方法解决了这个问题，并且我能够看到所有图像。
var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);
foreach (var imageItem in imagesCollection)
{
<img src="@imageItem.Url" />
}
答案 1 :(得分：0)
除非我遗漏了某些内容，否则失败的代码位于Split行。但是，您要做的就是将逗号分隔的值列表分开，这些值始终是数字而没有任何空项，因此以下内容应该可以在没有您尝试的所有额外工作的情况下工作。
var imageList = portfolioItem.HasValue("Images") ? portfolioItem.GetPropertyValue<string>("Images").Split(',').ToList() : null;
if(imageList != null)
{
var imagesCollection = Umbraco.TypedMedia(imageList);
}