Question

您好我遇到了问题。我试图借助Java Script在Google Maps中获取当前位置。它是一门编程课程，我不允许硬编码或所谓的静态，它必须适用于每个位置。这是我的代码：

var index = 0;

var yCoords = "dummy";

var contentstring = [];
var regionlocation = [];
var markers = [];
var iterator = 0;
var areaiterator = 0;
var map;
var infowindow = [];
geocoder = new google.maps.Geocoder();

$(document).ready(function () {
    setTimeout(function() { initialize(); }, 400);
});

function initialize() {
    infowindow = [];
    markers = [];
    GetValues();
    iterator = 0;
    areaiterator = 0;
    region = new google.maps.LatLng(regionlocation[areaiterator].split(',')[0], regionlocation[areaiterator].split(',')[1]);
    map = new google.maps.Map(document.getElementById("Map"), {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: region,
    });
    drop();
}

function GetValues() {

    //Get the Latitude and Longitude of a Point site : http://itouchmap.com/latlong.html
    contentstring[index] = "BTH Karlshamn<br><a target='_blank' href='http://edu.bth.se/utbildning/utb_program.asp?PtKod=MEGWU15h'>Webbutveckling</a><br><a href='http://www.bth.se/dite'>DITE</a>";
    regionlocation[index] = '56.164226, 14.866160';

    index++;

    contentstring[index] = "Campus Gräsvik<br><a href='http://www.bth.se'>BTH</a>";
    regionlocation[index] = '56.182034, 15.591874';

    index++;

    contentstring[index] = "Mattias Schertell<br><img src='https://pbs.twimg.com/profile_images/1896369837/redDSC_8716.jpg' width='20px' heught='25px'>";
    regionlocation[index] = "56.258169, 15.630122";

    index++;
    contentstring[index] = "edLaika's Palace<br><img src='https://scontent-ams3-1.xx.fbcdn.net/hphotos-xtf1/v/t1.0-9/11831661_10206060455982308_3558780248897683245_n.jpg?oh=4c0d53eaee2f1f2430625279e5d38fa7&oe=56363AD0' width='20px' heught='25px'>";
    regionlocation[index] = "56.261976, 14.764781";

    index++;


}


function drop() {
    for (var i = 0; i < contentstring.length; i++) {
        setTimeout(function() {
            addMarker();
        }, 800);
    }
}

function addMarker() {
    var address = contentstring[areaiterator];
    var icons = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
    var templat = regionlocation[areaiterator].split(',')[0];
    var templong = regionlocation[areaiterator].split(',')[1];
    var temp_latLng = new google.maps.LatLng(templat, templong);
    markers.push(new google.maps.Marker(
    {
        position: temp_latLng,
        map: map,
        icon: icons,
        draggable: false
    }));
    iterator++;
    info(iterator);
    areaiterator++;
}

function info(i) {
    infowindow[i] = new google.maps.InfoWindow({
        content: contentstring[i - 1]
    });
    infowindow[i].content = contentstring[i - 1];
    google.maps.event.addListener(markers[i - 1], 'click', function() {
        for (var j = 1; j < contentstring.length + 1; j++) {
            infowindow[j].close();
        }
        infowindow[i].open(map, markers[i - 1]);
    });
}

我是JS新手的任何建议。谢谢它应该在地图上显示当前位置。我在Stack Overflow中尝试了一些他们不能工作的例子。

Answer 1

您可以使用HTML5地理位置对象，例如

<强> HTML

<div id="Map" style="width:600px;height:400px"></div>

<button onclick="addMyPosition()">Add my position</button>

<强> JS

function addMyPosition(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        alert("Browser doesn't support Geolocation");
    }
}
function showPosition(position) {
    contentstring.push("Your current position");
    regionlocation.push(position.coords.latitude + ", " + position.coords.longitude);
    addMarker();
    drop();
}
function showError(error) {
    var Error = "";
    switch(error.code) {
        case error.PERMISSION_DENIED:
            Error = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            Error = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            Error = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            Error = "An unknown error occurred."
            break;
    }
    alert(Error);
}

JSFiddle demo

Google Maps API JavaScript当前位置

1 个答案: