Wie kombiniere ich Geolocation und mehrere Marker mit Javascript?

Question

Ich versuche eine Karte zu erstellen, die in der Lage ist, meinen Standort zu verfolgen und gleichzeitig mehrere Markierungen anzeigen zu können. Kann ich die 2 JavaScript unten kombinieren? Wenn nicht irgendeine Idee, wie ich es tun soll?

JavaScript für mehr Marker

<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 für aktuellen Standort

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

Answer 1

Ja, es ist möglich, die beide zu kombinieren. Wenn Sie die Karte initialisieren und die Standorte Hougang ... plotten, können Sie den Geolokationscode hinzufügen. Ich habe eine Demo geschrieben, die ein kleineres grünes Symbol für die Geolokalisierung zeigt. Wenn der Browser die Geocodierung nicht unterstützt, wird nichts angezeigt, es werden auch keine Fehler angezeigt.

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

Denken Sie daran, die Geolocation funktioniert nicht (zumindest für mich), wenn der Code lokal von der Festplatte geladen wird. Es muss öffentlich bedient werden.

// 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

Das ist eine Arbeitsprobe und sein in meinem Projekt verwendete

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); 

} 
} 

die folgenden JSON-String verwenden, es zu nennen.

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);