1

Javascript を使用した Google ジオロケーションは、Firefox や Chrome などの主要なブラウザーのライブ サイトでは機能しません。ジオロケーションの結果はライブ サイトの Opera に表示されますが、すべてのブラウザ (Chrome、firefox、Opera) のローカルホストでも同じように機能します。https:// を使用したマイ ライブ サイト プロトコル。以下のコードを参照して、提案してください. Geolocation and Google Maps API

<script src="http://maps.google.com/maps/api/js?key=MY_KEY_HERE&sensor=true"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>

function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {

//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
var cityname = city.long_name;
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("address").innerHTML = results[0].formatted_address;
document.getElementById("citynm").innerHTML = cityname;  }
else {
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>"; }
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);

var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}

function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}

function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>
4

3 に答える 3

1

コード (Chrome v29、Windows 8) をテストしました。以下はリモート サーバー (非ローカル ホスト) から動作しますが、注記 2 領域が必要です。

<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>

v=3.9 を追加しました

function writeAddressName(latLng) {
    ...
    if (results[0].address_components[i].types[b] == "route") {

都市を設定できない場合は、対処する必要がある場合があります。

住所が見えます。【このサンプルには地図表示は含まれていません】

<!DOCTYPE html>
<html>
<head>

<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
<script>
function writeAddressName(latLng) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "location": latLng }, function(results, status) {
        for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {
                //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "route") {
                //this is the object you are looking for
                    city = results[0].address_components[i];
                    break;
                }
            }
        }
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
        var cityname = city.long_name;
        if (status == google.maps.GeocoderStatus.OK) {
            document.getElementById("address").innerHTML = results[0].formatted_address;
            document.getElementById("citynm").innerHTML = cityname;
        }
        else {
            document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>";
        }
    });
}

function geolocationSuccess(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
    writeAddressName(userLatLng);

    var myOptions = {
        zoom : 16,
        center : userLatLng,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
    // Place the marker
    new google.maps.Marker({
        map: mapObject,
        position: userLatLng
    });
// Draw a circle around the user position to have an idea of the current localization accuracy
    var circle = new google.maps.Circle({
        center: userLatLng,
        radius: position.coords.accuracy,
        map: mapObject,
        fillColor: '#0000FF',
        fillOpacity: 0.5,
        strokeColor: '#0000FF',
        strokeOpacity: 1.0
    });
    mapObject.fitBounds(circle.getBounds());
}

function geolocationError(positionError) {
    document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}

function geolocateUser() {
    // If the browser supports the Geolocation API
    if (navigator.geolocation) {
        var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
        };
        navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
    }
    else
    document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="error"></p>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>
于 2013-09-05T07:35:42.693 に答える
0

このリンクが役立つかもしれません

https://developers.google.com/maps/articles/geocodestrat

Google マップ API は localhost では機能しますが、Web サーバーでは機能しません

于 2013-09-05T06:52:32.843 に答える
0
https://developers.google.com/maps/faq?hl=en&csw=1#browsersupport



https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

http://jsfiddle.net/BQzLq/3/

https://support.google.com/maps/answer/21849?hl=en

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

These all links is just for your knowledge in some browser or browser's older versions google map v3 doesn't works.
于 2013-09-05T07:02:33.603 に答える