Echarts 顯示百度地圖的用法（2）

1.根據經緯度加載地圖

2.根據地址獲取地圖信息

3.可拖拽地圖顯示坐標

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vgQfNjTQDlCar24CrTIdWcwY"></script>
<div id="allmap" style="height: 600px"></div><br/>
<span id="lng"></span>
<span id="lat"></span>
<script  type="text/javascript">
<script  type="text/javascript">
    $(function() {
        //==========隔1500秒調整視野到"上海"===========
        //GetMapByChina();

        //==========根據經緯度加載地圖===============
        //var pointX = "31.035434";
        //var pointY = "121.248119";
        //var address = "松江國際生態商務區光星路1688號(松江萬達廣場旁)";
        //var buildName = "新江灣首府";
        //GetMapByPoint(pointX, pointY, address, buildName);
        
        //===========根據項目地址獲取地圖信息 
        //GetMapByAddress("長寧區延安西路1160號","上海","首信銀都");
        
        //===========可拖拽地圖顯示坐標======
        var pointX = "31.035434";
        var pointY = "121.248119";
        setLocation(pointX, pointY);
    });

    //==========隔1500秒調整視野到"上海"===========
    var map = new window.BMap.Map("allmap");
    function GetMapByChina() {
        //百度地圖API功能
        
        map.centerAndZoom(new window.BMap.Point(116.403765, 39.914850), 7);
        map.enableScrollWheelZoom();

        setTimeout(function() {
            getBoundary();
        }, 1500);

        function getBoundary() {
            var bdary = new window.BMap.Boundary();
            bdary.get("上海", function(rs) { //獲取行政區域
                map.clearOverlays(); //清除地圖覆蓋物       
                var count = rs.boundaries.length; //行政區域的點有多少個
                for (var i = 0; i < count; i++) {
                    var ply = new window.BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多邊形覆蓋物
                    map.addOverlay(ply); //添加覆蓋物
                    map.setViewport(ply.getPath());
                    alert(map.point.layerX());
                }
            });
        }
    }

    //============根據經緯度加載地圖==============
    function GetMapByPoint(pointX, pointY, address, buildName) {
        //lat 經度 lng 緯度 address 項目地址 name  項目名稱
        var point = new window.BMap.Point(pointY, pointX, address, buildName);
        SetContent(point, address, name);
    }


    //根據項目地址獲取地圖信息 
    function GetMapByAddress(address, city, name) {
        // 創建地址解析器實例
        var myGeo = new BMap.Geocoder();
        // 將地址解析結果顯示在地圖上,並調整地圖視野
        myGeo.getPoint(address, function(point) {
            if (point) {
                SetContent(point, address, name);
            }
        }, city);
    }
    
    function SetContent(point, address, name) {
        var map = new BMap.Map("allmap");
        var marker = new BMap.Marker(point, { enableDragging: true, }); //enableDragging 標注物可拖拽
        map.addOverlay(marker);
        //經度 
        alert("經度:" + point.lat);
        //緯度
        alert("緯度:" + point.lng);
        var opts = {
            width: 200,     // 信息窗口寬度
            height: 60,     // 信息窗口高度
            title: name, // 信息窗口標題
            enableMessage: false,//設置允許信息窗發送短息
            //message: "您好，請點擊下面的鏈接查看地圖"
        };

        var infoWindow = new BMap.InfoWindow("地址：" + address, opts); // 創建信息窗口對象
        map.openInfoWindow(infoWindow, point);
        map.centerAndZoom(point, 15);
        SetMarkerEvent(marker, infoWindow); //添加標注拖拽事件
        map.enableScrollWheelZoom(true); //啟動地圖拖拽功能
        map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, })); //右上角添加添加默認縮放平移控件
    }

    //經緯度顯示，拖拽后顯示經緯度
    function setLocation(x, y) {//參數：經緯度
        map.clearOverlays();
        var point = new window.BMap.Point(x, y);
        map.centerAndZoom(point, 7);
        var marker = new window.BMap.Marker(point);  // 創建標注
        map.addOverlay(marker);              // 將標注添加到地圖中
        marker.enableDragging();    //可拖拽
        $("#lng").val(point.lng);
        $("#lat").val(point.lat);
        map.enableScrollWheelZoom();
        marker.addEventListener('dragend', getlngAndlat);
        //拖拽時調用的方法
        function getlngAndlat(e) {
            if (e.point.lng != null) {
                $("#lng").val(e.point.lng);
                $("#lat").val(e.point.lat);
                alert("拖拽后的坐標經度:" + e.point.lng);
                alert("拖拽后的坐標緯度:" + e.point.lat);
            }
        }
        map.addOverlay(marker);
    }
</script>

</script>