javascript 谷歌地图：- InvalidValueError: setIcon: not a string; 并且没有 url 属性；并且没有路径属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27290671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map:- InvalidValueError: setIcon: not a string; and no url property; and no path property
提问by Jitendra Pancholi
I am getting this error in google maps.
我在谷歌地图中收到此错误。
Error: InvalidValueError: setIcon: not a string; and no url property; and no path property
错误：InvalidValueError：setIcon：不是字符串；并且没有 url 属性；并且没有路径属性
Earlier it was working fine and i never changed my code.
早些时候它运行良好，我从未更改过我的代码。
I have seen a post Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path propertywith same issue and applied the change mentioned in the answer. Earlier it was working and now it also stopped working.
我看过一篇帖子Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; 并且没有 url 属性；并且没有具有相同问题的路径属性并应用了答案中提到的更改。早些时候它正在工作，现在它也停止工作。
It Seems that google has changed something in their API but not sure what exactly. I found the same issue found by some other users too @ https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423
似乎谷歌在他们的 API 中改变了一些东西，但不确定到底是什么。我发现其他一些用户也发现了同样的问题@ https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423
My website link is http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/just open in firefox and see the error console. I have included below js files for map.
我的网站链接是http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/只需在 Firefox 中打开并查看错误控制台。我在下面包含了地图的 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>
Below is the complete javascript code which i used.
下面是我使用的完整 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;'>" +
"5,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" +
" " +
"1 BATH" +
" " +
"1,235 Sq.ft." +
" " +
"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" +
" " +
json[i].Full_Baths + " BATH" +
" " +
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>
采纳答案by Jitendra Pancholi
Finally I figured out the issue. Earlier markerwithlabel javascript library, if we want to hide the marker and only want to show the label, we just pass an empty braces to icon parameter like below
最后我想通了这个问题。早期的markerwithlabel javascript库，如果我们想隐藏标记而只想显示标签，我们只需将一个空大括号传递给图标参数，如下所示
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: {},
图标： {}，
But now it doesn't work, you must have to supply an image icon for that. SO when I supplied a transparent image to icon, it works now.
但是现在它不起作用了，您必须为此提供一个图像图标。所以当我为图标提供透明图像时，它现在可以工作了。
icon: '/images/transparent-1x1.png',
Also I am now using latest js library for that
此外，我现在正在为此使用最新的 js 库
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js
回答by Manik Arora
I happened to fall in the same issue and below is the solution which helped me, I hope this helps you too.
我碰巧遇到了同样的问题，下面是对我有帮助的解决方案，我希望这对你也有帮助。
First add this google marker with label script in a JS file- (mine is MarkerWithLabel.js) https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131
首先在 JS 文件中添加带有标签脚本的谷歌标记 - （我的是 MarkerWithLabel.js） https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/ src/markerwithlabel.js?r=131
Then add the below mentioned google map JS libraries on the page-
然后在页面上添加下面提到的谷歌地图JS库-
https://maps.googleapis.com/maps/api/js?key=some_key_here&sensor=false
~/Scripts/MarkerWithLabel.js
https://maps.googleapis.com/maps/api/js?key=some_key_here&sensor=false
~/Scripts/MarkerWithLabel.js
function showMap() {
var address = $('#corp-add').text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 16
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(latitude, longitude),
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "5K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 0.75 }
});
var iw1 = new google.maps.InfoWindow({
content: "This is a test marker"
});
google.maps.event.addListener(marker, "click", function (e) { iw1.open(map, this); });
}
});
In my code above I am using Google GeoCoder to convert address to Latitudes and Longitudes. You can modify the above code according to your requirements.
在我上面的代码中，我使用 Google GeoCoder 将地址转换为纬度和经度。可以根据自己的需求修改上面的代码。
You can also follow these links and they might be helpful- http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html
您也可以点击这些链接，它们可能会有所帮助 - http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html
Let me know if you need more details from me.
如果您需要我提供更多详细信息，请告诉我。
Regards,
问候，
Manik
马尼克
