我一直在尝试几个选项,但不幸的是我无法为不同的位置设置不同的图标,也试图找出为什么天气层可选字段为空白,就像在其他应用程序中它确实有效一样。
非常感谢任何帮助
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en&libraries=weather"></script>
<style type="text/css">
#apDiv1 {
position: absolute;
right: 240px;
top: 5px;
width: 160px;
height: 39px;
z-index: 1;
background-color: #ccc;
overflow: visible;
opacity: 0.8;
z-index:1;
}
</style>
<script type="text/javascript">
var map;
var WeatherLayer;
var CloudsLayer;
var zoomLimit = 6;
var dealer_markers = [{
sales: '1',
aftersales: '0',
name: 'Strike in Frankfurt',
lat: '51.595212',
lng: '-2.400068',
adr: '',
pc: 'In Some Place',
tel: '21312312312',
url: '.',
avr: '',
position: '1'
},
{
sales: '0',
aftersales: '1',
name: 'Bob Two',
lat: '52.306323',
lng: '14.000778',
adr: 'Some Address',
pc: 'Some Place',
tel: '213213123123',
url: '.',
avr: '',
position: '2'
},
{
sales: '1',
aftersales: '1',
name: 'Bob Three',
lat: '22.742384',
lng: '-0.488795',
adr: 'Another address',
pc: 'More place',
tel: '23423423423',
url: '',
avr: '',
position: '3'
},
{
sales: '0',
aftersales: '1',
name: 'Bob Two',
lat: '11.306323',
lng: '14.000778',
adr: 'Some Address',
pc: 'Some Place',
tel: '213213123123',
url: '.',
avr: '',
position: '4'
},
];
function _newGoogleMapsMarker(param) {
var r = new google.maps.Marker({
map: param._map,
icon:'icon2.gif',
position: new google.maps.LatLng(param._lat, param._lng),
title: param._head
});
if (param._data) {
google.maps.event.addListener(r, 'click', function() {
// this -> the marker on which the onclick event is being attached
if (!this.getMap()._infoWindow) {
this.getMap()._infoWindow = new google.maps.InfoWindow();
}
this.getMap()._infoWindow.close();
this.getMap()._infoWindow.setContent(param._data);
this.getMap()._infoWindow.open(this.getMap(), this);
});
}
return r;
}
function init() {
var mO = {
center: new google.maps.LatLng(52.041213, -1.325532),
zoom: 3,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
zoomControl:true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mO);
for (var a = 0; a < dealer_markers.length; a++) {
var tmpLat = dealer_markers[a].lat;
var tmpLng = dealer_markers[a].lng;
var tmpName = dealer_markers[a].name;
var tmpAdr = dealer_markers[a].adr;
var tmpTel = dealer_markers[a].pc;
var tmpPc = dealer_markers[a].tel;
var marker = _newGoogleMapsMarker({
_map: map,
_lat: tmpLat,
_lng: tmpLng,
_head: '|' + new google.maps.LatLng(tmpLat, tmpLng),
_data: '<div id="bg">\
<h2 class="title">' + tmpName + '</h2>\
<h3 class="address">' + tmpAdr + '</h3>\
<h3 class="pc">' + tmpPc + '</h3>\
<h3 class="telephone">' + tmpTel + '</h3>\
</div>'
});
}
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
cloudsLayer = new google.maps.weather.CloudLayer();
//cloudsLayer.setMap(map);
$('#weather_box').click(function(){
weatherLayer.setMap($(this).is(':checked') ? map : null);
});
$('#clouds_box').click(function(){
cloudsLayer.setMap($(this).is(':checked') ? map : null);
});
$('#weather_box,#clouds_box').removeAttr('disabled');
}
window.onload = init;
</script>
<body>
<div id="apDiv1">
<input type="checkbox" id="clouds_box" disabled="true">
clouds
<input type="checkbox" id="weather_box" disabled="true" checked>
weather
</div>
<div id="map" style="width:1300px; height:800px;border:1px solid; margin-top:20px;opacity:0.9;background-color: black;"></div>
</body>