如何居中谷歌地圖？

-1

該腳本創建地圖並顯示來自json的標記並創建地址菜單，單擊鏈接將打開相應的地圖標記。如何將開場標記置於地圖中心？如何居中谷歌地圖？

標記

<div id="map" class="grayBox"></div><ul id="markers"></ul>

// Map 
var map; 
var arrMarkers = []; 
var arrInfoWindows = []; 
function mapInit(){ 
    var centerCoord = new google.maps.LatLng(lat, lng); 
    var mapOptions = { 
     zoom: 12, 
     center: centerCoord, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    //Определяем область отображения меток на карте 
    var latlngbounds = new google.maps.LatLngBounds(); 
    //Загружаем данные в формате JSON из файла map.json 
    $.getJSON("http://your-webmasters.com/demo/live-motion/map.json", {}, function(data){ 
     $.each(data.places, function(i, item){ 
      $("#markers").append(
       "<li class='row'><div class='col-xs-12 col-md-4 imgBox'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.image + "</a></div><div class='col-xs-12 col-md-6'><p class='title'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.title + "</a></p><p>" + item.description + "</p><p class='moreLink'>" + item.moreLink + "</p></div></li>" 
      ); 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(item.lat, item.lng), 
       map: map, 
       title: item.title 
      }); 
      //Добавляем координаты меток 
      latlngbounds.extend(new google.maps.LatLng(item.lat, item.lng)); 
      arrMarkers[i] = marker; 
      var infowindow = new google.maps.InfoWindow({ 
       content: "<h3>"+ item.title +"</h3>" 
      }); 
      arrInfoWindows[i] = infowindow; 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 
     }); 
     //Центрируем и масштабируем карту так, чтобы были видны все метки 
     //map.setCenter(latlngbounds.getCenter(), map.fitBounds(latlngbounds)); 
    }); 
} 
$(function(){ 
    // Определяем карту (добавляем маркеры, балуны и список со ссылками) 
    mapInit(); 
    // Cобытие клика по ссылке 
    $(document).on("click", "#markers a", function(){ 
     var i = $(this).attr("rel"), 
      lat = $(this).data("lat"), 
      lng = $(this).data("lng"); 
     // Эта строка кода, закрывает все открытые балуны, для открытия выбранного 
     for(close=0; close < arrInfoWindows.length; close++){ arrInfoWindows[close].close(); } 
     arrInfoWindows[i].open(map, arrMarkers[i]); 
     return false; 
    }); 
});

的Json

{"places": [ 
{ 
    "title": "YellowKorner", 
    "image": "<img src='style/img/gallery.jpg' alt=''>", 
    "description": "Saint-Petersburg", 
    "moreLink": "<a href='#' target='_blank'>more info</a>", 
    "lat": -56.31927, 
    "lng": 44.026297 
}, 
{ 
    "title": "Very long name of gallery", 
    "image": "<img src='style/img/gallery.jpg' alt=''>", 
    "description": "Saint-Petersburg", 
    "moreLink": "<a href='#' target='_blank'>more info</a>", 
    "lat": 56.31927, 
    "lng": 44.02629700001 
}, 
{ 
    "title": "YellowKorner", 
    "image": "<img src='style/img/gallery.jpg' alt=''>", 
    "description": "Saint-Petersburg", 
    "moreLink": "<a href='#' target='_blank'>more info</a>", 
    "lat": 10.31927, 
    "lng": 80.026297 
}]}

來源

2016-03-09 korg

如果你想把點擊標記在地圖的中心，將代碼添加到點擊收聽做到這一點：

$(function(){ 
    // Определяем карту (добавляем маркеры, балуны и список со ссылками) 
    mapInit(); 
    // Cобытие клика по ссылке 
    $(document).on("click", "#markers a", function(){ 
     var i = $(this).attr("rel"), 
      lat = $(this).data("lat"), 
      lng = $(this).data("lng"); 
     // Эта строка кода, закрывает все открытые балуны, для открытия выбранного 
     for(close=0; close < arrInfoWindows.length; close++){ arrInfoWindows[close].close(); } 
     // center the map on the clicked marker 
     map.setCenter(arrMarkers[i].getPosition()); 
     arrInfoWindows[i].open(map, arrMarkers[i]); 
     return false; 
    }); 
});

來源

2016-03-10 00:43:00 geocodezip

您已經創建了一個新的範圍對象（的LatLngBounds），並與每個標記擴展它 - 所有你需要做（在你的getJSON回調中，直接在你的每個循環之後調用：

map.instance.fitBounds(latlngbounds);

來源

2016-03-09 23:20:36

如何居中谷歌地圖？

回答

相關問題