我在哪里可以获得Geolocation API [关闭]

Question

I am looking for a geolocation API that I can plug into my PhpStorm project.

I need a dropdown that will firstly load all countries in the world, upon selection of a country another drop down will populate provinces/states based on country selected above. There after a dropdown that will populates cities based on the province or state above and lastly another dropdown that will populate surburbs of the city listed above.

Answer 1

here is your complete solution

use map api

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js

use this css

http://vikku.info/programming/js/geodata-jsr-class.js

<div class='main'>

<h1></h1>

    <form id="myform">
        <div class="contents">
<b>*Select area</b>

            <p><span>Continent:</span> 
                <select name="continent" id="continent" onchange="getplaces(this.value,'country');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>Country:</span> 
                <select name="country" id="country" onchange="getplaces(this.value,'province');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>State / Provice:</span> 
                <select name="province" id="province" onchange="getplaces(this.value,'region')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>County / Region:</span> 
                <select name="region" id="region" onchange="getplaces(this.value,'city')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>City:</span> 
                <select name="city" id="city" onchange="zoomto(this.value);codeAddress(placedata[this.value].name)">
                    <option value=""></option>
                </select>
            </p>
        </div>
    </form>
    <div id="map_canvas"></div>

javascript


var whos = null;
var placedata = [];
var map;
var geocoder = new google.maps.Geocoder();

function getplaces(gid, src) {
    if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
        switch (src) {
            case "continent":
                map.setZoom(3);
                break;
            case "country":
                map.setZoom(5);
                break;
            case "province":
                map.setZoom(6);
                break;
            case "region":
                map.setZoom(7);
                break;
            case "city":
                map.setZoom(8);
                break;
        }
        codeAddress(placedata[gid].name);
    }

    whos = src;


    //  var  request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long";
    var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long";
    aObj = new JSONscriptRequest(request);
    aObj.buildScriptTag();
    aObj.addScriptTag();
}

function listPlaces(jData) {
    counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount;
    who = document.getElementById(whos);
    who.options.length = 0;

    if (counts) who.options[who.options.length] = new Option('Select', '');
    else who.options[who.options.length] = new Option('No Data Available', 'NULL');

    for (var i = 0; i < counts; i++) {
        who.options[who.options.length] = new Option(jData.geonames[i].name, jData.geonames[i].geonameId);
        placedata[jData.geonames[i].geonameId] = jData.geonames[i];
    }

    delete jData;
    jData = null;
}
function zoomto(gid) {
   if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
       map.setZoom(14);
   }
}
function codeAddress(address) {
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (!!results && !!results[0] && !!results[0].geometry && !!results[0].geometry.viewport) {
                map.fitBounds(results[0].geometry.viewport);
            } else if (!!results && !!results[0] && !!results[0].geometry && !!results.geometry.bounds) {
                map.fitBounds(results[0].geometry.bounds);
            } else {
                map.setCenter(results[0].geometry.location);
            }
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

window.onload = function () {
    getplaces(6295630, 'continent');
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 3,
        center: {
            lat: 0,
            lng: 0
        }
    });
};

here is a fiddle :

http://jsfiddle.net/geocodezip/xq4h95ux/3/

if you simply want ip address and region of a user then you do it like so

$.getJSON("http://ip-api.com/json/?callback=?", function (data) {
    console.log(data);
    $('#IP_Address').append("Your IP: " + data.query);
    $('#Country').append("Your Country: " + data.country);
    $('#City').append("Your City: " + data.city);
    $('#region').append("Your Region : " + data.region);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="IP_Address"></div>
<div id="Country"></div>
<div id="City"></div>
<div id="region"></div>

if you want to get these information in php then you could use

http://www.geoplugin.net/php.gp

if you have ip address then you can pass it like so

http://www.geoplugin.net/php.gp?ip=$youIpAddress

(for this case 49.200.208.108)

it will dump

a:18:{s:17:"geoplugin_request";s:14:"49.200.208.108";s:16:"geoplugin_status";i:200;s:16:"geoplugin_credit";s:145:"Some of the returned data includes GeoLite data created by MaxMind, available from <a href=\'http://www.maxmind.com\'>http://www.maxmind.com</a>.";s:14:"geoplugin_city";s:6:"Mumbai";s:16:"geoplugin_region";s:13:"Mahārāshtra";s:18:"geoplugin_areaCode";s:1:"0";s:17:"geoplugin_dmaCode";s:1:"0";s:21:"geoplugin_countryCode";s:2:"IN";s:21:"geoplugin_countryName";s:5:"India";s:23:"geoplugin_continentCode";s:2:"AS";s:18:"geoplugin_latitude";s:6:"18.975";s:19:"geoplugin_longitude";s:7:"72.8258";s:20:"geoplugin_regionCode";s:2:"16";s:20:"geoplugin_regionName";s:13:"Mahārāshtra";s:22:"geoplugin_currencyCode";s:3:"INR";s:24:"geoplugin_currencySymbol";s:7:"&#8360;";s:29:"geoplugin_currencySymbol_UTF8";s:3:"₨";s:27:"geoplugin_currencyConverter";s:6:"66.695";}

unserialize the obtained data(or json_decode) and get all information

</div>