[英]How do I create multiple stores?
下面,我發布了一些文章中編輯的代碼。 我只能在地圖上顯示一個商店位置。 但是,我希望有多個位置。
這是代碼:
<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>
這是文章:
正如Nicolas指出的那樣,您擁有的代碼只會在地圖上顯示一個位置。 您首先需要的是商店的數據集。 許多Bing Maps客戶使用Bing空間數據服務來存儲他們的商店數據,並將其作為空間REST服務公開。 http://msdn.microsoft.com/zh-cn/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/
如果您將數據存儲在數據庫中,則可能更喜歡使用自定義Web服務公開此數據。 如果是這種情況,請查看以下博客文章:
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.