我遇到的問題只是我無法獲取自定義圖標加載。標記本身加載,但只是默認圖標。如果我設置圖標,我可以加載自定義圖標:在標記對象中手動鍵入,如下所示:谷歌地圖上沒有顯示自定義圖標
var marker = new google.maps.Marker({
position: places[i],
map: map,
icon: sizeIcons['one']
})
然後它們都加載得很好。但我想設置大小,所以我添加了下面的代碼,它在我的KML生成器中工作,但出於某種原因無法生成我的自定義圖標。任何想法爲什麼?我沒有張貼的所有代碼,但的$內容的價值[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)
};
})();
我想過使用精靈,但有人已經創建了13個小圖標。另外,當我手動輸入icon:sizeIcons ['three']時,它工作正常。當我嘗試檢查大小併發送陣列中的信息時,它會再次停止工作 – shinjuo 2011-02-15 15:18:50