Here MapAPI,地图渲染失败
Here Map API, map rendering fails
我已经使用反向地理编码方法的值成功创建了地图、标记和信息气泡。对于 1 个位置,地图可以正常工作并相应地显示标记和信息气泡。但是,当我从后端传递两个位置值时(我正在使用 jsp),地图不会呈现。
我使用的函数是:addMarkerToGroup
、addInfoBubble
、onSuccess
、
function addMarkerToGroup(group, position, inf){
var marker = new H.map.Marker(position);
//add custom data to marker
marker.setData(inf);
group.addObject(marker);
}
function addInfoBubble(position,inf){
var group = set_map.group;
var map = set_map.map;
var ui = set_map.ui;
map.addObject(group);
//add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function(evt){
//event target is the marker itself, group is a parent event target
var bubble = new H.ui.InfoBubble(evt.target.getPosition(),{
// read custom data
content: evt.target.getData()
});
//show info bubble
ui.addBubble(bubble);
}, false);
addMarkerToGroup(group,position,inf);
}
function callback(){
var platform = new H.service.Platform({
app_id: '#',
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:your_location.latitude,lng:your_location.longitude}
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var group = new H.map.Group();
}
function onSuccess(result){
var index = your.count;
var myclt = your.get_yours(index);
var myttl = your.get_title(index);
var myinf = your.get_info(index);
var location = result.Response.View[0].Result[0];
var countryName, countryCode, province, city, zipcode;
countryName = location.Location.Address.Country;
countryCode = location.Location.Address.Country;
province = location.Location.Address.State;
zipcode = location.Location.Address.PostalCode;
city = location.Location.Address.City;
var address = "";
if (city && city != "") {
address = city;
}
if (province && province != "") {
if (address && address != "") {
address += ", " + province;
} else {
address = province;
}
}
if (zipcode && zipcode != "") {
if (address && address != "") {
address += ", " + zipcode;
} else {
address = zipcode;
}
}
if (countryName && countryName != "") {
if (address && address != "") {
address += ", " + countryName;
} else {
address = countryName;
}
}
$.ajax({
url: "view_remote_device_control.do",
data: {
mode: "update",
client_id: myclt,
city: city,
province: province,
zipcode: zipcode,
country: countryCode
},
type: "GET",
cache: false,
async: true
});
myttl += address;
var position = new H.geo.Point(location.Location.DisplayPosition.Latitude,location.Location.DisplayPosition.Longitude);
var inf = {content: location.Location.Address.Label};
var myinfo = inf.content;
addInfoBubble(here_maps_callback.map,position,inf.content,here_maps_callback.ui);
return myinf;
};
调试时出现错误:
未捕获 InvalidArgumentError:H.map.ViewModel#setCameraData(参数 #0 位置)
有点困惑回调是如何发生的,JavaScript 端最终检索到的两个位置在哪里?如果您直接通过 javascript 中的位置,您会遇到问题吗?我的意思是硬编码为测试?
好的,所以我意识到它没有渲染的原因是:
center: {lat:your_location.latitude,lng:your_location.longitude}
基本上由于传递了两个位置值,位置数组有两个纬度和经度值,它不知道用哪个来设置中心。通过将 lat 和 lng 的值都更改为 0 并使用:
map.setCenter(evt.target.getPosition());
在组事件侦听器中,它相应地呈现了地图。
希望对您有所帮助
我已经使用反向地理编码方法的值成功创建了地图、标记和信息气泡。对于 1 个位置,地图可以正常工作并相应地显示标记和信息气泡。但是,当我从后端传递两个位置值时(我正在使用 jsp),地图不会呈现。
我使用的函数是:addMarkerToGroup
、addInfoBubble
、onSuccess
、
function addMarkerToGroup(group, position, inf){
var marker = new H.map.Marker(position);
//add custom data to marker
marker.setData(inf);
group.addObject(marker);
}
function addInfoBubble(position,inf){
var group = set_map.group;
var map = set_map.map;
var ui = set_map.ui;
map.addObject(group);
//add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function(evt){
//event target is the marker itself, group is a parent event target
var bubble = new H.ui.InfoBubble(evt.target.getPosition(),{
// read custom data
content: evt.target.getData()
});
//show info bubble
ui.addBubble(bubble);
}, false);
addMarkerToGroup(group,position,inf);
}
function callback(){
var platform = new H.service.Platform({
app_id: '#',
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:your_location.latitude,lng:your_location.longitude}
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var group = new H.map.Group();
}
function onSuccess(result){
var index = your.count;
var myclt = your.get_yours(index);
var myttl = your.get_title(index);
var myinf = your.get_info(index);
var location = result.Response.View[0].Result[0];
var countryName, countryCode, province, city, zipcode;
countryName = location.Location.Address.Country;
countryCode = location.Location.Address.Country;
province = location.Location.Address.State;
zipcode = location.Location.Address.PostalCode;
city = location.Location.Address.City;
var address = "";
if (city && city != "") {
address = city;
}
if (province && province != "") {
if (address && address != "") {
address += ", " + province;
} else {
address = province;
}
}
if (zipcode && zipcode != "") {
if (address && address != "") {
address += ", " + zipcode;
} else {
address = zipcode;
}
}
if (countryName && countryName != "") {
if (address && address != "") {
address += ", " + countryName;
} else {
address = countryName;
}
}
$.ajax({
url: "view_remote_device_control.do",
data: {
mode: "update",
client_id: myclt,
city: city,
province: province,
zipcode: zipcode,
country: countryCode
},
type: "GET",
cache: false,
async: true
});
myttl += address;
var position = new H.geo.Point(location.Location.DisplayPosition.Latitude,location.Location.DisplayPosition.Longitude);
var inf = {content: location.Location.Address.Label};
var myinfo = inf.content;
addInfoBubble(here_maps_callback.map,position,inf.content,here_maps_callback.ui);
return myinf;
};
调试时出现错误:
未捕获 InvalidArgumentError:H.map.ViewModel#setCameraData(参数 #0 位置)
有点困惑回调是如何发生的,JavaScript 端最终检索到的两个位置在哪里?如果您直接通过 javascript 中的位置,您会遇到问题吗?我的意思是硬编码为测试?
好的,所以我意识到它没有渲染的原因是:
center: {lat:your_location.latitude,lng:your_location.longitude}
基本上由于传递了两个位置值,位置数组有两个纬度和经度值,它不知道用哪个来设置中心。通过将 lat 和 lng 的值都更改为 0 并使用:
map.setCenter(evt.target.getPosition());
在组事件侦听器中,它相应地呈现了地图。
希望对您有所帮助