MapQuest térkép api használata:
A szabály itt is azonos a header részben be kell tölteni az js és css könyvtárakat. A web lap betöltési eseményéhez kötve indítani kell a térkép réteg aktiválását. Induló pozíciót és a nagyítás mértékét meg kell adni. A képernyő pont pozicióját attributumait és esemény kezelőjét be kell állítani. És már működik is.
Megjegyzés ként itt az api meghívás key (kulcs) értékébe saját kulcsot is meg kell adni.
Ezt fejlesztői adminisztráció után lehet kérni.
Minta:
<html>
<head>
<script src="https://open.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=xxx"></script>
<script type="text/javascript">
MQA.EventUtil.observe(window, 'load', function() {
var options={
elt:document.getElementById('map'),
zoom:10, /*initial zoom level of map*/
latLng:{lat:47.245943, lng:19.438089}, /*center of map in latitude/longitude*/
mtype:'map' /*map type (map)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', function() {
map.addControl(
new MQA.LargeZoom(),
// Placement of the controls
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(25,25))
);
});
var basic=new MQA.Poi( {lat:47.243943, lng:19.43889} );
map.addShape(basic);
MQA.withModule('shapes', function() {
var line = new MQA.LineOverlay();
line.setShapePoints([47.233041, 19.4318492, 47.247136, 19.474787]);
map.addShape(line);
});
});
</script>
<title>MapQuest</title></head>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<body>
<div id='map'></div>
</body>
</html>
<head>
<script src="https://open.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=xxx"></script>
<script type="text/javascript">
MQA.EventUtil.observe(window, 'load', function() {
var options={
elt:document.getElementById('map'),
zoom:10, /*initial zoom level of map*/
latLng:{lat:47.245943, lng:19.438089}, /*center of map in latitude/longitude*/
mtype:'map' /*map type (map)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', function() {
map.addControl(
new MQA.LargeZoom(),
// Placement of the controls
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(25,25))
);
});
var basic=new MQA.Poi( {lat:47.243943, lng:19.43889} );
map.addShape(basic);
MQA.withModule('shapes', function() {
var line = new MQA.LineOverlay();
line.setShapePoints([47.233041, 19.4318492, 47.247136, 19.474787]);
map.addShape(line);
});
});
</script>
<title>MapQuest</title></head>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<body>
<div id='map'></div>
</body>
</html>
Link:
https://mierdekel.hu/mapquest/
Nincsenek megjegyzések:
Megjegyzés küldése
Megjegyzés: Megjegyzéseket csak a blog tagjai írhatnak a blogba.