soso map(1)

6579 ワード
html function input div button textbox
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>

2638-チーズ-DFS
Matplotlibの起動