jquery - 移动 map 中心而不删除标记(Google map v. 3.0)

Question

我有一张带有很多标记的 map 。但是，我希望能够更改中心/缩放，而不删除标记。当用户搜索地址并单击“搜索”时，我会执行此操作。

我有以下中心功能，可以使用，但是，它也会删除我的所有标记!

    function centerMap(longitude, latitude) {
        var gMap = new google.maps.Map(document.getElementById('map-canvas'));
        gMap.setZoom(10);
        gMap.setCenter(new google.maps.LatLng(longitude, latitude));
    }

我的标记是经典的:

   <div id="map-canvas" style="width: 900px; height: 700px;" />

点击按钮时的完整代码:

$('#searchCityBtn').click(function () {
            var query = $('#addressBox').val();
            var url = '<%= ResolveUrl("~/services/geolocationservice.asmx/getlatitudeandlongitude") %>';
            $.ajax({
                type: "POST",
                data: "{'query':'" + query + "'}",
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (d) {
                    var jsonResp = JSON.parse(d.d);
                    centerMap(jsonResp.Item2,jsonResp.Item1);
                },
                error: function () {
                    alert('error guys');
                }
            });
        });

当然，我尝试通过这样做来获取 map :

    function centerMap(longitude, latitude) {
        var gMap = document.getElementById('map-canvas');
        gMap.setZoom(10);
        gMap.setCenter(new google.maps.LatLng(longitude, latitude));

    }

但是，然后我收到错误，没有名为 setZoom 或 setCenter 的函数存在。

如何解决这个问题？ :)

Answer 1

当你这样做时:

function centerMap(longitude, latitude) {
    var gMap = new google.maps.Map(document.getElementById('map-canvas'));
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}

你正在摧毁 google.maps.Map对象，并重新创建一个没有任何标记的新对象。如果您在全局上下文中制作原始的“gMap”，那么您可以这样做:

// create gMap variable in the global context
var gMap = null;
// for creating the initial map
function createMap(longitude, latitude) {
    // initialize the global gMap variable
    gMap = new google.maps.Map(document.getElementById('map-canvas'));
    // center and zoom the map
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}
// to recenter the existing map
function centerMap(longitude, latitude) {
    // center and zoom the map
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}