Question

Ive successfully created a map, marker and infobubble that uses values from reverse geocoding method. With 1 location, the map works fine and displays the marker and info bubble accordingly. However when i pass two location values from the backend (i am using jsp) the map does not render.

Functions I use are: 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;

};

While debugging I get the error:

Uncaught InvalidArgumentError: H.map.ViewModel#setCameraData (Argument #0 position)

Answer 1

好的，所以我意识到它不能渲染的原因是：

center: {lat:your_location.latitude,lng:your_location.longitude}

基本上由于传递了两个位置值，位置数组有两个纬度和经度值，并且它不知道用于设置中心的位置。通过将lat和lng的值都更改为0并使用：

map.setCenter(evt.target.getPosition());

在组事件侦听器中，它相应地渲染了地图。

希望这是有帮助的

Answer 2

有点混淆回调是如何发生的，最终在JavaScript端检索到的两个位置在哪里？如果你直接在javascript中传递位置，你是否面临这个问题，我的意思是硬编码为测试？

Here Map API, map rendering fails

2 个答案: