Как создать несколько магазинов?

Question

Ниже я опубликовал код, который был отредактирован из статьи. Я могу показать только одно хранилище на карте. Тем не менее, я хотел бы иметь несколько мест, которые присутствуют.

Вот код:

<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

Answer 1

Как Николас указал код, который вы должны показывать только одно место на карте. Вам сначала нужен набор данных ваших магазинов. Многие клиенты Bing Maps используют службы пространственных данных Bing для хранения своих данных о хранилищах и предоставляют их в качестве пространственной службы REST. http://msdn.microsoft.com/en-us/library/gg585132.aspx Если у вас есть файл источник данных, который соответствует требуемой схеме вы можете загрузить его на свой счет, используя портал Bing Maps как описано здесь: http://msdn.microsoft.com/en-us/library/hh698204.aspx

После того, как у вас есть источник данных, вы можете легко запрашивать источник данных и иметь он отображает соседние магазины. Вот некоторые примеры:

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

Если у вас есть данные в базе данных вы можете предпочесть, чтобы выставить эти данные с помощью пользовательского веб-службы. Если это так, то посмотрите на эти посты в блоге:

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