百度地图的应用

<!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>

猜你喜欢