Jak połączyć geolokalizację i wiele znaczników za pomocą javascript?

Question

Próbuję utworzyć mapę, która będzie w stanie śledzić moją lokalizację, a jednocześnie będzie w stanie wyświetlić wiele znaczników. Czy mogę połączyć 2 JavaScript poniżej? Jeśli nie masz pojęcia, jak mam to zrobić?

JavaScript dla wielu markerów

<script type="text/javascript"> 
    var locations = [ 
    ['Hougang', 1.37265, 103.893658], 
    ['Punggol', 1.400617, 103.907833], 
    ['MacRitchie Reservoir', 1.346002, 103.825436], 
    ['Bishan', 1.352051, 103.849125], 
    ['Sentosa', 1.251226, 103.830757] 
]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(1.37265, 103.893658), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 

JavaScript dla bieżącej lokalizacji

navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
    } 

Answer 1

Tak, to jest możliwe, aby połączyć dwa. Po zainicjowaniu mapy i po wykreśleniu lokalizacji Hougang ... możesz dodać kod geolokalizacji. Napisałem demo, które pokaże mniejszą zieloną ikonę geolokalizacji. Jeśli przeglądarka nie obsługuje geokodowania, nic się nie pojawi, nie pojawią się również żadne błędy.

DEMO http://jsfiddle.net/yV6xv/7/

Należy pamiętać, że geolokalizacja nie działa (przynajmniej dla mnie), jeśli kod jest ładowany lokalnie z dysku twardego. Musi być podawane publicznie.

// Check if user support geo-location 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var geolocpoint = new google.maps.LatLng(latitude, longitude); 

     var mapOptions = { 
      zoom: 8, 
      center: geolocpoint, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     // Place a marker 
     var geolocation = new google.maps.Marker({ 
      position: geolocpoint, 
      map: map, 
      title: 'Your geolocation', 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
     }); 
    }); 
} 

Answer 2

Poniżej jest przykład pracę i jej wykorzystanie w moim projekcie

function AddInfoWidnow(marker,message) 
{ 
    var infowindow = new google.maps.InfoWindow({ content: message }); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.open(marker.get('map'), marker); 

    }); 

} 


function ShowOnMap(ContainerId, mapItems) { 

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824'); 

var mapOptions = { 
    center: DefaultLatLng, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    marker: true 
}; 

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions); 

var arrJsonObject = JSON.parse(mapItems); 

for (var y = 1; y <= arrJsonObject.length; y++) 
{ 

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude); 

    var marker = new google.maps.Marker({ 
    position: myLatLng1, 
    map: mapCust, 
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate 
}); 

    addInfoWindows(marker,y-1,arrJsonObject); 


    marker.setMap(mapCust); 

} 
} 

użyć poniżej ciąg JSON to nazwać.

var mapItems='[ 
    { 
    "Latitude": "22.575897", 
    "Lonngitude": "88.431754", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 12:04:41 PM" 
    }, 
    { 
    "Latitude": "22.615067", 
    "Lonngitude": "88.431759", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 3:02:19 PM" 
    } 
]'; 
    ShowOnMap(containerId2, mapItems);