Javascript:如何将gps坐标映射到图像

时间:2015-04-24 12:10:09

标签: javascript html5 gps

我是编程和JavaScript的新手。我一直在开发Android平板电脑的应用程序,只需点击一下即可打开图像文件。现在我有一张图片显示了我邻居的地图。我想要在没有无线网络连接的情况下在此图像上显示我的GPS位置。我该怎么做呢?我正在使用Jo框架,因为正在使用该应用程序的另一个人使用它,虽然我不确定原因。

这段代码给出了一个错误" ReferenceError:sp未定义" //显示可用地图列表

var MapsCard = {
cardName: "mapsCard",



init: function () {
    "use strict";
    /*jslint newcap: true */
    joCache.set(this.cardName, function () {
        this.card = new joCard(new joFlexcol([
        this.title = new joTitle("Maps"),   
        //fancy toggle button
        new joLabel("GPS"),
        new joToggle(("isActive")),
        //Select maps dropdown
       this.dropdownlist = new joSelect([ "map1", "map2"]),
        ]));
        // respond to the change event
       this.dropdownlist.selectEvent.subscribe(this.openmaps, this);
       return this.card;
    }.bind(this));
},

openmaps: function(value) {
    console.log(value);
    console.log("Loading picture ........" + value);
    //For different value load different maps.
    if(value == 0) {
        var win1 = window.open('');
        var img1 = win1.document.createElement("img");
        img1.src = "image1.png";
        win1.document.body.appendChild(img1);
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(sp);
                        console.log("navigator.geolocation Works");
        } else {
            console.log("Geolocation is not supported");
                }
             }  
    if(value == 1) {
        var win2 = window.open('');
        var img2 = win2.document.createElement("img");
        img2.src = "image2.png";
        win2.document.body.appendChild(img2);

    }
},

    sp: function(position) {
            //console.log(position.coords.latitude);
            //console.log(position.coords.longitude);
            console.log("Works....");
    },      

activate: function () {
    "use strict";
    this.active = true;
    },

deactivate: function () {
        "use strict";
            this.active = false;
    },

};

1 个答案:

答案 0 :(得分:2)

以下是获取GPS位置的快速教程: HTML5 Geolocation

你基本上打这样的电话:

<script>
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; 
}
</script>

要将lat / lon点放在图像的顶部,您必须知道图像每个角的纬度/经度,然后进行一些数学运算。除非您使用某些地理空间框架,例如Google Maps API或OpenLayers,否则可以为您完成数学运算。