Google지도 JavaScript API 위치 표시 자

Google지도 자바 스크립트 API가 사용자 위치를 결정할 때 마커가 표시되도록하려고합니다. 내 HTML을 열면 사용자의 위치를 끌어 올 수 있지만 사용자의 위치를 나타내는 마커가 없습니다. 3 개의 체육관 위치를 보여주는 여러 마커가 있지만 사용자에게 3 개의 체육관과 관련된 위치를 보여주고 싶습니다.Google지도 JavaScript API 위치 표시 자

사용자의 위치를 "var markers ="배열에 추가해야합니까? 또는 "infoWindow.setPosition (pos);"뒤에 코드 유형을 추가해야합니까? 지금까지 내 코드가있다.

<script> 
    var map, infoWindow; 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat:34.0522,lng:-118.2437}, 
     zoom: 15, 
     disableDefaultUI: true, 
     gestureHandling: 'cooperative', 
    }); 
    infoWindow = new google.maps.InfoWindow; 

    if (navigator.geolocation) { 

    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 

    }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
    }); 
    } else { 
    handleLocationError(false, infoWindow, map.getCenter()); 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
         'Error: The Geolocation service failed.' : 
         'Error: Your browser doesn\'t support geolocation.'); 
    infoWindow.open(map); } 

    var markers = [ 
        { 
        coords:{lat:34.051937,lng:-118.472118}, 
        iconImage:'GymBoxNBurn.png', 
        content:'Box N Burn Boxing Gym' 
        }, 
        { 
        coords:{lat:33.938454,lng:-118.277857}, 
        iconImage:'GymBroadwayBoxing.png', 
        content:'Broadway Boxing Gym' 
        }, 
        { 
        coords:{lat:34.015644,lng:-118.487396}, 
        iconImage:'GymBoxNBurn.png', 
        content:'Box N Burn Boxing Gym' 
        } 
       ]; 


    for(var i = 0;i < markers.length;i++){ 
     addMarker(markers[i]); 
      } 

      function addMarker(props){ 
       var marker = new google.maps.Marker({ 
       position:props.coords, 
       map:map, 
       }); 


       if(props.iconImage){ 
       marker.setIcon(props.iconImage); 
       } 

       if(props.content){ 
       var infoWindow = new google.maps.InfoWindow({ 
        content:props.content 
        }); 

        } 
       } 
       };

출처

2017-09-16 Alec McLaughlin

가능한 중복 [구글지도에서 사용자의 현재 위치를 강조하는 방법?] (https://stackoverflow.com/questions/12175931/how-to-highlight-a-users-current-location-in -google-maps) – geocodezip

비슷한, 내 문제는지도에 이미 존재하는 마커에 추가로 사용할 마커를 만들려고한다는 것입니다. 따라서 var 마커 배열이나 다른 위치에 코드가 있어야 사용자의 위치를 나타낼 수 있으며 배열의 3 개 위치의 위치를 표시 할 수 있습니다. –

가능한 [Google지도에서 사용자의 현재 위치를 강조 표시하는 방법] (https://stackoverflow.com/questions/12175931/how-to-highlight-a-users-current-location-in-google-maps)의 복제본 – RobC

이 시도. 공지 사항 : 귀하의 위치를 결정하는 것은 Google지도가 아닙니다. 표준 HTML/자바 스크립트 기능이 있습니다. 귀하의 웹 브라우저가 그것을 읽습니다.

... 
navigator.geolocation.getCurrentPosition(function(position) { 
    var pos = { 
    lat: position.coords.latitude, 
    lng: position.coords.longitude 
    }; 
    infoWindow.setPosition(pos); 
    addMarker({ 
    coords: pos, 
    content:'YOU ARE HERE' 
    }); 
    // if you want this, center the map. Else remove next line 
    map.setCenter(pos);   
}, 
...

의

출처

2017-09-18 12:13:47

매력처럼 작동했습니다. 감사드립니다. –

Google지도 JavaScript API 위치 표시 자

답변

관련 문제