0

我正在尝试遍历列表以将图钉添加到 Bing 地图。但是，一旦它们在列表中，我就无法添加图钉。有人能帮我吗？谢谢

<div id="manualEntry">
    Your current location
    <input id="manualAddress" type="text" style="width: 500px" />
    <input id="getManualDirections" type="button" value="Get Directions" />
</div>
<div id="mapContainer" style="height: 500px">
    <div style="float: left">
        <div id="directionsMap" style="float: none; position: relative; width: 720px; height: 400px">
        </div>
    </div>
    <div id="directionsList" style="float: left; overflow: auto; width: 250px; height: 400px">
    </div>
</div>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
    $(function () {
        var map = null;
        var directionsManager = null;
        var location = null;
        var STORE_LOCATION = "San Jose, CA";
        var storeLocations = [];


        //storelocations.add({ ClinicName: "Clin1", Lat: 49.276709, Long: -123.120543, Location: "west54th", Delay: 15, Doctors: [{ Doc1: "Dr. Br" }, { Doc2: "Dr. Stien" }] });
        //storelocations.add({ ClinicName: "Clin2", Lat: 49.273388, Long: -123.123165, Location: "west44th", Delay: 15, Doctors: [{ Doc1: "Dr. Yee" }] });


        showManualEntry();

        $("#askPermission").hide();
        loadMap();
        // Get the location
        var options = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 2000
        };
        navigator.geolocation.getCurrentPosition(showPosition, positionError, options);

        storelocations.add(["Clin1", 49.276709, -123.120543, "west54th", 15, ["Dr. Br", "Dr. Stien"]]);
        storelocations.add(["Clin2", 49.273388, -123.123165, "west44th", 15, ["Dr. Yee"]]);
        function loadMap() {
            // Initialize the map
            if (!map) {
                map = new Microsoft.Maps.Map(document.getElementById("directionsMap"),
                         { credentials: "AnytwRR35RZy6dxlt4BEAmhqyt-JljTEIk9rda4eUdszfA2O-TrWFEjDFkTrTeMp" });
               addPushPins()               
            }
        }

        function addPushPins() {
            for (var i = 0; i < storeLocations.length; i++) {
                var loc = new Microsoft.Maps.Location(storeLocations[i, 1], storeLocations[i, 2]);
                var pin = new Microsoft.Maps.Pushpin(loc, { icon: "/Content/Images/Plugins/Map/Markers/1min.png" });
                map.entities.push(pin);
            }

        }
        function showPosition(position) {

            if (position) {
                location = position.coords;
                map.setView({ zoom: 15, center: new Microsoft.Maps.Location(location.lattitude, location.longitude) })
            }
            if (!directionsManager) {
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDirectionsManager });
            }
            else {
                createDirectionsManager();
            }
        }

        function createDirectionsManager() {
            var displayMessage;
            if (!directionsManager) {
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                displayMessage = 'Directions Module loaded\n';
                displayMessage += 'Directions Manager loaded';
            }
            directionsManager.resetDirections();
            directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);
            directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
            createDrivingRoute(location);
        }

        function directionsUpdated() {
            // Show Success message if required
        }
        function directionsError(args) {
            // Show Error message if required
        }

        function createDrivingRoute(coords) {
            if (!directionsManager) { createDirectionsManager(); }
            directionsManager.resetDirections();
            // Set Route Mode to driving 
            directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
            var fromWayPoint = null;
            if (coords != null) {
                fromWayPoint = new Microsoft.Maps.Directions.Waypoint(
                                {
                                    location: new Microsoft.Maps.Location(coords.latitude, coords.longitude)
                                });
                directionsManager.addWaypoint(fromWayPoint);
            }
            else {
                fromWayPoint = new Microsoft.Maps.Directions.Waypoint({ address: $("#manualAddress").val() });
                directionsManager.addWaypoint(fromWayPoint);
            }
            var toWayPoint = new Microsoft.Maps.Directions.Waypoint({ address: STORE_LOCATION });
            directionsManager.addWaypoint(toWayPoint);
            // Set the element in which the itinerary will be rendered
            directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsList') });
            directionsManager.calculateDirections();
        }


        function showManualEntry() {
            $("#manualEntry").show();
        }

        $("#getManualDirections").click(function () {
            loadMap();
            showPosition(null);
        });

        function positionError(position) {
            switch (position.code) {
                case 1:
                    showManualEntry();
                    break;
                case 2:
                    showManualEntry();
                    break;
                case 3:
                    showManualEntry();
                    break;
                default:
                    break;
            }
        }

    });

</script>
4

1 回答 1

0

你犯了一些错误，我会尽力向你解释。

当您将图钉添加到数组时，您的代码将无法工作，原因有两个：您编写的是 storelocations 而不是 storeLocations，并且方法 add 不存在于 javascript 数组中。您必须改用 push() 方法。

storeLocations.push(["Clin1", 49.276709, -123.120543, "west54th", 15, ["Dr. Br", "Dr. Stien"]]);
storeLocations.push(["Clin2", 49.273388, -123.123165, "west44th", 15, ["Dr. Yee"]]);

当您尝试获取位置时，请尝试执行以下操作，效果会更好：

var loc = new Microsoft.Maps.Location(storeLocations[i][ 1], storeLocations[i][ 2]);

最后但同样重要的是，您不能在 loadMap() 函数中调用 addPushPins() 函数，因为您的 storeLocations 数组中没有任何图钉。如果您只是在将 storeLocations 添加到数组后调用它，它会像一个魅力一样工作。

storelocations.push(["Clin1", 49.276709, -123.120543, "west54th", 15, ["Dr. Br", "Dr. Stien"]]);
storelocations.push(["Clin2", 49.273388, -123.123165, "west44th", 15, ["Dr. Yee"]]);

    addPushPins();

希望对你有帮助

于 2013-11-19T17:07:35.330 回答