google maps api v3在按鈕單擊時隱藏特定標記

Question

我正在研究aps.net MVC 5，我在我的項目中使用Google Maps Api V3

另外，我使用dot net 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序列號，信息窗口未顯示

現在可以在第一次運行時有一個空地圖，但仍然顯示這個黃色標記

任何幫助將受到高度贊賞

Answer 1

您需要做的是通過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');
    }
}