Kann mir jemand sagen, wie bekomme ich einen einfachen Einbettungscode von hier Karten? Ich finde den Embed Button, der meiner Meinung nach auf keiner Kartenwebseite stehen sollte. Ironischerweise mache ich eine Website für hier, also darf ich keine Google Map bekommen. DankeHERE Karten Code einbetten
Für eine einfache statische HERE Karte sollten Sie sich die Map Image API ansehen - das wird ein einfaches Bild einbetten. Wenn Sie jedoch eine bewegliche Karte möchten, können Sie die HERE Maps API for JavaScript in einem IFrame verwenden und die Breiten-, Längen- und Zoomstufe Ihrer Wahl übergeben, z. so etwas wie:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css"
href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Obtains a value from a query string
* @param {String} name key in the query string
* @return {String} value
*/
function getParameterByName(name) {
name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'),
results = regex.exec(location.search);
return results === null ? '' :
decodeURIComponent(results[1].replace(/\+/g, ' '));
}
/**
* Moves the map to display at agiven location
* @param {H.Map} map A HERE Map instance within the application
*/
function moveMap(map, location, zoom){
var lat = getParameterByName('lat'),
lng = getParameterByName('lng');
zoom = getParameterByName('zoom');
map.setCenter({lat: lat, lng: lng});
map.setZoom(zoom);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: '<YOUR APP ID>',
app_code: '<YOUR APP CODE>',
useHttps: true
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map);
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
moveMap(map);
</script>
</body>
</html>
Die Iframe kann die Höhe und Breite genannt werden, festgelegt wird:
<iframe src=".../path-to-file/embed.html?lat=40.7057&lng=-73.9306&zoom=12" width="600" height="450" frameborder="0" style="border:0"></iframe>
Das Ergebnis ist so etwas wie dieses:
Natürlich könnte man dann hinzufügen in all den üblichen anderen Dingen, wie das Hinzufügen von Markern und so weiter, um die Karte zu machen, was Sie tun wollen, nicht nur was der Anbieter anbietet. Warum sollten Sie auf ein einzelnes Look-and-Feel beschränkt sein, wie es der Kartenanbieter anbietet?
Vielen Dank! das beantwortete meine Frage :) –
Irgendeine Idee, wie man die Info-Blase funktioniert? – Kailas
Ich weiß, ich bin eine Art Nekro Posting hier, aber als eine Beobachtung. hier ist es ein langer Weg, um in diesem Fall entwicklerfreundlich zu sein. Das ist eine Menge von Assets, um die Seite für sehr minimale Ergebnisse zu übergeben. –
Überprüfen Sie auch die schöne Sammlung von Beispielen: hereMaps.Github.io/Beispiele – joecks