Google maps 从数据库（db2）检索纬度和经度并在IBM worklight的地图中显示

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

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

我的做法：

代码：

var-mylat；
var mylon；
var clat；
变异克隆；
函数maplo（）{
//数据库值，我已将它们存储在文本输入类型中
clat=$（“#lati”）.val（）；
clon=$（“#long”）.val（）；
}
var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
x、 innerHTML=“纬度：”+position.coords.Latitude+
“
经度：”+position.coords.Longitude；
mylat=位置坐标纬度；
mylon=position.coords.longitude；
}
功能成功（职位）{
//重新加载（）；
maplo（）；
showPosition（位置）；
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；
警报（“自定义纬度为：“+平坦”）；
var coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
var coords1=新的google.maps.LatLng（flat，flon）；
变量选项={
缩放：16，
中心：coords，
mapTypeControl:false，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapcontainer”），选项）；
var marker=new google.maps.marker({
职位：coords，
地图：地图，
标题：“你在这里！”
});
var geolocation=new google.maps.Marker({
职位：coords1，
地图：地图，
标题：“你的汽车位置”，
图标：'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
}
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（成功）；
}否则{
错误（“不支持地理位置”）；
}
函数searchcarl（）
{
var a=$（“#searchcar”）.val（）；
变量调用数据={
适配器：'park'，
程序：“程序4”，
参数：[a]
};
var期权={
成功：成功6，
onFailure:fail6
};
WL.Client.invokeProcess（调用数据、选项）；
}
函数成功6（结果）{
如果（（result.invocationResult.resultSet.length）>0）
{
警报（“位置抓取！”）；
var I=result.invocationResult.resultSet[0].LAT；
var J=result.invocationResult.resultSet[0].LON；
$（“#lati”）.val（I）；
$（“#long”）.val（J）；
}
否则{
警报（“用户名或密码不正确！”）；
window.location.assign（“#log”）；
}
}
功能失效6（）
{
警报（“故障6”）；
}

我将按如下方式更新代码：

// 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

您能否确认您确实检索到了该值，并且该值是您所期望的（在警报中打印它…）。在打开DevTools控制台的情况下，通过Chrome中的Worklight控制台预览应用程序。您是否看到任何错误？如果您问我从数据库中检索到所需值的位置是否正确，那么答案是肯定的。但我的问题是，从数据库中检索到的值存储在两个变量（纬度和经度）中，但无法将其正确传递到success函数中。您需要解释代码。这两个变量是什么？氏族/朗还是迈兰/朗？什么是克隆？您是从HTML而不是数据库中获取它的。函数success6（result）{if（（result.invocationResult.resultSet.length）>0）{alert（“位置抓取”）；var I=result.invocationResult.resultSet[0]。LAT；var J=result.invocationResult.resultSet[0]。LON；$（“#lati”）.val（I）；$（“#long”）.val（J）}else{alert(“用户名或密码不正确！”；window.location.assign（#log”）；}在这个函数中，我从数据库中检索纬度和经度，并将它们放在id为lati和long的文本区域中。在这个页面中，我从这些文本字段中提取值，并将它们存储在全局变量clat和clon中。如果从数据库中提取，为什么需要将它们放在HTML中，然后再放在JS中的变量中？为什么不把它们直接放在调用结果的JS中的值中呢？非常感谢你的代码。但是在写了这段代码之后，地图出现在应用程序前面，实际上它与我的应用程序的默认页面重叠。我该怎么办？非常感谢Yoel Nunez，问题已经解决了。但是我需要另一个帮助。我如何显示betwe的路线

// 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");
}