我尝试实例化google.maps.Icon,
var icon = new google.maps.Icon({
anchor:new google.maps.Point(0,0),
origin:new google.maps.Point(0,0),
scaledSize: new google.maps.Size(10,10),
size: new google.maps.Size(10,10),
url:"http://maps.google.com/mapfiles/kml/paddle/purple-square.png"
});
但是我收到了错误,
Uncaught TypeError: undefined is not a function
答案 0 :(得分:11)
我无法使其发挥作用:What is the construct interface `google.maps.Icon`(Example)
对我而言,它适用于匿名对象:
var image = {url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
});
Example from the documentation
代码段
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
anchor: new google.maps.Point(16, 32),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(32, 32),
size: new google.maps.Size(64, 64),
url: "http://maps.google.com/mapfiles/kml/paddle/purple-square.png"
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: beach[0],
zIndex: Math.round(myLatLng.lat() * -100000) << 5
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
@media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
答案 1 :(得分:4)
google.maps.Icon是一个Javascript对象文字,而不是一个类。直到5分钟前,当我试图解决同样的问题时,我才知道这一点。
google maps API文档:
https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons
举例说明从已弃用的MarkerImage(v3.9)转换为Icon(v3.10 +)
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
变为
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
所以艾伦(和我)试图使用一个不存在的构造函数new google.maps.Icon()
。只需删除留下var icon = {<list of properties>};
的文字,一切都应该有用。
google API ref:
https://developers.google.com/maps/documentation/javascript/reference#Icon
并没有使这一点非常明显。
我也去教育自己关于对象文字 - 你可以在mozilla找到解释 - 搜索javascript对象文字 - 我无法发布链接,因为这是我在堆栈交换时给出的第一个答案,我需要更多指向添加两个以上的链接!