javascript - 谷歌地图 :- InvalidValueError: setIcon: not a string; and no url property; and no path property

Question

我在谷歌地图中遇到这个错误。

错误:InvalidValueError:setIcon:不是字符串；并且没有 url 属性；并且没有路径属性

早些时候它运行良好，我从未更改过我的代码。

我看过一个帖子 Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path property 有同样的问题并应用了答案中提到的更改。早些时候它正在工作，现在它也停止工作了。

Google 似乎在其 API 中更改了某些内容，但不确定具体是什么。我发现其他一些用户也发现了同样的问题@ https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423

我的网站链接是 http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/ 只需在 firefox 中打开并查看错误控制台。我在下面包含了 map 的 js 文件。

<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=drawing"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>

<div id="map-canvas" class="map-view">hello</div>

下面是我使用的完整 javascript 代码。

<script>
    var defaultLat = '@Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Latitude) : 0)';
    var defaultLong = '@Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Longitude) : 0)';
    if (defaultLat == 0)
        defaultLat = $('#SearchLatitude').val();
    if (defaultLong == 0)
        defaultLong = $('#SearchLongitude').val();

   // var json = JSON.parse('@str');

    // Add this for testing only
    var json = JSON.parse('[ { "DaysOnAdvanta": "400", "Name": null, "com_address": null, "MLS_ID": "miamimls", "MLS_STATE_ID": "FL", "MLS_LISTING_ID": "A1677437", "mls_office_id": null, "MLS_Office_Name": "EWM Realty International ", "MLS_AGENT_ID": null, "MLS_Agnet_Name": null, "SALE_PRICE": "400000", "Address": "5800 N BAY RD", "city": "Miami Beach", "zip_code": "33140", "remarks": "", "property_type_code": "Residential", "County": null, "Subdivision": "LA GORCE GOLF SUB PB 14-4", "status_code": "Active", "Year_Built": "1929", "acres": "0", "LOT_SQUARE_FOOTAGE": "52881", "BUILDING_SQUARE_FOOTAGE": "12153", "Bedroom_Count": "7", "Full_Baths": "8", "Half_Baths": null, "Fire_place_Number": null, "has_virtual_tour": null, "has_garage": null, "has_firepalce": null, "has_horses": null, "has_pool": null, "has_golf": null, "has_tennis": null, "is_gated": null, "is_waterfront": null, "has_photo": null, "photo_quantity": "25", "photo_url": null, "virtual_tour_url": "http://www.obeo.com/u.aspx?ID=630180", "last_updated": null, "listing_date": null, "garage": null, "last_image_transaction": null, "complex_building": null, "display_address": null, "advertise": null, "IMAGE": "/images/PhotoNotAvailable_Large.gif ", "visit": null, "inforequest": null, "FollwID": 0, "Latitude": "25.83835", "Longitude": "-80.13273", "Special": "", "price_change_direction": "", "location_id": "48153" } ]');
    // console.log(json);
    var contentString = "<div style='width: 200px; height: 250px;text-align: center;'>" +
        "<img src='//image6.sellectrified.com/flex/RX-3/113/RX-3113755-1.jpeg' width='200' alt='No Image' style='max-height: 130px;' />" +
        "<table style='width: 100%; border-collapse: collapse;'>" +
            "<tr>" +
                "<td style='text-align:left;height:20px;'>" +
                    "$155,000" +
                "</td>" +
                "<td style='text-align:right;height:20px;'>" +
                    "2754, Dora Ave" +
                "</td>" +
            "</tr>" +
            "<tr>" +
                "<td>" +
                "</td>" +
                "<td>" +
                    "<a href='javascript:void(0);'>" +
                        "<div class='btn btn-primary card-btn'>Details</div>" +
                    "</a>" +
                "</td>" +
            "</tr>" +
        "</table>" +
        "<table style='width: 100%; border-collapse: collapse;border-top:1px solid gray;'>" +
            "<tr>" +
                "<td style='text-align:center;font-size: 10px;'>" +
                    "2 BEDS" +
                "&nbsp;&nbsp;" +
                    "1 BATH" +
                "&nbsp;&nbsp;" +
                    "1,235 Sq.ft." +
                "&nbsp;&nbsp;" +
                "1.3 ACRE" +
                "</td>" +
            "</tr>" +
        "</table>" +
    "</div>";

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var m = [];

    function initialize() {
        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();
        var myLatlng = new google.maps.LatLng(defaultLat, defaultLong);
        var mapOptions = {
            center: myLatlng,
            zoom: 8
            //mapTypeId: google.maps.MapTypeId.HYBRID
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        if (json.length > 0) {
            $(json).each(function (i) {
                var latlng = new google.maps.LatLng(json[i].Latitude, json[i].Longitude);
                var marker = new MarkerWithLabel({
                    position: latlng,
                    draggable: false,
                    raiseOnDrag: false,
                    map: map,
                    labelContent: "$" + (json[i].SALE_PRICE / 1000) + 'k',
                    labelAnchor: new google.maps.Point(22, 0),
                    labelClass: "marker", // the CSS class for the label
                    icon: {},
                    title: json[i].Address,
                    id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID
                });
                m.push(marker);
                google.maps.event.addListener(marker, 'mouseover', function () {
                    var contentString = "<div style='width: 200px; text-align: center;'>" +
                                            "<img src='" + json[i].IMAGE + "' width='200' alt='' style='max-height: 130px;' />" +
                                            "<table style='width: 100%;'>" +
                                                "<tr>" +
                                                    "<td style='text-align:left;padding: 5px 0;'>" +
                                                         "$" + json[i].SALE_PRICE +
                                                    "</td>" +
                                                    "<td style='text-align:right;padding: 5px 0;'>" +
                                                        json[i].Address +
                                                    "</td>" +
                                                "</tr>" +
                                                "<tr>" +
                                                    "<td colspan='2' style='text-align:right;padding: 5px 0;'>" +
                                                        "<a class='orange-btn-small' href='/Home/PropertyDetail/" + json[i].location_id + "/" + json[i].MLS_ID + "/" + json[i].MLS_LISTING_ID + "/" + json[i].Address + "'>Details</a>" +
                                                    "</td>" +
                                                "</tr>" +
                                            "</table>" +
                                            "<table style='width: 100%; border-top:1px solid gray;'>" +
                                                "<tr>" +
                                                    "<td style='text-align:center;font-size: 10px;'>" +
                                                        json[i].Bedroom_Count + " BEDS" +
                                                    "&nbsp;&nbsp;" +
                                                       json[i].Full_Baths + " BATH" +
                                                    "&nbsp;&nbsp;" +
                                                        json[i].BUILDING_SQUARE_FOOTAGE + " Sq.ft." +
                                                    "</td>" +
                                                "</tr>" +
                                            "</table>" +
                                        "</div>";
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                    //getFocusLeftList(sn);
                });
                //extend the bounds to include each marker's position
                bounds.extend(marker.position);
            });
            //now fit the map to the newly inclusive bounds
            map.fitBounds(bounds);
        }
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: null,
            //drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  google.maps.drawing.OverlayType.POLYGON
                ]
            },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            }
        });
        //To add event on circle complete.
        google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
            var radius = circle.getRadius();
            //alert(radius);
        });
        //To add event on drawing complete.
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
            if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
                DrawCircleMarker(event.overlay);
                var radius = event.overlay.getRadius();
                //alert(radius);
            }
            else if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
                var cordinates = event.overlay.getBounds();
                // alert(cordinates);
            }
            else if (event.type == google.maps.drawing.OverlayType.POLYGON) {
                var arrayPath = event.overlay.getPath().b;
                GetMaxMinLatLng(event.overlay);
                $('#Polygon').val(MasterPoly);
                changeView($('#map-canvas'), 'map');
            }
        });
        drawingManager.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    var MaxLat = 0;
    var MaxLng = 0;
    var MinLat = 0;
    var MinLng = 0;
    var MasterPoly = '';
    var Polygon;
    function GetMaxMinLatLng(poly) {
        var polyPoints = poly.getPath();
        var oddNodes = false;
        if (Polygon != null)
            Polygon.setMap(null);
        Polygon = poly;
        for (var i = 0; i < polyPoints.getLength() ; i++) {
            if (i == 0) {
                MaxLat = polyPoints.getAt(i).lat();
                MaxLng = polyPoints.getAt(i).lng();
                MinLat = polyPoints.getAt(i).lat();
                MinLng = polyPoints.getAt(i).lng();
                var con = new Contour(polyPoints.j);
                var c = con.centroid();
                centerLat = c.y;
                centerLong = c.x;
                centerPoint = new google.maps.LatLng(centerLat, centerLong);
            }
            if (polyPoints.getAt(i).lat() > MaxLat) {
                MaxLat = polyPoints.getAt(i).lat();
                $('#SearchLatitude').val(MaxLat);
            }
            if (polyPoints.getAt(i).lat() < MinLat) {
                MinLat = polyPoints.getAt(i).lat();
            }
            if (polyPoints.getAt(i).lng() > MaxLng) {
                MaxLng = polyPoints.getAt(i).lng();
                $('#SearchLongitude').val(MaxLng);
            }
            if (polyPoints.getAt(i).lng() < MinLng) {
                MinLng = polyPoints.getAt(i).lng();
            }
        }
        MasterPoly = MinLng + ' ' + MaxLat + ',' + MinLng + ' ' + MinLat + ',' + MaxLng + ' ' + MinLat + ',' + MaxLng + ' ' + MaxLat + ',' + MinLng + ' ' + MaxLat;
    }

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    // Contour object
    function Contour(points) {
        this.pts = points || []; // an array of Point objects defining the contour
    }

    Contour.prototype.area = function () {
        var area = 0;
        var pts = this.pts;
        var nPts = pts.length - 1;
        var j = nPts - 1;
        var p1; var p2;

        for (var i = 0; i < nPts; j = i++) {
            p1 = pts[i]; p2 = pts[j];
            area += p1.A * p2.k;
            area -= p1.k * p2.A;
        }
        area /= 2;
        return area;
    };

    Contour.prototype.centroid = function () {
        var pts = this.pts;
        var nPts = pts.length - 1;
        var x = 0; var y = 0;
        var f;
        var j = nPts - 1;
        var p1; var p2;

        for (var i = 0; i < nPts; j = i++) {
            p1 = pts[i]; p2 = pts[j];
            f = p1.A * p2.k - p2.A * p1.k;
            x += (p1.A + p2.A) * f;
            y += (p1.k + p2.k) * f;
        }

        f = this.area() * 6;

        return new Point(x / f, y / f);
    };

    $(".SearchProp").hover(function () {
        var lat = $(this).attr("lat");
        var long = $(this).attr("long");
        var sequence = $(this).attr("seq")
        google.maps.event.trigger(m[sequence], "mouseover");
        var laLatLng = new google.maps.LatLng(lat, long);
    });
</script>

Answer 1

我终于明白了。早期的 markerwithlabel javascript 库，如果我们想隐藏标记而只想显示标签，我们只需将一个空括号传递给 icon 参数，如下所示

var marker = new MarkerWithLabel({
                    position: latlng,
                    draggable: false,
                    raiseOnDrag: false,
                    map: map,
                    labelContent: "$" + (json[i].SALE_PRICE / 1000) + 'k',
                    labelAnchor: new google.maps.Point(22, 0),
                    labelClass: "marker", // the CSS class for the label
                    icon: {},
                    title: json[i].Address,
                    id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID
                });

图标:{}，

但现在它不起作用，您必须为此提供图像图标。所以当我为图标提供透明图像时，它现在可以工作了。

icon: '/images/transparent-1x1.png',

此外，我现在正在为此使用最新的 js 库

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js