个人中心
gpt4 book ai didi

javascript - 如何根据要显示的图钉数量设置必应 map 中的缩放级别

转载 作者：行者123 更新时间：2023-11-29 18:17:54 24 4
gpt4 key购买 nike

我在 JSON 对象中有大约 30 个纬度和经度，我每次填充 5 个一组并创建 HTML 标记并在浏览器中显示在左侧 DIV 元素上。在右侧的 DIV 元素上，我显示了具有所有可用纬度和经度(30 点)的 map 。

到目前为止，我正在设置一个特定的硬编码缩放级别来显示图钉。但我需要设置缩放级别，以便默认情况下只显示最少 5 个图钉(我从 HTML 标记中获取的那 5 个图钉 LAT Long)。在用户缩小时，他们应该能够看到所有可用的图钉。

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bing Maps - YUI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css"" />

<script type="text/javascript">
    // Create a YUI sandbox on your page.

    YUI().use('json-parse', 'json-stringify', "node", "selector-css3", "event-valuechange", "event", 'node-event-delegate', 'event-key', function (Y) {



        Y.on('available', function () {
            //alert("gh");
            Y.one('#firststore').addClass('disableprev');
            //e.preventDefault();
            //Y.one('#firststore').addClass('successmsgdisplay12');   



            var data = JSON.stringify({ "stores": [
            { "storeId": "1", "Name": "Branch 1", "lat": "12.915397", "long": "77.624154", "address": "HSR Layout, Bengaluru 560102, India." },
            { "storeId": "2", "Name": "Branch 2", "lat": "12.936060", "long": "77.625506", "address": "Koramangala Ring Road, 4th Cross Road, Koramangala, Bengaluru 560034, India." },
            { "storeId": "3", "Name": "Branch 3", "lat": "12.936060", "long": "80.502330", "address": "Pilimathalawa Road, Menikdiwela, Sri Lanka." },
            { "storeId": "4", "Name": "Branch 4", "lat": "12.956805", "long": "77.700457", "address": "Varthur Main Road, Marattahalli, Bengaluru 560037, India." },
            { "storeId": "5", "Name": "Branch 5", "lat": "12.918325", "long": "77.573256", "address": "1 Kanakapura Main Road, Banashankari, Bengaluru 560050, India." },
            { "storeId": "6", "Name": "Branch 6", "lat": "12.920333", "long": "77.620291", "address": "321-2 Madwala Stage 1, BTM Layout, Bengaluru 560068, India." },
            { "storeId": "7", "Name": "Branch 7", "lat": "12.965170", "long": "77.619261", "address": "Old Airport Road, Neelasandra, Bengaluru 560071, India." },
            { "storeId": "8", "Name": "Branch 8", "lat": "13.095747", "long": "77.348184", "address": "Nelamangala Sub-District, Ka, India." },
            { "storeId": "9", "Name": "Branch 9", "lat": "12.918999", "long": "77.616942", "address": "273, BTM Layout, Bengaluru" },
            { "storeId": "10", "Name": "Branch 10", "lat": "12.932900", "long": "77.621835", "address": "Koramangala, Bengaluru" },
            { "storeId": "11", "Name": "Branch 11", "lat": "12.913922", "long": "77.622414", "address": "Bommanahalli, Bengaluru" },
            { "storeId": "12", "Name": "Branch 12", "lat": "12.915009", "long": "77.629581", "address": "L-55, HSR Layout, Bengaluru 560102, India." },
            { "storeId": "13", "Name": "Branch 13", "lat": "12.917373", "long": "77.622779", "address": "Silk Board Flyover, Koramangala, Bengaluru" },
            { "storeId": "14", "Name": "Branch 14", "lat": "12.916933", "long": "77.628487", "address": "100 Feet Ring Road, Koramangala, Bengaluru" },
            { "storeId": "15", "Name": "Branch 15", "lat": "12.918941", "long": "77.621642", "address": "Silk Board Flyover, Koramangala, Bengaluru 560034, India" },
            { "storeId": "16", "Name": "Branch 16", "lat": "12.916285", "long": "77.618015", "address": "100 Feet Ring Road, BTM Layout, Bengaluru 560029, India" },
            { "storeId": "17", "Name": "Branch 17", "lat": "12.919096", "long": "77.627409", "address": "Silk Board Flyover & Hosur Main Road, HSR Layout, Bengaluru 560102, India" },
            { "storeId": "18", "Name": "Branch 18", "lat": "12.915114", "long": "77.631169", "address": "L-115 3rd B Cross Road, HSR Layout, Bengaluru 560102, India" },
            { "storeId": "19", "Name": "Branch 19", "lat": "12.914549", "long": "77.615333", "address": "7/8 30th Main Road, BTM Layout, Bengaluru 560076, India" },
            { "storeId": "20", "Name": "Branch 20", "lat": "12.911391", "long": "77.633594", "address": "1089 19th Cross Road, HSR Layout, Bengaluru 560102, India" },
            { "storeId": "21", "Name": "Branch 21", "lat": "12.922601", "long": "77.622757", "address": "Madivala Market Road, Koramangala, Bengaluru 560034, India" },
            { "storeId": "22", "Name": "Branch 22", "lat": "12.924149", "long": "77.628808", "address": "Madivala Market Road & Sarjapur Road / Koramangala Road, Koramangala, Bengaluru 560034, India" }
]
                });
Y.one("input[name='storeLatLong']").set("value", data);
                try {
                    var val = Y.one("#storeLatLong").get("value");
                    var data = Y.JSON.parse(val);
                }
                catch (e) {
                    alert("Invalid product data");
                }
                var pins = data.stores;
                var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                         { credentials: "AkFmXSfNJbfsd3VIkd2R8AiIAYqO6fkrHpLC-4lTUvo3Lr920bQy9bLNCzbzXliz", mapTypeId: Microsoft.Maps.MapTypeId.road, showMapTypeSelector: false, customizeOverlays: true, showBreadcrumb: true, enableSearchLogo: false });

            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            var pinLayer = new Microsoft.Maps.EntityCollection();

            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { width: 200, height: 100, visible: false });
            infoboxLayer.push(pinInfobox);

            Y.Array.each(pins, function (pin, index) {
                var pinLocation = new Microsoft.Maps.Location(pin.lat, pin.long);
                var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: "pin" + index }); /*typeName: pin.Name*/
                NewPin.Title = pin.address;
                NewPin.ID = pin.Name;
                NewPin.StoreID = pin.storeId;



                Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox);
                Microsoft.Maps.Events.addHandler(map, 'click', hideInfobox);
                map.entities.push(NewPin);
                /*Title*/
                Y.one('.pin' + index).setAttribute('title', pin.Name);
                /*Title*/
            });

            map.entities.push(infoboxLayer);
            map.setView({ center: new Microsoft.Maps.Location(data.stores[0].lat, data.stores[0].long), zoom: 15 });

            var selectedPin;

            function displayInfobox(e) {
                if (e.targetType == 'pushpin') {
                    selectedPin = e.target;
                    map.setView({ center: e.target.getLocation(), zoom: 15 });
                    pinInfobox.setLocation(e.target.getLocation());
                    pinInfobox.setOptions({ visible: true, title: e.target.ID, description: e.target.Title });
                    var selectedPinNum = selectedPin._text;
                    selectListFromMap(selectedPinNum);
                    resetPinImage();
                    selectedPin.setOptions({ icon: 'images/Pushpin_Selected.png' });
                    return false;
                }
            }

            function resetPinImage() {
                for (var i = 0; i < map.entities.getLength(); i++) {
                    var elt = map.entities.get(i);
                    if (elt.StoreID != null) {
                        elt.setOptions({ icon: 'images/Pushpin.png' });
                    }
                }
            }

            function selectListFromMap(sel) {
                var isPinExist = false;
                Y.one(".test").get('children').setAttribute("class", "nameslist");
                Y.all(".nameslist").each(function (node) {
                    if (node.getAttribute("id") == "pin_" + (sel - 1)) {
                        node.setAttribute("class", "actives");
                        isPinExist = true;
                        return;
                    }
                });
                if (!isPinExist) {
                    var pinNum = sel - 1;
                    var range = pinNum % 5;
                    if (range > 0) {
                        counter = pinNum - range;
                    } else {
                        counter = pinNum;
                    }
                    var endPoint = counter + 4;
                    if (endPoint > data.stores.length) endPoint = data.stores.length - 1;
                    createMarkup(counter, endPoint);
                    selectListFromMap(sel);
                }
            }

            function hideInfobox(e) {
                pinInfobox.setOptions({ visible: false });
            }

            createMarkup(0, 4);
            function createMarkup(start, end) {
                if (end > data.stores.length) {
                    end = data.stores.length;
                }
                var markup = "";

                markup = "<ul class='test'>";
                for (var i = start; i <= end; i++) {
                    var p = data.stores;
                    var classNme;
                    if (i == start) {
                        classNme = "actives";
                        setSelectedPinImage(i);
                    }
                    else {
                        classNme = "nameslist";
                    }

                    markup += "<li class=" + classNme + " id=pin_" + i + ">" + p[i].storeId + " " + p[i].Name + "</li>";
                }
                markup += "</ul>";













                Y.one("#storeList").setHTML(markup);

                Y.all(".nameslist").on("click", setSelectedCss);
                Y.all(".actives").on("click", setSelectedCss);
                Y.all(".nameslist").on("mouseover", setMouseoverCss);
                Y.all(".nameslist").on("mouseout", setMouseoutCss);
                Y.all(".actives").on("mouseover", setMouseoverCss);
                Y.all(".actives").on("mouseout", setMouseoutCss);
                //setMapZoom();
            }

            function setMouseoverCss(e) {
                if (e._currentTarget.getAttribute("class") == "nameslist") {
                    e._currentTarget.setAttribute("class", "nameslisthover");
                }
            }

            function setMouseoutCss(e) {
                if (e._currentTarget.getAttribute("class") == "nameslisthover") {
                    e._currentTarget.setAttribute("class", "nameslist");
                }
            }

            function setSelectedCss(e) {
                Y.one(".test").get('children').setAttribute("class", "nameslist");
                e._currentTarget.setAttribute("class", "actives");
                var selectedPin = e._currentTarget.getAttribute("id").substring(4);
                setSelectedPinImage(selectedPin);
                hideInfobox();
                map.setView({ center: new Microsoft.Maps.Location(data.stores[selectedPin].lat, data.stores[selectedPin].long), zoom: 15 });
            }

            function setSelectedPinImage(selectedPin) {
                for (var i = 0; i < map.entities.getLength(); i++) {
                    var elt = map.entities.get(i);
                    if (elt.StoreID != null) {
                        if (Number(elt.StoreID) == Number(selectedPin) + 1) {
                            elt.setOptions({ icon: 'images/Pushpin_Selected.png' });
                        }
                        else {
                            elt.setOptions({ icon: 'images/Pushpin.png' });
                        }
                    }
                }
            }

            var counter = 0;

            Y.one("#prev").on("click", function (e) {
                counter -= 5;
                if (counter < 0) {
                    counter = 0;
                    Y.one('#firststore').addClass('disableprev');
                    Y.one('#firststore').removeClass('prevenabled');
                    e.preventDefault();
                }
                else {
                    Y.one('#firststore').removeClass('disableprev');
                    Y.one('#firststore').addClass('prevenabled');
                }

                createMarkup(counter, counter + 4);
                var nextLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
                map.setView({ center: nextLoc, zoom: 15 });
                hideInfobox();
                e.preventDefault();
            });

            Y.one("#next").on("click", function (e) {
                counter += 5;
                var nextCounter = counter + 5;
                var total = data.stores.length;

                if (nextCounter > total) {
                    if (counter > total) counter -= 5;
                    nextCounter = total;
                    Y.one('#nextstore').removeClass('nextenabled');
                    Y.one('#nextstore').addClass('nextdisable');
                    e.preventDefault();
                }
                else {
                    Y.one('#nextstore').removeClass('nextdisable');
                    Y.one('#nextstore').addClass('nextenabled');
                    Y.one('#firststore').removeClass('disableprev');
                    Y.one('#firststore').addClass('prevenabled');
                }

                createMarkup(counter, nextCounter - 1);
                var prevLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
                map.setView({ center: prevLoc, zoom: 15 });
                hideInfobox();
                e.preventDefault();
            });

        }, "#hiddenval");

    });
</script>
</head>
<body>
    <div>
        <div id="storelists">
            <div id="prev">
                <input type="button" name="button" id="firststore" class="prevdisabled" />
            </div>
            <div id="storeList">
            </div>
            <div id="next">
                <input type="button" name="button" id="nextstore" class="nextenabled" />
            </div>
        </div>
        <div id="maplists">
            <div id="mapDiv">
            </div>
        </div>
    </div>
    <div id="hiddenval">
        <input type="hidden" name="storeLatLong" id="storeLatLong" value="" />
    </div>
</body>
</html>

我的 CSS 是 

 body


{
    background-color:#fff;  
    font-family:Arial;
    font-size:12px;  
 }

 #storelists
 {
     width:248px;
     display:inline-block;
     border:1px solid #999999;
     height:306px;
 }

 #maplists
 {
     width:700px;
     height:306px;
     position:absolute;
     display:inline-block;
     border:1px solid #999999;
 }




.test
{
list-style-type:none;
margin:0;
padding:0;
}
.nameslist
 {
     border-bottom:1px solid #f1f1f1;
     background-color:#ffffff;
     color:#3d6aae;
     height:50px;
     vertical-align:middle;
     /*text-align: center;*/
 }
.nameslisthover
 {
     background-color:#f0f0f0;
     height:50px;
     color:#3d6aae;
     vertical-align:middle; 
 }
 .actives
{
     background-color:#de2a1e;
     color:#ffffff;
     height:50px;
     vertical-align:middle;
}


 .prevenabled
 {
     background: url("images/TopNavEnabled.PNG") no-repeat;
     cursor:pointer;
     border: none;
     height:25px;
     width:248px;
 }
 .prevdisabled
 {
     height:25px;
     width:248px;
     background:url("images/TopNavDisabled.PNG");
     cursor:pointer;
     border: none;
 }
  .nextenabled
 {
     height:25px;
     width:248px;
     background:url("images/BottomNavEnabled.PNG");
     cursor:pointer;
     border: none;
 }
   .nextdisable
 {
     height:25px;
     width:248px;
     background:url("images/BottomNavDisabled.PNG");
     cursor:pointer;
     border: none;
 }
 .successmsgdisplay
        {
            color: blue;
        }
        .successmsgdisplay12
        {
            color: Red;
        }
        .disableprev
        {
            color: #999999;
        }
        .enbableprev
        {
            color: green;
        }

任何人都请帮助我。

最佳答案

创建一个数组，其中包含每个图钉的所有坐标。将此数组传递到 LocationRect 对象。这将为图钉生成一个边界框。将其作为 map View 的边界框传递。例如:

var locs = [];

for(var i=0;i<data.length;i++){

    locs.push(new Microsoft.Maps.Location(data.stores[i].lat, data.stores[i].long));

}

var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);

map.setView({bounds:bounds, padding: 100});

关于javascript - 如何根据要显示的图钉数量设置必应 map 中的缩放级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21428125/

24 4 0
文章推荐： javascript - 按下回车键时将焦点设置到下一个下一个框
文章推荐： android - 如何在不打开 Activity 的情况下在特定日期和时间运行方法？
文章推荐： android - ViewPager 内的图库 View
文章推荐： android - BroadcastReceiver 的 onReceive() 方法永远不会被调用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com