从 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
]
);
以前我使用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
]
);