実際のGoogleマップのように地図に自分の住所ボタンを追加したいと思います。 いくつかのプラグインを試しましたが、位置ボタンがありませんでした。どうすればいいですか？ Webブラウザの場合Googleマップに住所ボタンを追加する方法
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var GeoMarker = new GeolocationMarker(map);をあなたの場所を得るためにジオロケーションに建てられHTML5を使用することができます：あなたは、このドキュメントに従うことができます：ここ は私が使用したものプラグインですhttps://developers.google.com/maps/documentation/javascript/examples/map-geolocation
しかし、ブラウザがジオロケーションをサポートしていない場合には、最初にデフォルトの場所を設定します。
var myLocation = {lat: -34.397, lng: 150.644};
は、その後、あなたのinit関数であなたは、このようにあなたの場所を取得することができます：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
myLocation.lat = position.coords.latitude;
myLocation.lng = position.coords.longitude;
map.setCenter(myLocation);
}, function() {
handleLocationError(true, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, map.getCenter());
}
は
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLocation,
mapTypeId: 'roadmap'
});
マップのデフォルトのセンターとしてあなたの場所の座標を設定し、あなたが戻りたい場合は、単にこの関数を呼び出しますあなたの場所に
function goToMyLocation() {
map.setCenter(myLocation);
}
は、この作業例を確認してください：https://jsbin.com/ricebu/edit?html,css,js,output
ここは、コードスニペットは、同様
あるvar map;
var btnLocation = document.getElementById("btn-location");
var myLocation = {
lat: -34.397,
lng: 150.644
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLocation,
mapTypeId: 'roadmap'
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
myLocation.lat = position.coords.latitude;
myLocation.lng = position.coords.longitude;
// I just added a marker for you to verify your location
var marker = new google.maps.Marker({
position: myLocation,
map: map
});
map.setCenter(myLocation);
}, function() {
handleLocationError(true, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
console.log(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
btnLocation.addEventListener('click', function() {
goToMyLocation();
});
function goToMyLocation() {
map.setCenter(myLocation);
}#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#btn-location {
position: absolute;
right: 20px;
top: 20px;
z-index: 1;
padding: 20px;
border: none;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
transition: 0.5s;
}
#btn-location:hover {
background-color: rgba(0, 0, 0, 1);
color: white;
cursor: pointer;
}<html>
<head>
<title>Location</title>
</head>
<body>
<button id="btn-location">Go to my Location</button>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>
</html>
そうであれば、このドキュメントを読む？、マップ上の場所にマーカーを置く意味するか：https://developers.google –
私は電話でGoogleマップのように、ボタンを追加し、それをクリックして私の場所にジャンプすることを意味します。 –