私はジオロケーションが初めてで、ウェブサイトでユーザーの位置を特定するために何度も試行しましたが、ユーザーの位置から Google マップ上の固定ポイントに移動する方法がわかりません。以下のコードを使用しています:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps</title>
<link rel="stylesheet" href="css/pink.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<style>
#map-page, #map-canvas { width: 100%; height: 300px; padding: 0; }
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../JQuery Mobile 程式碼/ch9/maps.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://maps.google.com.tw/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$( "#map-page" ).live( "pageinit", function() {
var defaultLatLng = new google.maps.LatLng(22.983587,120.22599); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
console.log(error);
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
//設置起點
function setstart(){
var latitude = pos.coords.latitude;
var longitude = pos.coords.longitude;
var title="Your Location";
//地图中心坐标
var latlng = new google.maps.LatLng(latitude,longitude);
if(!startpoint){
startpoint = new google.maps.Marker({
map:myMap,
position:latlng,
draggable: true
});}
}
//設置終點
function setend(){
var newcenter = new google.maps.LatLng(22.981666,120.194301);
if(!endpoint){
endpoint = new google.maps.Marker({
map:myMap,
position:newcenter,
draggable: true
});}
}
//路線導航
function start2end(model){
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(myMap);
var startlatlng=startpoint.getPosition();
var endlatlng=endpoint.getPosition();
$("#jczbresult").show("slow");
$("#jczbresultmin").hide();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': startlatlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$("#startdrive").html('起點:'+results[1].formatted_address);
}}});
geocoder.geocode({'latLng': endlatlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$("#enddrive").html('終點:'+results[1].formatted_address);
}}});
if(model=='WALKING'){
$("#jczbtitle").innerHTML="步行查詢結果";
directionsService.route({
origin: startlatlng,
destination: endlatlng,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status){
if(status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);//標記地圖顯示路線
showSteps(result);//右側面板顯示詳細路線信息
}
});
}else{
$("#jczbtitle").innerHTML="駕車查詢結果";
directionsService.route({
origin: startlatlng,
destination: endlatlng,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status){
if(status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);
showSteps(result);//右側面板顯示詳細路線信息
}
});
}
}
//顯示起點終點之間的詳細信息
function showSteps(directionResult) {
$("#driveline").html('');
var myRoute = directionResult.routes[0].legs[0];
var v_html = '';
for (var i = 0; i < myRoute.steps.length; i++) {
var geocoder = new google.maps.Geocoder();
v_html += '<div class="carSearchtr02" id="driver_step_'+i+'">'+(i+1)+'.'+myRoute.steps[i].instructions+',此段路程為:'+myRoute.steps[i].distance.value+'米</div>';
//myRoute.steps[i].instructions;
}
if(v_html != '')
{
v_html = '<div class="carSearchtr01">总里程：'+myRoute.distance.value+'米</div>'+v_html;
$("#driveline").html(v_html);
}
else
{
$("#driveline").html('很抱歉，沒有找到符合您要的條件，您可以試試下面的方法:<br>調整一下您輸入的搜索關鍵字');
}
}
});
</script>
</head>
<body>
<div data-role="page" id="map-page">
<div data-role="header">
<a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse"></a>
<h1>Maps</h1>
</div>
<div data-role="content" id="map-canvas">
<!-- map loads here... -->
</div>
<div data-role="footer" class="ui-navbar-custom" >
<div data-role="navbar" class="ui-navbar-custom">
<ul>
<li><a href="index.html" data-ajax="false" data-icon="custom">首頁</a></li>
<li><a href="listview.html" data-ajax="false" data-icon="custom" >營業項目</a></li>
<li><a href="news.html" data-ajax="false" data-icon="custom" >最新消息</a></li>
<li><a href="photo.html" data-ajax="false" data-icon="custom" >案例分享</a></li>
<li><a href="phone.html" data-ajax="false" data-icon="custom">聯絡我們</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
しかし、それはうまくいきません。誰かが間違っていることを教えてもらえますか、thx
ところで、私はコードのデモを持っています
http://appkon.com/demo/project2/maps.html
thxまた