谷歌地圖api V3標記

Question

我有一個谷歌地圖的問題，我不能把標記放在一些位置。我的想法是找到我的位置並在其上放置標記，然後將標記放置在其他位置上，但其他位置上的標記未顯示在地圖上。

function success(position) { 
     var mapcanvas = document.createElement('div'); 
     mapcanvas.id = 'mapcontainer'; 
     mapcanvas.style.height = '550px'; 
     mapcanvas.style.width = '960px'; 

     document.querySelector('article').appendChild(mapcanvas); 

     var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     var options = { 
      zoom: 15, 
      center: coords, 
      mapTypeControl: false, 
      navigationControlOptions: { 
       style: google.maps.NavigationControlStyle.SMALL 
      }, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

     var marker = new google.maps.Marker({ 
      position: coords, 
      map: map, 
      title: "Vasa lokacija" 
     }); 
    } 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success); 
    } else { 
     error('Geo Location is not supported'); 
    } 
    var locations = [ 
     ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
     ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
     ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
     ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
     ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
    ]; 
    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)); 
    } 
    } 

Answer 1

與您的代碼的主要問題是之前加載地圖，因爲它是你的功能success。嘗試的側面這個你正在策劃標誌：我有使用靜態價值爲中心，你可以改變它的每你的代碼。

$(document).ready(function() { 
    success(position); 
}); 

var position = { // suppose this is your position 
    coords: { 
     latitude: 44.666666699999990000, 
     longitude: 17.183333299999960000 
    } 
}; 

var map; 
var marker, i; 

var locations = [ 
    ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
    ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
    ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
    ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
    ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
]; 

function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '550px'; 
    mapcanvas.style.width = '960px'; 
    document.getElementById('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var options = { 
     zoom: 8, 
     center: coords, 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title: "Vasa lokacija" 
    }); 

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

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

      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 

     }); 
    } 
} 

Answer 2

你的函數的主要問題是你的標記添加循環在成功函數之外，所以它永遠不會被調用。您的代碼最後還有一個額外的}。這裏是一個完整的解決方案jsfiddle

var map; 

function success(position) { 

    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '550px'; 
    mapcanvas.style.width = '960px'; 

    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var options = { 
     zoom: 15, 
     center: coords, 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    var marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title: "Vasa lokacija" 
    }); 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success); 
    } else { 
     error('Geo Location is not supported'); 
    } 

    var locations = [ 
     ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
     ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
     ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
     ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
     ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
    ]; 

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

} //success fn ENDS 

var position = { 
    coords: { 
     latitude: 44.766666699999990000, 
     longitude: 17.183333299999960000 
    } 
}; 

success(position);