从 Google 地图 API 切换到此处地图 API

Switching from Google Maps API to Here Maps API

以前我使用Google地图API作为地图界面,我现在切换到Here Maps API。我的应用程序使用 struts 和 JSP。以前,使用 google 地图我加载了一个脚本并这样回调:

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);
}

}

我已经创建了一个 loadHereMapsAPI脚本函数:

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

}

我如何将回调方法添加到 loadHereMapsAPI 脚本中以调用新函数 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),

}
}

更新

我已经为 Here Maps 提供了完整的回调函数,它模仿了 google 回调函数。这与 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);
    }
}

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

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

但是当您使用 HERE 时,您还必须保持特定的加载顺序,因为模块存在依赖关系。

例如当你加载 service-module 时,你必须确保 core-module 已经被加载。(详见 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                      
    ]
   );