我正在使用aps.net MVC 5,我在项目中使用Google Maps Api V3
另外,我正在使用点网Highcharts在图表中查看我的数据
有一个搜索功能放置在局部视图中,然后在另一个视图中进行渲染
该地图位于我的“布局”中,该布局在“我的视图”中传递,其中显示了搜索局部视图
看到下面的图像
现在,我想要的是每当我选择一个序列号,并在显示图表上填写开始和结束日期后,单击地图上的特定标记将仅可见,而所有其他标记均被隐藏
贝娄是我的搜索控制器代码
public ActionResult MultiGraph(string search, string start_date, string End_date, int? page)
{// search = "11111111";
List<SelectListItem> items = new List<SelectListItem>();
var dtt = db.ADS_Device_Data.Select(a => a.Device_Serial_Number).Distinct().ToList();
foreach (var item in dtt)
{
if (!string.IsNullOrEmpty(item))
{
items.Add(new SelectListItem { Text = item, Value = item });
}
}
ViewBag.search = items;
....... all other code for chart is placed here also
}
贝娄是我的部分搜索视图
@using (Html.BeginForm("MultiGraph", "Home", FormMethod.Get))
{
<div class="form-inline">
@Html.DropDownList("search", null, "Select Serial Number", new { @class = "form-control", @style = "width:20%" })
<input type='text' name="start_date" id="startTime" class="form-control" placeholder="Start Date" autocomplete="off" />
<input type='text' name="End_date" id="endTime" class="form-control" placeholder="End Date" autocomplete="off" />
<input id="recall" type="submit" value="Show Chart" class="btn btn-success" autocomplete="off"/>
<a href="@Url.Action("Index","Home")">
<img src="~/Image/back-button.png" alt="Go Back" title="Go Back" >
</a>
@*<input type="button" value="Back" class="btn btn-success" onclick="@Html.ActionLink("Index","Home")"/>*@
@*<button class="btn btn-success form-control" onclick="" name="Back" value="Back"></button>*@
</div>}
在
MultiGraph.cshtml
视图中呈现Layout = "~/Views/Shared/_MLayout.cshtml";
<p>
<div style="font-family:'Times New Roman' ; font-size:large" align="center">
@Html.Partial("_Search")
</div>
在上面的代码中,
_MLayout.cshtml
是我的图表的布局波纹管是我的
_MLayout
图表代码<div id="map" style="width: 320px; height: 350px; margin-top:-10px"></div>
波纹管是地图的脚本
<script>
//Map initialization
// Define your locations: HTML content for the info window, latitude, longitude
var locations =
[
['<h4>Meter# 11111111<h4>', 31.27045, 74.17811],
['<h4>Meter# 22222222<h4>', 31.26972, 74.17855],
['<h4>Meter# 33333333<h4>', 31.27081, 74.17964],
['<h4>Meter# 44444444<h4>', 31.27007, 74.18037],
['<h4>Meter# 55555555<h4>', 31.26956, 74.18123],
];
// Info Window Content
var infoWindowContent =
[
//1
['<div class="info_content">' +
'<h4>Meter# 11111111</h4>' +
'<h4><b>Description</b></h4>' +
'<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
'<h4><b>Coordinates:</b></h4>' +
'<p>31.27045, 74.17811</p>' + '</div>'
],
//2
['<div class="info_content">' +
'<h4>Meter# 22222222</h4>' +
'<h4><b>Description</b></h4>' +
'<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
'<h4><b>Coordinates:</b></h4s>' +
'<p>31.26972, 74.17855</p>' + '</div>'
],
//3
['<div class="info_content">' +
'<h4>Meter# 33333333</h4>' +
'<h4><b>Description</b></h4>' +
'<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
'<h4><b>Coordinates:</b></h4>' +
'<p>31.27081, 74.17964</p>' + '</div>'
],
//4
['<div class="info_content">' +
'<h4>Meter# 44444444</h4>' +
'<h4><b>Description</b></h4>' +
'<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
'<h4><b>Coordinates:</b></h4>' +
'<p>31.27007, 74.18037</p>' + '</div>'
],
//5
['<div class="info_content">' +
'<h4>Meter# 55555555</h4>' +
'<h4><b>Description</b></h4>' +
'<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
'<h4><b>Coordinates:</b></h4>' +
'<p>31.26956, 74.18123</p>' + '</div>'
],
];
// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
//iconURLPrefix + 'purple-dot.png',
//iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(31.27016, 74.17932),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
//content: 'Power Monitoring Solutions',
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
});
var infoWindow = new google.maps.InfoWindow();
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
iconCounter++;
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(map, "click", function (event) {
infoWindow.close();
autoCenter();
//center: new google.maps.LatLng(31.27016, 74.17932)
});
google.maps.event.addListener(window, "click", function (event) {
infoWindow.close();
autoCenter();
//center: new google.maps.LatLng(31.27016, 74.17932)
});
//google.maps.event.addListener(locations, 'mouseover', function () {
// locations.open(map, this);
//});
//google.maps.event.addListener(locations, 'mouseout', function () {
// locations.close();
//});
// We only have a limited number of possible icon colors, so we may have to restart the counter
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
</script>
我完全不知道该怎么做
更新的代码
我已将这段代码添加到脚本中
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter],
serialNumber: locations[i][3],
});
iconCounter++;
var serialNumber = search;
// loop through all the markers
for (var i = 0; i < markers.length; i++) {
if (markers[i].serialNumber != serialNumber) {
markers[i].setMap(null);
} else {
google.maps.event.trigger(markers[i], 'click');
}
}
第一次运行时,我得到波纹管地图
该标记用于序列号
55555555
同样对于
55555555
序列号,信息窗口也不会显示现在可以在第一次运行时有一个空的地图,但是这个黄色标记仍在显示
任何帮助将不胜感激
最佳答案
您需要做的是通过其ID /序列号(1111111
部分)识别每个标记的某种方法。理想情况下,您将修改您的locations
数组以将其作为自己的值,或者可以使用正则表达式从第一个值进行解析。然后,您可以将其作为属性添加到每个标记中,稍后可以进行检查。例如像这样的东西:
var locations = [
['<h4>Meter# 11111111<h4>', 31.27045, 74.17811, 11111111],
['<h4>Meter# 22222222<h4>', 31.26972, 74.17855, 22222222],
['<h4>Meter# 33333333<h4>', 31.27081, 74.17964, 33333333],
['<h4>Meter# 44444444<h4>', 31.27007, 74.18037, 44444444],
['<h4>Meter# 55555555<h4>', 31.26956, 74.18123, 55555555]
];
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter],
serialNumber: locations[i][3]
});
然后,当您提交表单时,请使用一个javascript事件监听器,该监听器获取用户输入的值,并查看您是否具有该ID的标记,例如
var serialNumber = // whatever the user entered
// loop through all the markers
for (var i = 0; i < markers.length; i++) {
if (markers[i].serialNumber != serialNumber) {
markers[i].setMap(null);
} else {
google.maps.event.trigger(markers[i], 'click');
}
}