Google Maps JavaScript API地理位置标记

我正在努力使其在Google Maps JavaScript API确定用户位置时显示标记。当我打开我的HTML时，它能够拉起用户的位置，但没有标记显示用户所在的位置。我有几个标记显示3个健身房的位置，但我想向用户显示他们与三个健身房相关的位置。Google Maps 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标记Array或其他地方有代码来指示用户的位置，同时仍然显示阵列中3个位置的位置。 –

[如何突出显示用户在Google地图中的当前位置？]（https://stackoverflow.com/questions/12175931/how-to-highlight-a-users-current-location-in-google-maps） – RobC

尝试。注意：这不是Google地图确定您的位置。我没有标准的HTML/javascript功能;你的浏览器读取它。

... 
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 Maps JavaScript API地理位置标记

回答

相关问题