지리적 위치를 사용하여 사용자 위치를 확인하고 주기적으로 업데이트하려고합니다. 내 위치 외에도 다른 마커가지도에 표시됩니다. 현재 내 위치 마커를 표시 할 수 없으며 Google지도 API에서이 오류가 발생합니다. InvalidValueError : setMap : not an instance of Map; StreetViewPanorama의 인스턴스가 아닙니다.
다음은 코드입니다.
<!doctype html>
<html lang="en">
<head>
<title>Google maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var lat, lon, mapCalled, mapoptions, position, oldPosition, currentposition, iconBase, watchPositionOptions, geoToken, myLocationSymbol, ischiaCenter, myLocationMarker, homeMap, walk1Start, myScroll, errorMsg;
oldPosition = null;
function onBodyLoad(mapP){
mapCalled = mapP;
console.log(mapCalled);
ischiaCenter = new google.maps.LatLng (40.727954, 13.903094);
console.log("ischia center" + ischiaCenter);
console.log("before position is asked");
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
console.log("heading getting heading");
mapoptions = {
zoom: 12,
center: ischiaCenter,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
createMapHome();
}
function onGeoSuccess(position) {
console.log("starting watch");
navigator.geolocation.watchPosition(onGeoWatchSuccess, onGeoError, {maximumAge: 4000, enableHighAccuracy: true});
setCurrentPosition(position);
}
function onGeoWatchSuccess(position) {
console.log("geosuccess");
setMarkerPosition(myLocationMarker, position);
}
function setCurrentPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
currentposition = new google.maps.LatLng(lat,lon);
console.log("currentposition " + currentposition);
/*Create marker for user current position*/
console.log("Updating location");
myLocationMarker = new google.maps.Marker({
position: currentposition,
map: mapCalled
});
console.log("panning to my location");
mapCalled.panTo(currentposition);
}
function setMarkerPosition(myLocationMarker, position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
currentposition = new google.maps.LatLng(lat,lon);
myLocationMarker.setPosition(currentposition);
}
function createMapHome(){
// geoToken = 1;
console.log("creating home map");
homeMap = new google.maps.Map(document.getElementById('map_canvas'), mapoptions);
/*Create marker for walks starting points with info dialog*/
var walk1Start = new google.maps.LatLng (59.32522, 18.07002);
var contentString = '<div id="content">'+
'<div class="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Walk1</h2>'+
'<img src="images/thumbs/G-87.jpg" width=150 height=150>'+
'<div id="bodyContent">'+
'<p>Prima linea di decrizione ' +
'Senconda linea di decrizione '+
'Heritage Site.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var walk1Marker = new google.maps.Marker ({
position: walk1Start,
map: homeMap,
title: "Walk 1"
});
google.maps.event.addListener(walk1Marker, 'click', function() {
infowindow.open(homeMap,walk1Marker);
});
/*Script to adjust map view to all markers*/
// Make an array of the LatLng's of the markers you want to show
var LatLngList = new Array ( ischiaCenter, walk1Start);
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
homeMap.fitBounds (bounds);
center = homeMap.getCenter();
google.maps.event.trigger(homeMap, "resize");
homeMap.setCenter(center);
}
/*Setting up alerts*/
function showAlert (message, title) {
if (navigator.notification) {
navigator.notification.alert(message, null, title, 'OK');
} else {
alert(title ? (title + ": " + message) : message);
}
}
function onGeoError(error) {
console.log("geo error", error.code);
if (error.code==1) {
showAlert ('Abbiamo bisogno di accedere alla tua posizione. Attiva i servizi di localizzazione nelle impostazoni del tuo dispositivo.', 'Servizi di localizzazione disabilitati');
}
else if (error.code==2) {
showAlert ('Non siamo riusciti a determinare la tua posizione. Riproveremo tra qualche secondo.', 'Posizione non trovata');
}
else if (error.code==3) {
showAlert ('Non siamo riusciti a determinare la tua posizione. Riproveremo tra qualche secondo.', 'Posizione non trovata');
}
}
</script>
</head>
<body onload="onBodyLoad('map_canvas')">
<div id="map_canvas" style="height:600px;"></div>
</body>
</html>
setCurrentPosition()문자열뿐만 아니라 함수에서 유효한지도 객체를 사용해야합니다 . 다음 mapCalled으로 변경해야합니다 homeMap.
myLocationMarker = new google.maps.Marker({
position: currentposition,
// map: mapCalled
map: homeMap
});
console.log("panning to my location");
// mapCalled.panTo(currentposition);
homeMap.panTo(currentposition);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다