Question

我正在做一个任务，运行的脚本应该从bing中检索一个地图并显示它。但是，我得到的只是文本行和缩放栏。有人想解释我做错了什么吗？这是我的代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>Map</title>
    <meta name="viewport" content="width=device-width" />
    <script src="jquery.min.js"></script>

    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <script>
    $(document).ready(function(e) {
        if (supportsGeoLocation()) {
            $("#supports").html("Your browser supports GeoLocation. ");
        } else {
            $("#supports").html("Your browser does not support GeoLocation. ");
            $("#getMapInfo").hide(); // hide the button and map section
        }
    });


    function supportsGeoLocation() {
        return !!navigator.geolocation;
    }
    $("#getGeo").click(function(e) {
        getLocation();
        return false;
    });


    function getLocation() {
        navigator.geolocation.getCurrentPosition(mapIt, locationError);
    }


    function locationError(error) {
        switch (error) {
            case 1:
                alert("Location services denied");
                break;
            case 2:
                alert("Could not contact location services network or satellites");
                break;
            case 3:
                alert("Location services timed out");
                break;
            default:
                alert("Location could not be determined.");
        }
        $("#getMapInfo").hide();
        $("#supports").append(" There was an problem mapping your location, please try again later.");
    }


    function mapIt(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var zoom = parseInt($("#zoomLvl").val());
        var map, mapOptions, center, pin, pinOptions;

        // show a map from Bing
        mapOptions = {
            credentials: 'AsCeTHylF9cVZB2SbBZeihjBvl71n-LYRPu9Nzm1zgOQ0TGmlQL4vn2oZWK25lcS',
            center: new Microsoft.Maps.Location(lat, lon),
            zoom: zoom
        };
        map = new Microsoft.Maps.Map(document.getElementById('map'), mapOptions);
        $("#map").after('<h3 class="after">You are Here</h3>');
    }

    center = map.getCenter();
    pinOptions = {
        icon: "/images/house.png",
        width: 16,
        height: 16,
        draggable: true
    };
    pin = new Microsoft.Maps.Pushpin(center, pinOptions);
    map.entities.push(pin);
    </script>
</head>

<body>

    <section>
        <h2>Where Are You Now?</h2>
        <p id="supports">Your browser does not support GeoLocation</p>
    </section>


    <section id="getMapInfo">
        <h3>Map Options</h3>

        <p>Zoom level: Orbit (1)
            <input id="zoomLvl" value="11" type="range" min="1" max="20">Your yard (20)

            <p>
                <button id="getGeo">Get My Location</button>
            </p>
            <div id="map"></div>
    </section>


</body>

</html>

Answer 1

1）这些行

center = map.getCenter();
pinOptions = {
 icon: "/images/house.png",
 width: 16,
 height: 16,
 draggable: true
};
pin = new Microsoft.Maps.Pushpin(center, pinOptions);
map.entities.push(pin);

需要在mapIt()函数

中

2）在$('#getGeo')点击处理程序上添加：

e.preventDefault();

Answer 2

我认为你只有一些不平衡的html标签（p-tag和输入未关闭）。

我改变了这样的html：

<section>
    <h2>Where Are You Now?</h2>
    <p id="supports">Your browser does not support GeoLocation</p>
</section>
<section id="getMapInfo">
    <h3>Map Options</h3>
    <p>Zoom level:</p>
    Orbit (1)
    <input id="zoomLvl" value="11" type="range" min="1" max="20"/>
    Your yard (20)
    <button id="getGeo">Get My Location</button>
    <div id="map"> </div>
</section>

请检查此jsFiddle。

（elzi的另一个提到的观点我没有经过检查。）

脚本似乎没有运行

2 个答案: