2014-10-30 86 views
5

有人能告诉我如何从这里获取简单的嵌入代码地图吗?我根本无法找到在我看来应该在任何地图网站上的嵌入按钮。具有讽刺意味的是,我在这里制作一个网站,所以我不能获得谷歌地图。谢谢HERE地图嵌入代码

+0

也检查了很好的例子集合:heremaps.github.io/examples – joecks 2016-01-05 14:26:43

回答

4

对于一个简单的静态HERE地图,你应该看看Map Image API - 这会嵌入一个简单的图像。但是,如果您需要可移动的地图,则可以使用HERE Maps API for JavaScript中的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可以称为指定高度和宽度:

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

的结果是这样的:

Embedded New York

当然,你可以再加入在所有通常的其他东西,如添加标记等,使地图做你的东西想要的,不仅仅是供应商提供什么。为什么你应该限制在地图提供商提供的单一外观和感觉上?

+0

非常感谢!那回答了我的问题:) – 2014-11-06 10:12:50

+1

任何想法如何让信息气泡工作? – Kailas 2015-02-02 10:05:01

+0

我知道这里有一些necro在这里张贴,但作为观察。在这种情况下,要成为开发者友好者还有很长的路要走。这是很多资产在页面上传递以获得最少的结果。 – 2016-05-13 03:41:25