我遇到的问题只是我无法加载自定义图标。标记本身会加载，但只有默认图标。如果我设置了图标，我可以加载自定义图标：在标记对象中手动输入，如下所示：
var marker = new google.maps.Marker({
position: places[i],
map: map,
icon: sizeIcons['one']
})
然后他们都加载得很好。但我想设置大小，所以我添加了下面的代码，该代码在我的KML生成器中有效但由于某种原因无法生成我的自定义图标。有什么想法吗？我没有发布所有代码，但$ content [1]的值是50到450之间的数字。
的index.html
$sizeFloat = (int) $content[1];
if($sizeFloat < 50){
?>
<script type="text/javascript">
markerType.push(sizeIcons['one']);
</script>
<?php
}
if($sizeFloat >= 50 && $sizeFloat < 70){
?>
<script type="text/javascript">
markerType.push(sizeIcons['two']);
</script>
<?php
}
if($sizeFloat >= 70 && $sizeFloat < 75){
?>
<script type="text/javascript">
markerType.push(sizeIcons['three']);
</script>
<?php
}
if($sizeFloat >= 75 && $sizeFloat < 88){
?>
<script type="text/javascript">
markerType.push(sizeIcons['four']);
</script>
<?php
}
if($sizeFloat >= 88 && $sizeFloat < 100){
?>
<script type="text/javascript">
markerType.push(sizeIcons['five']);
</script>
<?php
}
if($sizeFloat >= 100 && $sizeFloat < 125){
?>
<script type="text/javascript">
markerType.push(sizeIcons['six']);
</script>
<?php
}
if($sizeFloat >= 125 && $sizeFloat < 150){
?>
<script type="text/javascript">
markerType.push(sizeIcons['seven']);
</script>
<?php
}
if($sizeFloat >= 150 && $sizeFloat < 175){
?>
<script type="text/javascript">
markerType.push(sizeIcons['eight']);
</script>
<?php
}
if($sizeFloat >= 175 && $sizeFloat < 200){
?>
<script type="text/javascript">
markerType.push(sizeIcons['nine']);
</script>
<?php
}
if($sizeFloat >= 200 && $sizeFloat < 250){
?>
<script type="text/javascript">
markerType.push(sizeIcons['ten']);
</script>
<?php
}
if($sizeFloat >= 250 && $sizeFloat < 275){
?>
<script type="text/javascript">
markerType.push(sizeIcons['eleven']);
</script>
<?php
}
if($sizeFloat >= 275 && $sizeFloat < 350){
?>
<script type="text/javascript">
markerType.push(sizeIcons['twelve']);
</script>
<?php
}
if($sizeFloat >= 350){
?>
<script type="text/javascript">
markerType.push(sizeIcons['thirteen']);
</script>
<?php
}
if ($content !== false) {
?>
<script type="text/javascript">
places.push(new google.maps.LatLng(<?php echo json_encode($content[5]); ?>, <?php echo json_encode($content[6]); ?>));
</script>
<?php
}
$id = $id + 1;
}
fclose($file);
}
?>
<script type="text/javascript" src="js/map.js"></script>
map.js
(function() {
// Creating a variable that will hold the InfoWindow object
var infowindow;
// Creating an array that will contain all the size icons
var sizeIcons = [];
sizeIcons['one'] = new google.maps.MarkerImage(
'images/25.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['two'] = new google.maps.MarkerImage(
'images/50.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['three'] = new google.maps.MarkerImage(
'images/70.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['four'] = new google.maps.MarkerImage(
'images/75.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['five'] = new google.maps.MarkerImage(
'images/88.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['six'] = new google.maps.MarkerImage(
'images/100.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['seven'] = new google.maps.MarkerImage(
'images/125.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['eight'] = new google.maps.MarkerImage(
'images/150.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['nine'] = new google.maps.MarkerImage(
'images/175.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['ten'] = new google.maps.MarkerImage(
'images/200.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['eleven'] = new google.maps.MarkerImage(
'images/250.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['twelve'] = new google.maps.MarkerImage(
'images/275.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
sizeIcons['thirteen'] = new google.maps.MarkerImage(
'images/425.png',
new google.maps.Size(48, 48),
null,
new google.maps.Point(24, 24)
);
window.onload = function() {
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
zoom: 5,
center: new google.maps.LatLng(39.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
// Creating a variable that will hold
// the InfoWindow object
var infowindow;
// Looping through the places array
for (var i = 0; i < places.length; i++) {
// Adding the markers
var marker = new google.maps.Marker({
position: places[i],
map: map,
icon: markerType[i]
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
// Check to see if we already have an InfoWindow
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent('Place number ' + i);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, marker);
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
}
// Adjusting the map to new bounding box
map.fitBounds(bounds)
};
})();
答案 0 :(得分：1)
我不确定，但可能是由于您缺少原点：new google.maps.Point(0,0)您当前传入null的位置。通常，当您将图片网址传递为图标时，地图API会为您创建MarkerImage对象，并默认此信息并确定身高和数据。宽度自动。我猜你希望你的图标与中心点对齐，因为你的锚点位于24,24。但是你可能需要定义一个原点，即使它是0,0。
你可以使用精灵这些因为谷歌让你能够使用单个图像和该图像中的多个“正方形”作为不同的点。所以假设你有100 x 100像素的图像。在此图像中，您可以将4个50x50图标排列在网格中。因此，一个MarkerImage可以是0,0到50,50，该行中的下一个是0,50到100,50。等等第二行。