Question

该脚本创建一个地图并显示来自json的标记并创建一个地址菜单，单击链接可打开相应的地图标记。如何将地图中心的开场标记居中？

标记

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

JS

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

Answer 1

你已经在创建一个新的边界对象（latlngbounds）并用每个标记扩展它 - 所有你需要做的事情（在你的getJSON回调中，直接在你的每个循环被调用之后：

map.instance.fitBounds(latlngbounds);

Answer 2

如果您想将点击的标记放在地图的中心，请将代码添加到点击监听器中：

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

如何使谷歌地图居中？

2 个答案: