Javascript：如何將GPS坐標映射到圖像

Question

我是編程和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;
    },

};

Answer 1

這是獲取GPS位置的快速教程： HTML5地理位置

您基本上可以這樣撥打電話：

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

要將緯度/經度放置在圖像頂部，您必須知道圖像每個角的緯度/經度，然后進行一些數學運算。 除非您使用某些地理空間框架（例如Google Maps API或OpenLayers），否則可以為您完成數學運算。