1. 程式人生 > >百度地圖的應用

百度地圖的應用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=A8670c09c603b2e409efef4709e83f0c"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
  </style>

  </style>

    <title>地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

    var mymap={
       map: null,
       myIcon: null,
       point: null,
    bottom_right_navigation: null,
       bottom_left_control: null,
       myMarker: null,
    address:null,
    mymaplable:null,
    coArr:[],
       init:function(){
           this.map = new BMap.Map("allmap");
           this.map.centerAndZoom(this.point, 14);    
        this.xy =     mymap.map.getBounds();
           this.myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/dw_blue.png", new BMap.Size(40, 70), { anchor: new BMap.Size(10, 34), imageSize: new BMap.Size(20, 35) });
        this.bottom_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM }); //縮放按鈕
        this.bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(0, 30) });
        mymap.map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
        mymap.map.addControl(this.bottom_left_control);
        mymap.map.addControl(this.bottom_right_navigation);    //新增地圖型別控制元件
        mymap.map.addEventListener("tilesloaded", function () { mymap.LoadData(); });        
       },
       LoadData:function(){
        mymap.SetMe();
        mymap.Loadinfo();
        this.xy = this.GetBounds();
       },
    SetMe:function(){
         this.map.clearOverlays();
         var geoc = new BMap.Geocoder();
            geoc.getLocation(mymap.map.getCenter(), function (rs) {
                
                var addComp = rs.addressComponents;
                var pois = rs.surroundingPois;
                if (pois.length > 0) {
                    mymap.address = pois[0].title;
                }
                else if ( mymap.address == null && addComp != null ) {
                    mymap.address = addComp.district + addComp.street + addComp.streetNumber;
                }
                mymap.mymaplable.setContent(mymap.address);
            });
            
            
            
        if (mymap.myMarker) mymap.map.removeControl(mymap.myMarker);
        
        mymap.myMarker = new BMap.Marker(mymap.map.getCenter(), { icon: this.myIcon });
        mymap.map.addOverlay( mymap.myMarker);
        if (mymap.mymaplable) mymap.map.removeControl(mymap.mymaplable);
        var opts = {
            position: mymap.map.getCenter(),
            offset: new BMap.Size(-90, -58)
        }
        mymap.mymaplable = new BMap.Label("", opts);
        mymap.mymaplable.setStyle({
           color: "#666",
            fontSize: "12px",
            height: "22px",
            lineHeight: "20px",
            fontFamily: "微軟雅黑",
            borderColor: '#ddd',
            width: '180px',
            textAlign: 'center'
        });
        mymap.map.addOverlay(mymap.mymaplable);
        
    },
    Loadinfo:function(){   
        for (var i = 0; i < mymap.coArr.length; i++) {
            
        var pt = new BMap.Point(mymap.coArr[i].x, mymap.coArr[i].y);
        var bs = this.map.getBounds();
        var istrue= bs.containsPoint(pt);
                if(istrue){
                    
                var sContent =
    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+mymap.coArr[i].addr+"</h4>" +
    "<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安門'/>" +
    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+mymap.coArr[i].name+mymap.coArr[i].tel+"</p>" +
    "</div>";
        var infoWindow = new BMap.InfoWindow(sContent);
                    
                    
                    var myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/fuwu.png", new BMap.Size(50, 60), { anchor: new BMap.Size(13, 30), imageSize: new BMap.Size(26, 30) });
                    var marker = new BMap.Marker(pt,{icon:myIcon});  
                       marker.addEventListener("click", function () {
                           this.openInfoWindow(infoWindow);
                    });
                    mymap.map.addOverlay(marker);  
                }
        }

        
       }



   }
        
        mymap.point = new BMap.Point(118.180194, 39.630867);
        mymap.coArr=[{'id':'298','addr':'路北區學院北路萬科金域華府','x':118.163906,'y':39.651905,obj:null}];
        mymap.init();
        
</script>