1

我在我的 Webmatrix2 网站中显示了一个 Bing 地图 (v7)，其中包含使用 JSON 查询从 SQL Express 数据库中提取的一系列图钉和信息框。

虽然地图出现在我正在测试的所有 3 个浏览器（IE、FF 和 Chrome）中，但图钉有时不会在 FF 和 Chrome 中显示，尤其是当我使用 Cntrl+F5 刷新时

这是我的第一个 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 回答