2015-07-21 117 views
-1

以前我使用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

回答

2

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的數組)......第二個語句是函數調用。 –