4
현재 지리적 위치 정보를 사용하지 않는지도가 있습니다. 이제 웹 사이트에 SSL이 생겼으므로 Google Maps API 설명서에 따라 SSL을 추가했습니다. 문제는, 지금 제가 마커로 라벨을 붙이고 있다는 것입니다, 그리고 그것을 내 사용자 지정 레이블로 되돌려 놓을 방법을 알 수는 없습니다.Google지도 API의 Geolocation 및 맞춤 마커
아무도 도와 줄 수 있고 설명 할 수 있습니까?
내 코드 :
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 13,
center : {
lat : 59.909144,
lng : 10.7436936
},
disableDefaultUI : true,
//START STYLE
styles : [{
"elementType" : "geometry",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#523735"
}
]
}, {
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "administrative",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#c9b2a6"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#dcd2be"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#ae9e90"
}
]
}, {
"featureType" : "landscape.natural",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#93817c"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#a5b076"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#447530"
}
]
}, {
"featureType" : "road",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "road.arterial",
"elementType" : "geometry",
"stylers" : [{
"color" : "#fdfcf8"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f8c967"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#e9bc62"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry",
"stylers" : [{
"color" : "#e98d58"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#db8555"
}
]
}, {
"featureType" : "road.local",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#806b63"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#8f7d77"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"featureType" : "transit.station",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "water",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#b9d3c2"
}
]
}, {
"featureType" : "water",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#92998d"
}
]
}
]
//END STYLE
});
//CUSTOM MARKER ICON
var image = {
url : "img/ridepin.png",
scaledSize : new google.maps.Size(150, 150)
};
marker = new google.maps.Marker({
map : map,
draggable : true,
icon : image,
animation : google.maps.Animation.DROP,
position : {
lat : 59.909144,
lng : 10.7436936
}
});
marker.addListener('click', toggleBounce);
//END CUSTOM MARKER ICON
// GET POSITION
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat : position.coords.latitude,
lng : position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('I don\'t want this marker!');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//END GET POSITION
}
//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//END BOUNCE WHEN MARKER IS PRESSED
포스트 질문 자체가 모든 관련 코드입니다. 데모가 비어 있습니다. – charlietfl
@charlietfl strange. 업데이트하고 테스트 했으므로 이제 볼 수 있습니다. 나는 또한 그것을 여기에 추가했다. (형식은 희박하지만) –
@Strechingmycompetence 내 대답을 시도 했습니까? 질문을 올바르게 이해했는지 말해봐 ... – dev8080