谷歌地图api 3 json -创建动态中心点

Google maps api 3 json - Create dynamic center point

本文关键字：创建 动态 中心点 json api 谷歌地图      更新时间：2023-09-26

我正在加载一个JSON文件来填充谷歌地图上的标记。

我试图找出一种方法，我可以有一个动态中心点，而不是有它的静态，有一种方法，我可以通过边界方法做到这一点?

这是我到目前为止所做的。

<pre>
<!-- language: lang-js -->
<script type="text/javascript">
var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit() {
    var centerCoord = new google.maps.LatLng(18.23, -66.39); // Puerto Rico
    var mapOptions = {
        zoom: 9,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    $.getJSON("map.json", {}, function (data) {
        $.each(data.places, function (i, item) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                title: item.title
            });
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>" + item.title + "</h3><p>" + item.description + "</p>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        });
    });
}
$(function () {
    // initialize map (create markers, infowindows and list)
    mapInit();
}); < /script>
</pre>

示例在这里。http://thirstythursdays.co.uk/google-maps-native2/

你可以这样做:

var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit() {
    var centerCoord = new google.maps.LatLng(18.23, -66.39); // Puerto Rico
    var mapOptions = {
        zoom: 9,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    // Declare your bounds
    var bounds = new google.maps.LatLngBounds();
    $.getJSON("map.json", {}, function (data) {
        $.each(data.places, function (i, item) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                title: item.title
            });
            // Declare lat/long 
        var latlng = new google.maps.LatLng(item.lat, item.lng);
        // Add lat/long to bounds
        bounds.extend(latlng);
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>" + item.title + "</h3><p>" + item.description + "</p>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        });
    });
    // Fit map to bounds.
     map.fitBounds(bounds); 
}

将所有点添加到google.maps. latlnbounds对象中，调用map。结果边界上的fitBounds。(未测试)

$.getJSON("map.json", {}, function(data){
var bounds = new google.maps.LatLngBounds();
  $.each(data.places, function(i, item){
    //$("#markers").append('<li><a href="#" rel="' + i + '">' + item.title + '</a></li>');
var latlng = new google.maps.LatLng(item.lat, item.lng);
bounds.extend(latlng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: item.title
            });
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>"+ item.title +"</h3><p>"+ item.description +"</p>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        });
    map.fitBounds(bounds);
    });
}
示例

相关文章：