从Google Maps API切换到Here Maps API

问题描述:

以前我使用Google Maps API作为地图界面,现在我正在切换到Here Maps API。我的应用程序使用struts和JSP。此前,与谷歌地图我装一个脚本,并回电像这样:从Google Maps API切换到Here Maps API

function loadGoogleMapsAPIScript(){ 
var script = document.createElement("script"); 
script.setAttribute("type","text/javascript"); 
var language = document.getElementsByTagName("html")[0].getAttribute("lang"); 

//we should use the same protocol as the web page: http or https. 
var href = window.location.href; 
protocol = href.substr(0, href.indexOf(':')); 

var src = protocol+"://maps.googleapis.com/maps/api/js"; 
src += "?v=3"; //Add google maps api version. 
src += "&sensor=false"; // sensor should always be false here. 
src += "&callback=google_maps_callback"; //add callback function. This function will be called 
             //after the script load successful. 
src += "&language="+language;   //add language. 
//} 
script.setAttribute("src", src); 
document.getElementsByTagName("head")[0].appendChild(script); 
} 

回调函数:

function google_maps_callback(){ 
var map_opt = { 
    zoom: your_location.map_zoom, 
    center: new google.maps.LatLng(0,0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var obj = your_location.map_obj; 
var map = new google.maps.Map(obj, map_opt); 
var infowin = new google.maps.InfoWindow(); 
var bounds = new google.maps.LatLngBounds(); 

for (var i =0; i < your_location.count; i++){ 
    bounds = add_marker(map, i, infowin, bounds); 
} 

if (your_location.count>0){ 
    map.fitBounds(bounds); 
    google.maps.event.addListenerOnce(
     map,"bounds_changed", 
     function(event){ 
      if(map.getZoom()>your_location.map_zoom){ 
       map.setZoom(your_location.map_zoom); 
      } 
     } 
    ); 
}else{ 
    map.setZoom(1); 
} 

} 

我创建了一个loadHereMapsAPIScript功能如此:

function loadHereMapsAPIScript(){ 

var script1 = document.createElement("script1"); 
script1.setAttribute("type","text/javascript"); 
script1.setAttribute("src","http://js.api.here.com/v3/3.0/mapsjs-core.js"); 
document.getElementByTagName("head")[0].appendChild(script1); 

var script2 = document.createElement("script2"); 
script2.setAttribute("type","text/javascript"); 
script2.setAttribute("src","http://js.api.here.com/v3/3.0/mapsjs-service.js"); 
document.getElementByTagName("head")[0].appendChild(script2); 

} 

会怎样我在loadHereMapsAPIScript中添加了一个回调方法来调用一个新函数here_maps callback(),它的功能和google_maps_callback()一样。我会首先定义平台,因为我会使用setCenter吗? :

function here_maps_callback(){ 
var platform = new H.service.Platform({ 
    app_id: 'myAPIId', 
    app_code: 'myAPICode' 
    useCIT: true, 
    useHTTPS: true 
}) 
var map_opt = { 
    zoom: clients_location.map_zoom, 
    center: new H.geo.Point(0,0), 

} 
} 

UPDATE

我已经提供了完整的回调函数用于这里的地图,模仿谷歌的回调函数。这与Dr.Molle给出的答案完全一致。

function here_maps_callback(){ 
var platform = new H.service.Platform({ 
    app_id: 'your-app-id', 
    app_code: 'your-app.code', 
    useCIT: true, 
    useHTTPS: true 
}); 

var defaultLayers = platform.createDefaultLayers(); 

var obj = your_location.map_obj; 

var map = new H.Map(
    obj, 
    defaultLayers.normal.map, 
    { 
     zoom:your_location.map_zoom, 
     center: {lat:0,lng:0} 
    }); 
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 

var ui = H.ui.UI.createDefault(map,defaultLayers); 

for (var i =0; i < your_location.count; i++){ 
    add_marker_here(map,index); 
    } 
} 
+0

你为什么要加载mapsjs-core.js两次? – duncan

HERE-API没有实现像google-maps-API那样的回调,你需要自己处理它。

当您异步加载脚本时,可以在运行回调的脚本中添加onload-处理程序。

但是当你使用HERE时,你还必须保持一个特定的加载顺序,因为这些模块有依赖关系。

E.g.当您加载服务 - 模你必须确保核心 - 模块已经被加载(见https://developer.here.com/javascript-apis/documentation/v3/maps/topics/overview.html#modules了解详细信息)

一种选择是使用一种链的加载模块,可能实现:

function loadHereMapsAPIScript(ss){ 
     if(!ss.length)return; 
     var s=ss.shift(); 

     if(typeof s==='function'){ 
      //run the callback 
      s(); 
      return; 
     } 
     if(typeof s!=='string')return; 
     //load a module 
     var script=document.createElement("script"); 
     script.setAttribute("type","text/javascript"); 
     document.getElementsByTagName('head')[0].appendChild(script) 
     script.onload=function(){loadHereMapsAPIScript(ss);} 
     script.setAttribute('src',s); 
    } 

    loadHereMapsAPIScript(
    [ 
     //the desired modules 
     'http://js.api.here.com/v3/3.0/mapsjs-core.js', 
     'http://js.api.here.com/v3/3.0/mapsjs-service.js', 
     //the callback to be executed when all modules have been loaded 
     here_maps_callback      
    ] 
    ); 
+0

你的意思是(ss) – 3rdeye7

+0

是否会在脚本URL和回调函数中的第二个语句在我的jsp中调用,然后将这些参数赋给函数loadHereMapsApi? – 3rdeye7

+0

'ss' ist传递给函数的参数(带有URL的数组)......第二个语句是函数调用。 –