2014-10-30 15 views
5

Birisi bana bu haritalardan nasıl basit bir katıştırma kodu aldığımı söyleyebilir mi? Ben sadece herhangi bir harita web sitesinde orada olmalı bence Gömülü düğmesini bulamıyorum. İronik bir şekilde burada bir web sitesi yapıyorum, bu yüzden bir Google haritasına giremiyorum. teşekkürlerHERE Maps Gömülmüş kod

+0

Ayrıca güzel örnek koleksiyonuna göz atın: heremaps.github.io/examples – joecks

cevap

4

Basit bir statik BURAYA Harita için Map Image API'a bakmalısınız - bu basit bir görüntü katıştıracaktır. Bununla birlikte, hareketli bir harita istiyorsanız, HERE Maps API for JavaScript'u IFrame numaralı telefondan kullanabilir ve seçiminizin enlem, boylam ve yakınlaştırma seviyesini örn. gibi bir şey:

Embedded New York

Tabii ki daha sonra ekleyebilirsiniz:

<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> 

sonuç böyle bir şeydir:

<!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> 

Iframe yüksekliğini ve genişliğini çağrılabilir Haritaları ekleyebilmek için her zamanki gibi diğer kalemlerde de, nolu haritayı yapmak için, sadece sağlayıcının sunduğu şeyi değil. Neden harita sağlayıcı tarafından sunulan tek bir görünüm ve izlenim ile sınırlı olmalısınız?

+0

Teşekkürler çok! Bu benim soru cevap :) –

+1

Herhangi bir fikir nasıl bilgi kabarcık çalışmak için? – Kailas

+0

Burada necro'nun bir tür imgesini biliyorum ama bir gözlem olarak. Burada bu durumda geliştirici dostu olmak için gitmek için uzun bir yol var. Bu, çok az sonuç için sayfada geçirilecek çok sayıda varlık var. –