Question

我在从v2升级到 Google Maps v3 时遇到问题。特别是 MarkerManager 。我以前没有使用过地图，而且正在帮助那些开发人员放弃了他们在v2中开发地图的人。

地图显示最多100个标记，点击时显示信息框。（还有一个与结果绑定的telerik RadGrid。）这一切似乎都有效，直到它进入 DisplayAllMarkers（）mgr.addMarkers（）（见下文）。它在 ProjectionHelperOverlay.prototype.LatLngToPixel 中失败，其中未捕获的TypeError：无法调用未定义的方法'lng'。如果 lat 或 lng 未定义，我已尝试在 AddMarker 中输入提醒，但没有提醒。之前调用 MarkerManager.prototype.addMarkerBatch _ 将 mPoint 设置为undefined，然后传递给 getTilePoint ，后者调用 LatLngToPixel 失败的地方。

我认为这对听众来说是一个问题，但是他们尝试了各种听众而没有成功。我真的很感激这方面的一些帮助，因为我已经无法取得一段时间的进展，并且让客户失望并且不知道下一步该尝试什么。

选择SearchResult.js代码片段：

$(document).ready(function () {
    InitializeMap(originalScale);
});

var map;
var batch = [];
var mgr;
var geocoder = null;

function InitializeMap(scale) {
    map = new google.maps.Map(
        document.getElementById('MapContainer'), {
            center: new google.maps.LatLng(Latitude, Longitude),
            zoom: scale,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        });

    var listener = google.maps.event.addListener(map, "bounds_changed", function () {
        MapMoved();
        google.maps.event.removeListener(listener);
    });
}

var south, west, north, east, zoom;

function MapMoved() {
    zoom = map.getZoom();
    //zoom = map.setZoom();

    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();

    south = sw.lat();
    west = sw.lng();
    north = ne.lat();
    east = ne.lng();

    Search();
}

搜索（）; 加载搜索参数（包括北，南，东，西坐标）并调用telerik ajax请求。

C＃片段：

if (Properties.Count >= 1 || zoom == "0")    //display properties
{
    RadAjaxManager1.ResponseScripts.Add("ClearAll();");

    Properties.ForEach(p =>
    {
        string script = "AddMarker(" + p.ID.ToString() + "," + p.LatitudeShort.ToString() + "," + p.LongitudeShort.ToString() + ");";
        RadAjaxManager1.ResponseScripts.Add(script);
    });

    RadAjaxManager1.ResponseScripts.Add("DisplayAllMarkers();");
}
else //zoom out map – which will start the search process all over again.
{
    string delta = "1";
    RadAjaxManager1.ResponseScripts.Add("ZoomOut(" + delta + ");");
}

SearchResult.js代码段继续：

function ClearAll() {
    batch = [];
}

function AddMarker(id, lat, lng) {
    batch.push(CreatePropertyMarker(lat, lng, id));
}  

function DisplayAllMarkers() {
    mgr = new MarkerManager(map, { trackMarkers: true });

    google.maps.event.addListener(mgr, 'loaded', function () {
        mgr.clearMarkers();
        mgr.addMarkers(batch, 3, 17); // **Failing in here!!!**
        mgr.refresh();
    });
}

function CreatePropertyMarker(lat, lng, id) {    
    var redIcon3 = {
        url: '../images/HouseIcon_ForGoogleMap.png',
        size: new google.maps.Size(22, 22),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 22)
    };

    var marker3 = new google.maps.Marker(new google.maps.LatLng(lat, lng), redIcon3);

    google.maps.event.addListener(marker3, 'click', function () {

        var data = "{'Id': '" + id + "'}";
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: 'searchresult.aspx/GetPropertyPopOut',
            data: data,
            success: function (data) {
                var popout = data.d;
                marker3.openExtInfoWindow(map, "custom_info_window_red", popout, { beakOffset: -1 });
            },
            error: function (result) {
                alert('status:' + result.status + '    statusText:' + result.statusText);
            }
         });
    });
    return marker3;
}

脚本顺序和版本：

的jquery-UI-1.9.1.custom.min.css
Google地图： v3 （我也尝试过指定特定版本3的数字，例如v = 3.12 http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false
的jquery-1.8.2.js
的jquery-UI-1.9.1.custom.min.js
extinfowindow.js v2.0
MarkerManager.js v1.1
SearchResult.js
的jquery-UI-1.8.16.custom.min.js
的jquery-1.6.2.min.js

Answer 1

在捆绑了大量不同的东西后，我终于发现问题在于创建标记时需要位置设置。我改变了 CreatePropertyMarker 中的行：

var marker3 = new google.maps.Marker(new google.maps.LatLng(lat, lng), redIcon3);

为：

var marker3 = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    icon: redIcon3
});

Google Maps v3 MarkerManager v1.1 LatLngToPixel未定义

选择SearchResult.js代码片段：

C＃片段：

SearchResult.js代码段继续：

脚本顺序和版本：

1 个答案: