2014-10-30 1 views
5

누군가가 내가 여기에지도에서 간단한 소스 코드를 가져 오는 방법을 말해 줄 수 있습니까? 내 생각에 모든지도 웹 사이트에 있어야하는 Embed 버튼을 찾을 수 없습니다. 아이러니하게도 나는 여기에 웹 사이트를 만들기 때문에 나는 구글 맵을 얻을 수 없다. 덕분에여기에지도 소스 코드

+0

멋진 예제 콜렉션도 확인하십시오. heremaps.github.io/examples – joecks

답변

4

간단한 정적 HERE지도에 대해서는 Map Image API을보아야합니다.이 간단한 이미지가 포함됩니다. 그러나 이동 가능지도가 필요한 경우 IFrame에서 HERE Maps API for JavaScript을 사용하고 원하는 위도, 경도 및 확대/축소 수준을 전달할 수 있습니다. 예 : 뭔가 같은 :

Embedded New York

물론 당신이 다음 추가 할 수 있습니다

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

결과이 같은 것입니다 :

<!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은 높이와 너비를 지정하는 호출 할 수 있습니다 지도를 만들기 위해 마커 등을 추가하는 것과 같은 일반적인 것들도 모두 은 공급자가 제공하는 것이 아니라 원하는 것입니다. 지도 서비스 제공 업체가 제공하는 단일 룩앤필에 제한되어야하는 이유는 무엇입니까?

+0

고마워요! 그건 내 질문에 대답 :) –

+1

어떤 아이디어 정보 버블 작동하는 방법? – Kailas

+0

나는 여기에 일종의 necro 게시하지만 관찰로서 알아. 이 경우에는 개발자 친화적 인 방향으로 갈 길이 멀다. 이는 매우 적은 결과를 위해 페이지에 전달할 많은 자산입니다. –