在不删除标记的情况下移动地图中心（Google Maps v. 3.0）答案

【问题标题】：Moving center of maps without deleting markers (Google Maps v. 3.0)在不删除标记的情况下移动地图中心（Google Maps v. 3.0）
【发布时间】：2013-09-21 01:40:25
【问题描述】：

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

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

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

当然，我已经尝试通过这样做来获取地图：

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

    }

但是，然后我得到错误 no function called setZoom or setCenter exists.

如何解决这个问题？ :)

【问题讨论】：

标签： jquery google-maps google-maps-api-3

【解决方案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));
}

【讨论】：

【解决方案2】：

有不同的方法，例如：

创建地图时，将地图存储为#map-canvas 的属性：

var canvas=document.getElementById('map-canvas');
    canvas.map = new google.maps.Map(canvas,{/*options*/});

在 centerMap 中，您将能够访问此属性：

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

【讨论】：