从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);
}
}
答
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
]
);
你为什么要加载mapsjs-core.js两次? – duncan