soso map(1)
8月15日 有点迷糊，弄个soso map都弄半天！唉。。。这个功能不错！！！好好弄，明天继续来！！！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSOMap</title>
<style type="text/css">
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
</style>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
var map,
info,
station_markers = [],
station_labels = [],
stations_id = [],
searchService = new soso.maps.SearchService(),
stationService = new soso.maps.StationService();
function init() {
map = new soso.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new soso.maps.LatLng(39.916527,116.397128)
});
searchKeyword();
}
//清除地图上的marker
function clearOverlays(overlays){
var overlay;
while(overlay = overlays.pop()){
overlay.setMap(null);
}
}
function searchKeyword() {
var keyword = document.getElementById("keyword").value;
var region = document.getElementById("region").value;
var request = {
keyword: keyword,
region:region,
searchMode:soso.maps.SearchMode.BUS
}
var latlngBounds = new soso.maps.LatLngBounds();
info = new soso.maps.InfoWindow({map: map,zIndex:20});
searchService.search(request, function(response, status) {
if (status == soso.maps.SearchStatus.OK) {
clearOverlays(station_markers);
var pois = response.pois;
var info_html = [];
for(var i = 0,l = pois.length;i < l; i++){
if(i<5){ //显示前五个
var poi = pois[i];
latlngBounds.extend(poi.latLng);
var marker = new soso.maps.Marker({
map:map,
position: poi.latLng
});
var decor = new soso.maps.MarkerDecoration({
content: i+1,
margin: new soso.maps.Size(0, -4),
align: soso.maps.ALIGN.CENTER,
marker: marker
});
(function(marker,station_id){
soso.maps.Event.addListener(marker, 'click', function() {
var request = {
stationId:station_id
}
//站点详情
stationService.detail(request,function(response,status){
var station = response;
var via_line = [];
for(var j=0;j<station.lines.length;j++){
via_line.push(station.lines[j].name)
}
info.open('<div style="width:280px;">'
+'站点ID：'+station.id
+'<br>站点名称：'+station.name
+'<br>途经线路：'+via_line.join(',')
+'</div>',
marker);
});
});
})(marker,poi.id);
station_markers.push(marker);
var station_type
poi.type == soso.maps.PoiType.BUS_STATION && (station_type = '公交车站');
poi.type == soso.maps.PoiType.SUBWAY_STATION && (station_type = '地铁站');
info_html.push('<div><b>'+(i+1)+".</b>"+poi.name+' - '+station_type+'</div>');
}
}
map.fitBounds(latlngBounds);
document.getElementById('infos_div').innerHTML = info_html.join('');
} else {
alert("检索没有结果，原因: " + status);
}
});
}
</script>
</head>
<body onLoad="init();">
<div style='margin:5px 0px'> <b>路点名称: </b>
<select id="region">
<option value="北京">北京</option>
</select>
<input id="keyword" style="width:50px" type="textbox" value="中关村">
<input type="button" value="检索" onClick="searchKeyword()">
(单击标记显示站点详情信息) </div>
<div style="width:580px;height:300px" id="container"></div>
<div style="width:580px;padding-top:5px" id="infos_div"></div>
</body>
</html>