Javascript google maps api v3在单击按钮时隐藏特定标记

我正在aps.net MVC 5上工作，我在我的项目中使用谷歌地图Api V3

此外，我正在使用点网海图查看图表中的数据

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

地图位于我的布局中，该布局在我的视图中传递，搜索局部视图正在渲染

参见下面的图片

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

下面是我的搜索控制器代码

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 
}

在上面的代码中，

\u MLayout.cshtml

是我的图表的布局

下面是我的

\u MLayout

图表代码

<div id="map" style="width: 320px; height: 350px; margin-top:-10px"></div>

下面是map的脚本

<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>

//地图初始化
//定义您的位置：信息窗口的HTML内容、纬度、经度
变量位置=
[
[Meter#11111111'，31.27045,74.17811]，
[Meter#2222'，31.26972,74.17855]，
[Meter#33333333'，31.27081,74.17964]，
[Meter#4444'，31.27007,74.18037]，
[Meter#5555'，31.26956,74.18123]，
];
//信息窗口内容
var infoWindowContent=
[
//1
['' +
“米#11111111”+
“说明”+
“精确私人有限公司
GSM电能表
”+
'坐标：'+
“31.27045，74.17811”
],
//2
['' +
“米#2222”+
“说明”+
“精确私人有限公司
GSM电能表
”+
'坐标：'+
“31.26972，74.17855”
],
//3
['' +
“米#33333”+
“说明”+
“精确私人有限公司
GSM电能表
”+
'坐标：'+
“31.27081，74.17964”
],
//4
['' +
“米#4444”+
“说明”+
“精确私人有限公司
GSM电能表
”+
'坐标：'+
“31.27007，74.18037”
],
//5
['' +
“米#5555”+
“说明”+
“精确私人有限公司
GSM电能表
”+
'坐标：'+
“31.26956，74.18123”
],
];
//设置不同的图标和阴影
变量iconURLPrefix=http://maps.google.com/mapfiles/ms/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+“黄点.png”
]
var iconsLength=icons.length；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（31.27016,74.17932），
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误，
泛控制：错误，
//内容：“电源监控解决方案”，
ZoomControl选项：{
位置：google.maps.ControlPosition.RIGHT\u底部
}
});
var infoWindow=new google.maps.infoWindow（）；
var markers=新数组（）；
var-iconCounter=0；
//将标记和信息窗口添加到地图
对于（变量i=0；i=iconsLength）{
i计数器=0；
}
}
函数autoCenter（）{
//创建新的视点边界
var bounds=new google.maps.LatLngBounds（）；
//通过每个。。。
对于（var i=0；i

怎么做我一点都不知道

更新代码

我已经在脚本中添加了这段代码

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

for（变量i=0；i

在第一次跑步时，我得到了下面的地图

此标记用于序列号

5555

同样对于

5555

序列号，信息窗口不显示

现在，在第一次运行时可以有一个空的地图，但仍然显示这个黄色标记

---

任何帮助都将不胜感激

您需要做的是通过ID/ser识别每个标记

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

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

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