1

JSON 照会を使用して SQL Express データベースから引き出された一連の画鋲とインフォボックスを使用して、Webmatrix2 Web サイトに Bing Map (v7) を表示しています。

私がテストしている 3 つのブラウザー (IE、FF、Chrome) のすべてでマップが表示されますが、特に Cntrl+F5 で更新すると、画鋲が FF と Chrome に表示されないことがあります。

これは私の最初の JSON および Bing マップ アプリなので、いくつかの間違いがあることを期待してください。

コードを改善して表示の一貫性を得る方法について何か提案はありますか?

 @{
    Layout = "~/_MapLayout.cshtml";
}


 <script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>           
 <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
 <link rel="StyleSheet" href="infoboxStyles.css" type="text/css"> 
<script type="text/javascript">

    var map = null;
    var pinLayer, pinInfobox;
    var mouseover;
    var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="/Images/close2.jpg" /></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"><img src="images/pointer_shadow.png"></div>';
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var infoboxLayer = new Microsoft.Maps.EntityCollection();

    function getMap() {
        map = new Microsoft.Maps.Map(document.getElementById('map'), {
            credentials: "my-key",
            zoom: 4,
            center: new Microsoft.Maps.Location(-25, 135),
            mapTypeId: Microsoft.Maps.MapTypeId.road
        });
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        AddData();

    }



    $(function AddData() {
        $.getJSON('/ListSchools', function (data) {
            var schools = data;
            $.each(schools, function (index, school) {
                for (var i = 0; i < schools.length; i++) {
                    var pinLocation = new Microsoft.Maps.Location(school.SchoolLat, school.SchoolLon);
                    var NewPin = new Microsoft.Maps.Pushpin(pinLocation);

                    NewPin.title = school.SchoolName;
                    NewPin.description = "<a href=SchoolDetails?searchschool=" + school.SchoolID + ">-- Learn More --</a>";
                    pinLayer.push(NewPin); //add pushpin to pinLayer
                    Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', displayInfobox);
                }
            });
            infoboxLayer.push(pinInfobox);
            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);
        });
    })

    function displayInfobox(e) {
        if (e.targetType == "pushpin") {
            var pin = e.target;
            var html = "<span class='infobox_title'>" + pin.title + "</span><br/>" + pin.description;

            pinInfobox.setOptions({
                visible: true,
                offset: new Microsoft.Maps.Point(-33, 20),
                htmlContent: pushpinFrameHTML.replace('{content}', html)
            });

            //set location of infobox
            pinInfobox.setLocation(pin.getLocation());
        }
    }

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

    function getCurrentLocation() {
        var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
        geoLocationProvider.getCurrentPosition();
    }



  </script>

<body onload="getMap();">
<div id="map"  style="position:relative; width:800px; height:600px;"></div>
     <div>
         <input type="button" value="Find Nearest Schools" onclick="getCurrentLocation();" />
      </div>
</body>

JSONファイルは単純です

@{
    var db = Database.Open("StarterSite");    
    var sql = @"SELECT * FROM Schools WHERE SchoolLon !=  ' ' AND  SchoolLon != 'null' ";
    var data = db.Query(sql);
    Json.Write(data, Response.Output);
}
4

1 に答える 1

0

AddData 関数を呼び出す前に、pinLayer、infobox、および infoboxLayer を追加して、違いが生じるかどうかを確認します。また、school.SchoolLat と school.SchoolLon が数値であり、数値の文字列バージョンではないことも確認してください。それらが文字列の場合は、parseFloat を使用してそれらを数値に変換します。それ以外はすべて問題ないようです。

于 2014-09-18T11:57:38.720 に答える