我正在使用aps.net MVC 5,我在项目中使用Google Maps Api V3

另外,我正在使用点网Highcharts在图表中查看我的数据

有一个搜索功能放置在局部视图中,然后在另一个视图中进行渲染

该地图位于我的“布局”中,该布局在“我的视图”中传递,其中显示了搜索局部视图

看到下面的图像

javascript - google maps api v3单击按钮时隐藏特定标记-LMLPHP

现在,我想要的是每当我选择一个序列号,并在显示图表上填写开始和结束日期后,单击地图上的特定标记将仅可见,而所有其他标记均被隐藏

贝娄是我的搜索控制器代码

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');
        }
    }


第一次运行时,我得到波纹管地图

javascript - google maps api v3单击按钮时隐藏特定标记-LMLPHP

该标记用于序列号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');
    }
}

09-10 13:42
查看更多