HTML5地理位置表正在重新加載完整的地圖不僅位置

Question

我有一個代碼，但問題是表位（）是重新映射完整的地圖，不僅位置，我想要的是當我放大，即使位置改變它只會將標記更改爲該位置

<p id="demo">Click the button to get your position:</p> 

<button onclick="getLocation()">Try It</button> 

<div id="mapholder"></div> 

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

<script> 
var x = document.getElementById("demo"); 
function getLocation() { 
if (navigator.geolocation) { 
    navigator.geolocation.watchPosition(showPosition,showError); 
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";} 
} 

function showPosition(position) { 
lat = position.coords.latitude; 
lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat, lon) 
mapholder = document.getElementById('mapholder') 
mapholder.style.height='250px'; 
mapholder.style.width='500px'; 

var myOptions={ 
center:latlon,zoom:14, 
mapTypeId:google.maps.MapTypeId.ROADMAP, 
mapTypeControl:false, 
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
} 

var map = new google.maps.Map(document.getElementById("mapholder"),myOptions); 
var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 
} 

function showError(error) { 
switch(error.code) { 
    case error.PERMISSION_DENIED: 
     x.innerHTML = "User denied the request for Geolocation." 
     break; 
    case error.POSITION_UNAVAILABLE: 
     x.innerHTML = "Location information is unavailable." 
     break; 
    case error.TIMEOUT: 
     x.innerHTML = "The request to get user location timed out." 
     break; 
    case error.UNKNOWN_ERROR: 
     x.innerHTML = "An unknown error occurred." 
     break; 
     } 
    } 
    </script> 
    </body> 
     </html> 

Answer 1

這是因爲您正在重新加載地圖。你應該改變中心。

所以，你應該修改你的代碼有2個功能：

1至inizialize地圖。

 function initialize(position) { 
     lat = position.coords.latitude; 
     lon = position.coords.longitude; 
     latlon = new google.maps.LatLng(lat, lon) 
     mapholder = document.getElementById('mapholder') 
     mapholder.style.height='250px'; 
     mapholder.style.width='500px'; 

     var myOptions={ 
     center:latlon,zoom:14, 
     mapTypeId:google.maps.MapTypeId.ROADMAP, 
     mapTypeControl:false, 
     navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
    } 

    var map = new google.maps.Map(document.getElementById("mapholder"),myOptions); 
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 
} 

2-改變焦點。

function showPosition(position) { 

    map.setCenter(position); 

}