2 Minuten Lesezeit
Lernprogramm Codierung
Andreas Witt
Wer für sich oder einen Kunden eine eigene Routenplanerkomponente entwickeln möchte, sollte sich Bing Maps mal genauer ansehen. Nicht so populär wie Google Maps, aber eben so gut! Denn wer sich mit der Bing Maps API näher beschäftigt, wird feststellen, dass sich relativ einfach eigenen, tolle Lösungen umsetzen lassen. Ich habe da mal was vorbereitet.
Über das Backend werden vier Kunden- und Adressdatensätze in die View und weiter in die Bing Map geladen. Rechts neben der Maps werden die ermittelten Wegpunkte mit den jeweiligen Zeiten und Entfernungen aufgelistet. Der Anwender kann diese nun per Drag & Drop umsortieren und die Route neu berechnen. Zum Schluss kann die gewünschte Route zur Speicherung/Verarbeitung an den Server gesendet werden.
Mit der Maus kann bspw. Kunde 4 auf Station 2 verschoben werden.
Wenn die Route nun neu berechnet wird, ergibt sich eine neue, längere Route von 15,91 Km.
Für diese Demo wird im Controller eine Liste von Wegepunkten (Kunden) erstellt und an die View übergeben.
Die zweite Methode “SaveTour” nimmt die kalkulierten Routendaten wieder entgegen, um diese im Backend zu verarbeiten.
öffentlichActionResult-Index()
{ Warvm= neuAzureWebsite.Modelle.TourViewModel
{ //nur einige Beispieldaten für die Ansicht
Wegpunkte= neuAufführen<Modelle.TourWayPointModel>{
neuModelle.TourWayPointModel() {
Ausweis= 1,
Adresse="Zirkusweg 1, 20359 Hamburg",
Name="Könnte 1",
Befehl=1,
Protokoll=0,
Distanz=0
},
neuModelle.TourWayPointModel() {
Ausweis= 2,
Adresse="Spaldingstraße 1, 20097 Hamburg",
Name="Könnte 2",
Befehl=2,
Protokoll=0,
Distanz=0
},
neuModelle.TourWayPointModel() {
Ausweis= 3,
Adresse="Hamburger Straße 31, 22083 Hamburg",
Name="Könnte 3",
Befehl=3,
Protokoll=0,
Distanz=0
},
neuModelle.TourWayPointModel() {
Ausweis= 4,
Adresse="Dorotheenstraße 1, 22301 Hamburg",
Name="Könnte 4",
Befehl=4,
Protokoll=0,
Distanz=0
}
}
};
zurückkehrenSicht(vm);
} öffentlichActionResult SaveTour(AzureWebsite.Modelle.TourViewModel vm)
{
//Machen Sie etwas Sinnvolles mit den Routendaten
zurückkehrenRedirectToAction("Index");
}
In der View ist etwas mehr Anwendungslogik erforderlich. Ich habe den Code der Seite in drei Teile geteilt, damit er etwas übersichtlicher ist.
- Teil 1: Anwendungslogik
- Teil 2: Umsortieren der Wegepunkte mit Drag & Drop
- Teil 3: HTML
Der erste Teil mit der Anwendungslogik ist mit Abstand der größte.
Teil 1:Anwendungslogik mit Bing Map und Routenplanermodul (Microsoft.Maps.Directions)
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">//Route anhand der Wegpunkte erstellen
DirectionComponent.createRoute(waypoints); }
Funktion DirectionsError(e) {
alarm('Fehler: ' + e.message + '\r\nAntwortcode: ' + e.responseCode)
}// Wird aufgrund einer in der Karte geänderten Route aufgerufen
FunktionsanweisungenAktualisiert(e)
{
//Aktualisieren der Arbeitsfläche
DirectionComponent.refreshEditorPanel(e);
}
//benutzerdefinierte App-Logik
var DirectionComponent = ( Funktion ( Modul ) {
//Neue Route anhand der angegebenen Wegpunkte erstellen
modul.createRoute = function (pointsOfRoute) {
DirectionsManager.resetDirections({ removeAllWaypoints: true,
resetRenderOptions: true });//Bing Maps-Wegpunkt für jeden Kundenwegpunkt erstellen
for (i = 0; i < pointOfRoute.length; i++) {
let point = pointOfRoute[i];
let waypoint = new Microsoft.Maps.Directions.Waypoint
({ Adresse: point.Address, businessDetails:
{ businessName: point.Name, entityId: point.Is },
shortAddress: point.Name });
DirectionsManager.addWaypoint(waypoint); }//Tour berechnen
DirectionsManager.calculateDirections(); },
modul.refreshEditorPanel = Funktion (e) {
let list = document.getElementById('sortable');
//initialisiere Inhalt list.innerHTML = '';
let routeIdx = DirectionsManager.getRequestOptions().routeIndex;
//Ermitteln Sie die Entfernung der Route, gerundet auf 2 Dezimalstellen.
let distance = Math.round(e.routeSummary[routeIdx].distance * 100) / 100;
//Die zur Berechnung der Route verwendeten Entfernungseinheiten abrufen.
let Units = DirectionsManager.getRequestOptions().distanceUnit;
let distanceUnits = 'miles';
if (units == Microsoft.Maps.Directions.DistanceUnit.kilimeters)
{ distanceUnits = 'km' }//Die Zeit wird in Sekunden angegeben, in Minuten umrechnen und abrunden.
let time = Math.round(e.routeSummary[routeIdx].timeWithTraffic / 60);
let panel = document.getElementById('routeInfoPanel');
let node = document.createElement("P");
node.innerHTML =
'Entfernung: ' + Entfernung + ' ' + distanceUnits + '
Zeit mit Verkehr: ' + Zeit + ' Minuten';
panel.appendChild(node);
let routepartsInfos = this.getCurrentRouteInfo();
let template = "" +“ +
"" +
„
„“ +
„Zeit: Minuten“ +
„Entfernung: km“(Video) PowerApps - Build apps using Bing Maps API
//Containerelemente zum Transport von Daten
+ "
+ ""
+ ""
+ „“
let waypoints = DirectionsManager.getAllWaypoints();
//Vorlage füllen, wenn (waypoints.length > 0)
{ für (i = 0; i < Wegpunkte.Länge; i++)
{ let waypoint = waypoints[i];
//Geschäftsdaten verwenden, um mehr Kundeninformationen zu speichern
let businessDetails = waypoint.getBusinessDetails();
let itemElem = document.createElement("LI");
let displayName = businessDetails.businessName;
itemElem. innerHTML = template;
itemElem.innerHTML = itemElem.innerHTML.replace(
//g, businessDetails.entityId).replace("", i)
.replace(//g, displayName).replace(//g,
waypoint.getAddress()).replace("",
waypoint._isViapoint);
if (i - 1 >= 0 && i - 1 < routepartsInfos.length)
{ itemElem.innerHTML = itemElem.innerHTML.replace(""
, routepartsInfos[i - 1].time).replace(""
, routepartsInfos[i - 1].distance); }
anders
{ itemElem.innerHTML = itemElem.innerHTML.replace("", 0)
.replace("", 0); }
list.appendChild(itemElem); } } },
//Informationen von den Routenabschnitten abrufen
modul.getCurrentRouteInfo = function () {
var resultArray = [];
var Routen = DirectionsManager.getRouteResult();
// Es muss genau eine Route geben
if (Routen && Routen.Länge == 1)
{
var route = Routen[0];
for (i = 0; i < route.routeLegs.length; i++) {
let routeLeg = route.routeLegs[i];
resultArray.push({
Zeit: Math.round(routeLeg.summary.time / 60),
Abstand: (Math.round(routeLeg.summary.distance * 100) / 100) }); } }
return resultArray; },
//Route aus benutzerdefiniertem Wegpunkt erstellen
list modul.calculateTour = function () {
let list = document.getElementById('sortable');
let reorderArray = [];
for (i = 0; i < list.children.length; i++) {
let li = list.children[i];
let wayPointId = $(li).find(".id-item").text();
let name = $(li).find(".name-item").text();
let address = $(li).find(".adress-item").text();
reorderArray.push({ Id: wayPointId, Name: name, Address: address, index: i }); }
//neue Routenberechnung starten
this.createRoute(reorderArray); },
//Routendaten zum Speichern an den Server senden
modul.saveWayPoints = function () {
//Routeninformationen sammeln
let routeLegInfo = this.getCurrentRouteInfo();
let waypoints = DirectionsManager.getAllWaypoints();
//Daten füllen
let waypointModels = [];
for (i = 0; i < waypoints.length; i++) {
let wayPoint = waypoints[i];
let businessDetails = waypoints[i].getBusinessDetails();
waypointModels.push({
Id: businessDetails.entityId,
Befehl: ich,
Minuten: this.getMinutes(routeLegInfo, waypoints, wayPoint, i - 1),
Entfernungen: this.getDistance(routeLegInfo, waypoints, wayPoint, i - 1),
Name: businessDetails.businessName,
Adresse: wayPoint.getAddress()
});
}
let tourModel = {
Id: parseInt('@Model.Id'),
Wegpunkte: Wegpunktmodelle,
};
//Routendaten an den Server senden (Speichern oder was auch immer)
this.sendToServer(tourModel); },
modul.sendToServer = function (tourModel) {
jQuery.ajax({ type: "POST", url: "@Url.Action("SaveTour")",
dataType: „json“, contentType: „application/json;
charset=utf-8", Daten: JSON.stringify(tourModel),
Erfolg: Funktion (Daten) { Alert(Daten); },
Fehler: function (errMsg) { Alert(errMsg); } }); },
modul.getMinutes = Funktion (routeLegInfos, wayPoints, wayPoint, routeLegindex)
{
var min = 0;
if (routeLegindex >= 0 && routeLegindex < routeLegInfos.length)
{
var wayPointIndex = routeLegindex;
min = routeLegInfos[routeLegindex].time;
} return min;
},
modul.getDistance = function (routeLegInfos, wayPoints, wayPoint, routeLegindex) {
sei dist = 0;
if (routeLegindex >= 0 && routeLegindex < routeLegInfos.length) { let wayPointIndex = routeLegindex; dist = routeLegInfos[routeLegindex].distance; } return dist; } return modul; }(DirectionComponent || {}));
Teil 2:Die Liste der Wegepunkte sortierbar machen
<Skript src=„https://code.jquery.com/jquery-1.12.4.js“>Skript> <Skript src=„https://code.jquery.com/ui/1.12.1/jquery-ui.js“>Skript> <Skript>$(Funktion () {$("#sortierbar").sortierbar();$("#sortierbar").deaktivierenAuswahl(); });$(dokumentieren).bereit(Funktion () {GetMap(); }); Skript>
Teil 3:HTML-Struktur und CSS
<Stil> #Spalte1{ schweben: links; Breite: 70%; } #Spalte2{ schweben: links; Breite: 30%; } .Kartencontainer{ Rand oben: 20px; } #sortierbar{ Listenstiltyp: keiner; Rand: 0; Polsterung: 0; } #sortierbare li{ Rand: 0 3px 3px 3px; Polsterung: 0,4em; Polsterung links: 1.5em; Schriftgröße: 1em; Höhe: 110px; Hintergrund: #f6f6f6; Grenze: 1px solide #c5c5c5; } Stil> <div Klasse=„Kartencontainer“> <div Ausweis=„Spalte1“> <div Ausweis=„meineKarte“ Stil="Position: relativ; Breite: 600px; Höhe: 400px;">div> div> <div Ausweis=„Spalte2“> <div Ausweis='routeInfoPanel'> <ul Ausweis="sortierbar">ul> div> <Taste onclick=„DirectionComponent.calculateTour()“>BerechnenTaste> <Taste onclick=„DirectionComponent.saveWayPoints()“>SpeichernTaste> div> <div Ausweis='itineraryDiv' Stil="Position:relativ; Breite:400px;">div> div>
Ich hoffe der Artikel hat euch gefallen und kann nur jedem empfehlen die Bing Maps API auszuprobieren. Es lohnt sich!
Andreas Witt Alle Artikel des Autors
FAQs
What are the restrictions of Bing Maps API? ›
Account Limits for Basic Keys
You can have a maximum of 5 data sources per Bing Maps Account. The maximum number of entities a data source can have is 2,500 entities. Polygon shapefiles and KML files can have a maximum of 50 polygons and each polygon can have a maximum of 250 points.
A basic account and key provide 125,000 transactions per calendar year at no charge.
Which is more accurate Bing Maps or Google Maps? ›However, despite this, many independent reviewers describe Bing Maps to be one of the best maps available, rivaling even Google Maps. They state that Bing offers better image quality. They also maintain that Bing offers a friendlier and easier to follow API. Usage in countries.
How do I get my free Bing API key? ›To create a key, follow the steps below:
Sign in to the Bing Maps Dev Center with your Microsoft Account. Go to “My Account” and click on “My Keys.” Fill out the form and click “Create” and get your API key details. Build something amazing!
Azure Maps charges for the usage of interactive maps based on the number of map tiles loaded, whereas Bing Maps charges for the loading of the map control (sessions). To reduce costs for developers, Azure Maps automatically caches map tiles.
What are API restrictions? ›API restrictions allow you to specify which Google Cloud APIs can be called using the API key. We recommend that you add both client and API restrictions to all your API keys. You can specify one or more services in the API restrictions.
How much does Bing map API cost? ›Developers can use the Basic Key for building location intelligence-based apps with Bing Maps API for free.
How many places API requests are free? ›There are 1,000 free Places API lookups per 24 hours but you can increase them to 150,000 free lookups for 24 hours by Enabling Billing in Google Cloud Console.
How to use Maps API for free? ›Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.
What is the most accurate map made in the world? ›View the world in correct proportions with this map. You may not know this, but the world map you've been using since, say, kindergarten, is pretty wonky. The Mercator projection map is the most popular, but it is also riddled with inaccuracies.
What is the most accurate map used today? ›
Polar Projection
This type of projection shows the true areas and shapes of countries and continents, with very little distortion.
One Reddit user, for example, clearly prefers Google as their map app of choice: “Google if you want the most accurate directions and most accurate traffic.
How to get an API for free? ›- HubSpot API.
- Yahoo Search Marketing API.
- Common Crawl.
- Google APIs.
- WordPress APIs.
- Sejda PDF API.
- QRcode Monkey.
- Telegram API.
All Maps Embed API requests are available at no charge with unlimited usage.
Are all Google APIs free? ›All use of Google Search Console API is free of charge. However, it is subject to usage limits. Was this helpful?
What Maps API is best for your app? ›Google Maps API
Google Maps is the most popular SDK for embedding a map into an application. It's known for its huge database of places and decent routing. It has all the features of Google Maps for mobile app development: geocoding, routing, pictures, street view, and places information.
Bing Maps (previously Live Search Maps, Windows Live Maps, Windows Live Local, and MSN Virtual Earth) is a web mapping service provided as a part of Microsoft's Bing suite of search engines and powered by the Bing Maps Platform framework.
Is Bing Maps owned by Microsoft? ›Bing Maps Platform (previously Microsoft Virtual Earth) is a geospatial mapping platform produced by Microsoft.
When should you not use API? ›- It already has an API. Your system already has an API. ...
- It Will Break. Your API will break. ...
- It Will Change. Ha! ...
- It Will Be Slow. Your API will be slow. ...
- It Will Be Hard To Parse. I am sure many of you parsed JSON documents. “ ...
- 6: It Will Not Make You Money. ...
- Conclusion.
Today, there are three categories of API protocols or architectures: REST, RPC and SOAP. These might be dubbed "formats," each with unique characteristics and tradeoffs and employed for different purposes.
What is API misuse? ›
When developers use Application Programming Interfaces (APIs), they often make mistakes that can lead to bugs, system crashes, or security vulnerabilities. We refer to such mistakes as misuses. One example of a misuse is forgetting to call close() after opening a FileInputStream and writing to it.
What is a billable transaction Bing Maps? ›“Billable Transaction” means any of the following (with all capitalized terms as defined herein or in the Bing Maps Platform SDKs): (a) web services methods including but not limited to Imagery, Route, Geocode, Spatial Data and Search Services; (b) a session in the Bing Maps AJAX Control API, Bing Maps Windows ...
Are Bing Maps open source? ›Bing Maps is an open source, collaborative experience that greatly benefits our open source mapping software to enhance the overall experience of discovering new sights and experiences.
Is Bing Image Search API free? ›No upfront cost. No termination fees. Pay only for what you use. Bing Search APIs are available as part of the following Bing Search plans that provide greater value and flexibility.
What is the maximum API request? ›In the API Console, there is a similar quota referred to as Requests per 100 seconds per user. By default, it is set to 100 requests per 100 seconds per user and can be adjusted to a maximum value of 1,000. But the number of requests to the API is restricted to a maximum of 10 requests per second per user.
How do I get around API rate limit? ›When you use a proxy server, the request you send is routed to the proxy server. Then the proxy server gets the response and forwards the data to you. You won't need to deal with rate limited proxy since you can always use another one. Therefore, using a proxy server is the ultimate solution to IP rate limiting.
What counts as 1 API request? ›A personal email, a corporate email, or a website domain lookup would all count equivalently as one API request. API requests can be by way of direct access (ex. cURL command), your own application, or via a prebuilt integration (ex. Salesforce or Marketo).
Is there a free alternative to maps API? ›Mapbox is probably the most popular Google Maps API alternative developers and businesses use. They have been in business since 2010 and started as a free map data and analysis service for non-profit organizations.
Does Google have an API for maps? ›The Google Maps Platform is a set of APIs and SDKs that allows developers to embed Google Maps into mobile apps and web pages, or to retrieve data from Google Maps.
What is the free alternative to Google Directions API? ›One replacement for Google Directions API is GraphHopper. It is a routing engine written in Java which uses OpenStreetMap data. It is Open Source, extremly fast and suitable for self-hosting.
Are any maps 100% correct? ›
The short answer: absolutely not. Thanks to the varying distances between latitude lines away from the equator, the map pretty severely distorts surrounding landmasses. For example, tiny Greenland? Yeah, it's suddenly significantly bigger than places like African and South America.
Is Google Earth the most accurate map? ›When comparing Google Maps vs. Google Earth, we can see that both programs help us understand our world better. Both give us accurate views of any place in the world we might want to see, though Google Earth is more focused on those visuals than Google Maps.
What is the most widely used map? ›Cylindrical Projection – Mercator
One of the most famous map projections is the Mercator, created by a Flemish cartographer and geographer, Geradus Mercator in 1569. It became the standard map projection for nautical purposes because of its ability to represent lines of constant true direction.
US Topo maps are as accurate as the data sources used to make them, but because these sources are many and varied, it is not possible to make a single simple statement that the map as a whole meets a particular level of accuracy. US Topo maps, therefore, do not have a traditional accuracy statement in the map collar.
What is more accurate than a map? ›Globes are more accurate than maps for measuring the Earth because globes are a three-dimensional representation of the world, which itself is three-dimensional, while maps are flat, two-dimensional representations.
Is Africa bigger than North America? ›The continents are, from largest to smallest: Asia, Africa, North America, South America, Antarctica, Europe, and Australia.
Is Waze being discontinued? ›Google is merging the team it has working on the navigation app Waze into the same group that oversees Google Maps, the company has announced. The Wall Street Journal reports that the move is not expected to mark the end of Waze as a separate service, and no layoffs are planned as part of the reorganization.
Why is Waze so much better than Google Maps? ›Google Maps and Waze alike both let you report traffic hazards that you come across. However, Waze is better for displaying traffic cameras or speed traps. Of course, even Apple Maps now displays some road hazards for iPhone users, and it's far from the best navigation app.
Who has the most accurate driving directions? ›Google Maps
The accuracy of Google's detailed road maps is unparalleled, which is helpful if you'd like to plot a scenic route rather than driving on interstate highways or avoid toll routes (where possible).
How Much Does an API Cost to Build? On average, it costs $20,000 to build a relatively simple API. This figure assumes that you're building a secure, documented, fully-featured API with the services of an experienced API developer based in the United States.
Can anyone access an API? ›
For you to integrate any of the APIs on this platform, you need the required credentials, such as API key or password. And although public APIs are accessible to all users by default, they boast various settings that developers can use to regulate access.
Does using API cost money? ›For HTTP APIs and REST APIs, you pay only for the API calls you receive and the amount of data transferred out. There are no data transfer out charges for Private APIs. However, AWS PrivateLink charges apply when using Private APIs in API Gateway.
What is the free limit for Google Maps API? ›You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).
What is Bing Maps API? ›The Bing Maps Routing API enables optimized travel times both for consumers and commercial applications with location intelligence features using historical data.
How much does it cost to get Google API key? ›API Keys is currently free of charge. If you are using Cloud Endpoints to manage your API, you might incur charges at high traffic volumes. See the Endpoints pricing and quotas page for more information. 240 API calls per minute.
What is the most popular Google API? ›1. Google Sheets API. The Google Sheets API is perhaps the most used Google API there is.
Why is Google Maps free? ›Maps generates revenue from two primary means: (1) local ads that businesses post in order to attract customers and (2) custom maps using APIs that businesses can use for a variety of reasons that Google charges a price for.
Is Mapbox free? ›Pay one fee for each monthly active user (MAU) of your application. This option includes unlimited trips at no additional cost. A user of Mapbox services within your app during your month-long billing period including Directions API, Vector Tiles API, and Raster Tiles API requests.
What is the limit of Azure Maps API? ›| Azure Maps service | QPS Limit: Gen 2 Pricing Tier | QPS Limit: Gen 1 S1 Pricing Tier |
|---|---|---|
| Search service - Batch | 10 | 10 |
| Search service - Non-Batch | 500 | 500 |
| Search service - Non-Batch Reverse | 250 | 250 |
| Spatial service | 50 | 50 |
The Bing Maps Routing API enables optimized travel times both for consumers and commercial applications with location intelligence features using historical data.
What does Bing Maps API do? ›
- Location Intelligence.
- Location Data.
- Routing.
- Logistics.
- Web.
- Windows.
- Mobile.
- Mixed Reality.
The Bing Maps REST Services uses REST URLs to perform tasks such as creating a map with pushpins, geocoding an address, retrieving imagery metadata or calculating a route. The Bing Spatial Data Services uses REST URLs to geocode and reverse-geocode large sets of spatial data and to create and query data sources.
What is the quota limit for Google Maps API? ›Other usage limits
While there is no maximum number of requests per day, the following usage limits are in place for the Maps JavaScript API: 30,000 requests per minute. 300 requests per minute per IP address. In the Google Cloud Console, this quota is referred to as Map loads per minute per user.
If your requests come from more than one security principal, your limit across the subscription or tenant is greater than 12,000 and 1,200 per hour. These limits apply to each Azure Resource Manager instance.
What are default limits in Azure? ›By default, a maximum of 50,000 Azure AD resources can be created in a single tenant by users of the Azure Active Directory Free edition. If you have at least one verified domain, the default Azure AD service quota for your organization is extended to 300,000 Azure AD resources.
Does Bing Maps have a route planner? ›There are quite a few route planning and navigation apps like Google Maps, Waze, and Mapquest. But there is one such route planner that people often forget about: the Bing Maps route planner. Bing Maps is one of the original route planning and navigation apps to be made available to us.
Does Bing Maps still work? ›Currently, Bing Maps provides maps & level wise layouts of over 5300 venues across the world. The categories are: Airports, Amusement Parks, Buildings, Convention Centers, Hospitals, Malls, Museums, Parks, Racecourses, Racetracks, Resorts, Shopping Centers, Shopping Districts, Stadiums, Universities and Zoos.
Does Bing Maps use OpenStreetMap? ›The general Bing Map licence terms now include specific clauses relating to OpenStreetMap.
Is Google Maps API free? ›All Maps Embed API requests are available at no charge with unlimited usage.
Can Bing Maps be used offline? ›With the Bing Maps API, it's easy for developers of every skill level to create robust mapping experiences that can service thousands of concurrent users - online or offline. All it takes to get started with development is a key. Learn more about our API licensing options for your project.
How do I download data from Bing Maps? ›
In Bing Maps Dev Center, go to the Manage data sources page under Data sources and view the Published Data Sources tab. Find the data source, and click Download to start the download process. Data source downloads are in XML format and contain all entity data and the data schema.
How do I export data from Bing Maps? ›To export Bing Maps tiles, go to File > Export Web Format... and select Bing Maps (Virtual Earth) Tiles as the export format. Individual layers can also be exported from the Control Center by right-click on the layer and going to Layer > EXPORT.