2012-10-05 36 views
1

Google Maps JS API v3 - 帶地理位置的簡單多標記
謝謝,但我使用下面的代碼進行管理。隨意改善它!
第1部分 - 清潔變量Google Maps JS API v3 - 帶地理位置的簡單多標記

var LocationCenter = null; 
var map = null; 
var approxCircle = null; 
var pinCircle = null; 
var marker = null; 

部分 - 在可變

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

部分限定位置 - 初始化功能

function Newinitialize(lat,lng) { 
    LocationCenter = new google.maps.LatLng(lat,lng); 
    var myOptions = { 
     zoom: 14, 
     center: LocationCenter, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions); 

marker = new google.maps.Marker({ 
    position: LocationCenter, 
    map: map, 
    animation: google.maps.Animation.DROP 
    }); 

approxCircle = { 
    strokeColor: "#008595", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#008595", 
    fillOpacity: 0.25, 
    map: map, 
    center: LocationCenter, 
    radius: 50, 
    clickable : false 
}; 

pinCircle = new google.maps.Circle(approxCircle); 
var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

第4部分 - 集合地點

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

}; 

$('.goMap').live('click', function() { 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position){ 
     Newinitialize(position.coords.latitude,position.coords.longitude); 
    }); 
    }else{ 
     Newinitialize(52.636161,-1.133065); 
    } 
}); 

做,現在我加載頁面和地理位置是工作的罰款。

回答

0

安裝了谷歌地圖的showPosition功能,像裏面:

var map; 
function showPosition(position) { 
    var latlon=position.coords.latitude+","+position.coords.longitude; 

    x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;  

    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

這樣你初始化谷歌地圖之前的座標將可用。否則,您可以更新showPosition函數中的地圖座標(我不確定要執行此操作的確切代碼)。

+0

謝謝Jasper,可以改進代碼嗎? – user1723492

0

這裏是你將如何重新設定地圖中心到用戶的當前位置:

function showPosition(position) 
{ 
    map.setCenter(new google.maps.LatLng(positions.coords.latitude, 
     position.coords.longitude)); 
} 

這將允許您在接收到用戶的位置之前創建的地圖。

+0

謝謝Chad看看代碼。 – user1723492