javascript - グーグルの場所から近くの場所を取得し、結果からグーグルマップにマーカーを追加する

Question

編集：解決しました。問題コードの下の正しいコード。

コードを機能させるのに問題があります。私がやりたいのは、ジオロケーションを使用してユーザーの場所を特定することです。次に、文字列（この場合は半径2000の「Systembolaget」）から何かを検索して、結果をGoogleマップに表示したいと思います。地図上で自分の場所を取得しますが、私は場所の結果を取得するのに大きな問題があります。

私は何が間違っているのですか？私はjavascriptの経験があまりないので、すべてのヘルプは良いヘルプです。

コルドバスクリプトについて疑問がある場合は、phonegapアプリケーションを実行しているので必要です。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="cordova-1.6.0.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=true"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">
// Determine support for Geolocation and get location or give error
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}

// Success callback function
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    //Load Google Map
    var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Places
var request = {
    location: latlng,
    radius: '2000',
    name: ['Systembolaget']
};

var service = new google.maps.places.PlacesService(map);
service.search( request, callback );

function callback(results, status) 
{
    if (status == google.maps.places.PlacesServiceStatus.OK) 
    {
        for ( var i = 0; i < results.length; i++ ) 
        {
            var place = results[i];
            var loc = place.geometry.location;
            var marker = new google.maps.Marker
            ({
                position: new google.maps.LatLng(loc.Pa,loc.Qa)
            });
            marker.setMap(map);  
        }
    }
}

var marker = new google.maps.Marker({
     position: latlng, 
     map: map, 
     title:"You are here"
 });
}

// Error callback function
function errorFunction(pos) {
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
}
</script>
</head>
<body>
        <div id="map_canvas"></div>
</body>

解決しました！正しいコード！

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<title name="title"></title>

<link rel="stylesheet" type="text/css" href="style.css">
<script src="cordova-1.6.0.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">

// Determine support for Geolocation and get location or give error
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}

// Success callback function
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    //Load Google Map
    var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Places
var request = {
    location: latlng,
    radius: '20000',
    name: ['whatever']
};

var service = new google.maps.places.PlacesService(map);
service.search( request, callback );

function callback(results, status) 
{
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            var place = results[i];
            createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
        });
        }

var marker = new google.maps.Marker({
     position: latlng, 
     map: map, 
     title:"You're here"
 });


}

// Error callback function
function errorFunction(pos) {
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
}
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>

score 2 · Accepted Answer

どのように失敗しているかを正確に説明していないため、特定の支援を提供することは困難です。しかし、私がすぐに気付くことの 1 つは、google.maps スクリプトを 2 回読み込もうとしていてsensor、それぞれに異なる情報が含まれているように見えることです。最初の google.maps スクリプトタグにリテラルテキストMYAPIKEYを含めますが、これは間違っている必要があります。変数に実際のキーがある場合は、次のようになります。

src="http://maps.googleapis.com/maps/api/js?key=" + MYAPIKEY + "&sensor=true"

次に、2 番目のスクリプトタグで、Places ライブラリを正しくロードしているように見えますが、センサータグは次のように設定されていますsensor-false。2 番目のスクリプトタグの方が正しいように見えるので、最初のスクリプトタグを削除することをお勧めします。

そこから、ページがどのように失敗しているかについての詳細と、そのページへのリンクを提供していただけますか?

いくつかの追加の観察：

最初の if-else はdisplayPosition関数を呼び出すように見えますが、内部のコードdisplayPositionは Google マップをロードしません。関数が終了するとスコープ外になるいくつかの var を作成するだけです。
関数の外側でdisplayPosition、Google マップの新しいインスタンスを作成しますmyOptionsが、関数のスコープ内にのみ存在していたため、コードのこの時点では存在しないを参照していdisplayPositionます。

マップの作成に関連するコードを次のように変更することをお勧めします。

var map = null;
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}

// Success callback function
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    //Load Google Map
    var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

javascript - グーグルの場所から近くの場所を取得し、結果からグーグルマップにマーカーを追加する

1 に答える 1

Related

Reference