-1
次のCordova Geoplocationの例（https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/#find-stores-near-you）を動作させようとしていますが、HTMLは提供されていません。要するに、私はユーザーの現在の場所を取得し、近くのレストランを一覧表示するためのアプリが必要です。私は、Google Places APIを使用した例で一般的に使用されているように使って即興を試みましたが、運はありません。コンソールにエラーメッセージが表示されません。Cordova Geolocationのサンプルが動作しない
私は入手できますか出力は次のようになります。
navigator.geolocationがうまく機能
45.5039025 -73.5639405
マイコード：
<head>
<style>
#map{height:100%; width:100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATmobTWsilWKnIIhYzzHbjT6WEQp8K7kc&libraries&libraries=places"></script>
<script>
var Map;
var Infowindow;
var Latitude = undefined;
var Longitude = undefined;
// Get geo coordinates
function getPlacesLocation() {
navigator.geolocation.getCurrentPosition
(onPlacesSuccess, onPlacesError, {enableHighAccuracy:true});
}
// Success callback for get geo coordinates
var onPlacesSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
console.log(Latitude + " " + Longitude);
}
// Get places by using coordinates
function getPlaces(latitude, longitude) {
console.log("Here");
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("places"), mapOptions);
Infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(Map);
service.nearbySearch({
location:latLong,
radius:1500,
type:['restaurant']
}, foundStoresCallback);
}
// Success callback for watching your changing position
var onPlacesWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getPlaces(updatedLatitude, updatedLongitude);
}
}
// Success callback for locating stores in the area
function foundStoresCallback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
// Place a pin for each store on the map
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: Map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
Infowindow.setContent(place.name);
Infowindow.open(Map, this);
});
}
// Error callback
function onPlacesError(error) {
console.log('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
// Watch your changing position
function watchPlacesPosition() {
return navigator.geolocation.watchPosition
(onPlacesWatchSuccess, onPlacesError, {enableHighAccuracy:true});
}
</script>
</head>
<body>
<nav id="menu" class="menu">
<div data-bind="with: selectedLanguage">
<a href="index.html">
<header class="menu-header">
<span data-bind="text:home" class="menu-header-title">Home</span>
</header>
</a>
<a href="upcoming_plates.html">
<header class="menu-header">
<span data-bind="text:upcoming" class="menu-header-title">Upcoming Plates</span>
</header>
</a>
<a href="previous_plates.html">
<header class="menu-header">
<span class="menu-header-title">Previous Plates</span>
</header>
</a>
<a href="notifications.html">
<header class="menu-header">
<span class="menu-header-title">Notifications</span>
</header>
</a>
<a href="preferences.html">
<header class="menu-header">
<span class="menu-header-title">Preferences</span>
</header>
</a>
<a href="invite.html">
<header class="menu-header">
<span class="menu-header-title">Invite</span>
</header>
</a>
<a href="feature_my_restaurant.html">
<header class="menu-header">
<span class="menu-header-title">Feature My Restaurant</span>
</header>
</a>
<a href="account_settings.html">
<header class="menu-header">
<span class="menu-header-title">Account Settings</span>
</header>
</a>
</div>
</nav>
<main id="panel" class="panel">
<header class="panel-header">
<button class="btn-hamburger js-slideout-toggle"></button>
<h1 class="title">Title</h1>
<select data-bind="options:languages, optionsText:'name', value:selectedLanguage"></select>
</header>
<section class="box">
<div id="map"></div>
</section>
<!--
<footer class="panel-footer">
<p>with <span class="heart">❤</span> by <a href="https://getmango.com/en" target="_blank">Mango</a></p>
</footer>
-->
</main>
<script src="dist/slideout.js"></script>
<script src="js/languages.js"></script>
<script>
window.onload = function() {
var Language = function (language) {
this.name = language.name;
this.home = language.home;
this.upcoming = language.upcoming;
//this.header = language.header;
//this.subHeader = language.subHeader;
//this.body =language.body;
};
var ViewModel = function (data) {
var self = this;
self.languages = ko.observableArray(
ko.utils.arrayMap(data, function (i) {
return new Language(i);
}));
self.selectedLanguage = ko.observable();
};
ko.applyBindings(new ViewModel(languages));
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'side': 'right'
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
slideout.toggle();
});
document.querySelector('.menu').addEventListener('click', function(eve) {
if (eve.target.nodeName === 'A'){slideout.close();}});
};
</script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
getPlacesLocation();
console.log("navigator.geolocation works well");
}
</script>
<script type="text/javascript" src="js/knockout-3.4.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</body>
なぜこれがダウン投票されたのですか？ –
こんにちは。 'codeova plugin add cordova-plugin-geolocation'と一緒にプラグインジオロケーションをインストールしましたか？あなたのプロジェクトにコードバをどのように追加しましたか？あなたはこれらの手順に従っていますか？ [cordova getstarted]（https://cordova.apache.org/#getstarted） – ricopo
はい、私は両方のプラグインをインストールしました。私は私の誤りを見つけました。私は、次のHTMLが必要だということでした：
私はそれを元にしようとしたときに動作しませんでした...おそらく他のJSと競合します。 –