0

以下に、記事から編集されたいくつかのコードを投稿しました。地図上に表示できる店舗の場所は 1 つだけです。ただし、存在する複数の場所が必要です。

コードは次のとおりです。

    <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";


        showManualEntry();

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

        function loadMap() {
            // Initialize the map
            if (!map) {
                map = new Microsoft.Maps.Map(document.getElementById("directionsMap"),
                         { credentials: "YOUR_BING_MAPS_KEY" });
            }
        }

        function showPosition(position) {
            map.entities.clear();
            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>

記事は次のとおりです。

http://www.dotnetcurry.com/ShowArticle.aspx?ID=783

4

1 に答える 1

0

ニコラスが指摘したように、あなたが持っているコードは地図上に1つの場所しか表示しません. 最初に必要なのは、店舗のデータ セットです。多くの Bing Maps のお客様は、Bing Spatial Data Services を使用して店舗データを保存し、空間 REST サービスとして公開しています。http://msdn.microsoft.com/en-us/library/gg585132.aspx必要なスキーマに一致するデータ ソース ファイルを取得したら、Bing Maps ポータルを使用してアカウントにアップロードできます。 /msdn.microsoft.com/en-us/library/hh698204.aspx

データ ソースを取得したら、データ ソースを簡単にクエリして、近くの店舗の場所を表示することができます。ここではいくつかの例を示します。

http://www.bingmapsportal.com/ISDK/AjaxV7#SpatialDataServices1 http://rbrandritt.wordpress.com/2012/01/17/dynamically-updating-data-in-bing-maps-v7/

データベースにデータがある場合、カスタム Web サービスを使用してこのデータを公開することをお勧めします。その場合は、次のブログ記事をご覧ください。

http://blogs.bing.com/maps/2013/07/31/how-to-create-a-spatial-web-service-that-c​​onnects-a-database-to-bing-maps-using-ef5/ http://blogs.bing.com/maps/2013/08/05/advance-spatial-queries-using-entity-framework-5/

于 2014-09-17T13:56:01.050 に答える