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

我的标记是经典的：

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

    }

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

如何解决这个问题？:)

4

2 回答 2

2

When you do:

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

You are destroying the google.maps.Map object, and recreating a new one without any markers. If you make your original "gMap" in the global context, then you can do this:

// 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));
}
于 2013-09-16T20:06:54.057 回答
1

有不同的方法，例如：

创建地图时，将地图存储为#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));
}
于 2013-09-16T19:56:32.077 回答