从数据库 (db2) 中检索纬度和经度并在 IBM worklight 的地图中显示

Question

我已将纬度和经度保存在数据库 (db2) 中。我想使用它们来显示它们在 map.I 中的位置。我正在使用 IBM Worklight，作为数据库，我正在使用 DB2。我的问题是我可以从数据库中检索值，将其存储在一个变量中，但无法将值传递到可以用作纬度和经度的地图函数中。

Any positive help would be appreciated.Thanks in advance.

我的做法：

代码：

    var mylat;
    var mylon;
    var clat;
    var clon;


    function maplo() {

    //database value,I have stored them in a text input type

         clat=$("#lati").val(); 
         clon=$("#long").val();


    }


    var x = document.getElementById("demo");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        mylat=position.coords.latitude;
        mylon=position.coords.longitude;
    }

    function success(position) {
        //reload();
        maplo();
        showPosition(position); 



        var mapcanvas = document.createElement('div');
          mapcanvas.id = 'mapcontainer';
          mapcanvas.style.height = '460px';
          mapcanvas.style.width = '320px';

          document.querySelector('article').appendChild(mapcanvas);


            var flat=clat;
            var flon=clon;
            alert("custom latitude is : "+flat);

          var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          var coords1 = new google.maps.LatLng(flat, flon);
          var options = {
            zoom: 16,
            center: coords,
            mapTypeControl: false,
            navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

          var marker = new google.maps.Marker({
              position: coords,
              map: map,
              title:"You are here!"
          });

          var geolocation = new google.maps.Marker({
              position: coords1,
              map: map,
              title: 'Your car location',
              icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
          });

        }



        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(success);
        } else {
          error('Geo Location is not supported');
        }


function searchcarl()
{

var a=$("#searchcar").val();
var invocationData={
        adapter:'park',
            procedure :'procedure4',
            parameters:[a]
};
var options={
    onSuccess:success6,
    onFailure:fail6

};

WL.Client.invokeProcedure(invocationData, options);
}




function success6(result){
    if((result.invocationResult.resultSet.length)>0)
    {
        alert("location fetching!");
        var I=result.invocationResult.resultSet[0].LAT;
        var J=result.invocationResult.resultSet[0].LON;


        $("#lati").val(I);
        $("#long").val(J);
    }

    else{
        alert("Incorrect Username or Password!");
        window.location.assign("#log");
    }
}
function fail6()
{
    alert("fail6");
}

Answer 1

我会更新代码如下：

// create a map global variable 
var map;

function initMap(position) {

  var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcontainer';
    mapcanvas.style.height = '460px';
    mapcanvas.style.width = '320px';

    document.querySelector('body').appendChild(mapcanvas);

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var options = {
        zoom : 16,
        center : coords,
        mapTypeControl : false,
        navigationControlOptions : {
            style : google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

  map = new google.maps.Map(document.getElementById("mapcontainer"), options);

    var marker = new google.maps.Marker({
        position : coords,
        map : map,
        title : "You are here!"
    });
}

// adds a marker to the map
function addCarLocationMarker(lat, lng) {

  var coords = new google.maps.LatLng(lat, lng);

  var geolocation = new google.maps.Marker({
        position : cords,
        map : map,
        title : 'Your car location',
        icon : 'http://labs.google.com/ridefinder/images/mm_20_green.png'
    });
}


if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    // once you know the user location, init the map
    initMap(position);
  });

} else {
    alert('Geo Location is not supported');
}



function searchcarl() {

    var a = $("#searchcar").val();
    var invocationData = {
        adapter : 'park',
        procedure : 'procedure4',
        parameters : [ a ]
    };
    var options = {
        onSuccess : adapterSuccess,
        onFailure : adapterFailed

    };

    WL.Client.invokeProcedure(invocationData, options);
}

function adapterSuccess(result) {
    if ((result.invocationResult.resultSet.length) > 0) {
        alert("location fetching!");
        var I = result.invocationResult.resultSet[0].LAT;
        var J = result.invocationResult.resultSet[0].LON;

    // add the marker directly to the map
    addCarLocationMarker(I, J);
    }

    else {
        alert("Incorrect Username or Password!");
        window.location.assign("#log");
    }
}

function adapterFailed() {
    alert("adapter invocation failed");
}

就像 Idan 提到的那样，将坐标存储在文本框中然后使用文本框作为坐标的来源并不是一个好主意。

您应该在从适配器收到坐标后直接添加标记。在这种情况下，我创建了一个单独的函数 initMap 来初始化地图并将其以当前用户的位置为中心。使您的函数更小以执行一项任务是个好主意。

我删除了一些我认为您不需要或重复的功能，即 maplo、getLocation 和 showPosition。

从数据库 (db2) 中检索纬度和经度并在 IBM worklight 的地图中显示

retrieving latitude and longitude from database(db2) and show in map in IBM worklight

google-maps

geolocation

ibm-mobilefirst