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

Question

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

任何积极的帮助将不胜感激。提前谢谢。

我的方法：

法典：

    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。