百度地圖學習

時間  2019-11-12
標籤 百度 地圖 學習 简体版
原文   原文鏈接

    這個事情好久前想作了，並且也作了一點，可是沒有作成我想要的效果，後面一直只是想一想，僅僅想一想而已。有點好笑了！今天又來研究了，首先在博客園首頁找找看中輸入「百度地圖」，結果出現了以下結果如圖：javascript

而後點擊其中那個說有源碼的，而後認真看了一下，跟着它作，結果勉勉強強能夠看到效果了，不過不是很理想，只是關鍵代碼，對於一貫不怎麼喜歡想的人來講，是很難接受的。本也打算像下面評論的人同樣留個電子郵件，而後向做者索取源代碼，而後再來研究。後面吃完飯回來，觀念改變了，試試看，就這樣，硬着頭皮摸索，結果有了下面的結果如圖：css

代碼結構以下：html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script src="../shangchuan/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        ul li
        {
         list-style-type:none;
         height:50px;
         display:block;
        }
    </style>
</head>
<body>
    <form id="form1">
    <div style=" width:1200px">
    <div style="width:250px;height:500px; float: left;">
   <ul>
   <li onmouseover="ReDrawMap('113.2694165','23.1206685','豪華大酒店1')">豪華大酒店1</li>
   <li onmouseover="ReDrawMap('113.2675147','23.131815','豪華大酒店2')"> 豪華大酒店2</li>
   <li onmouseover="ReDrawMap('113.2860744','23.1375744','豪華大酒店3')">豪華大酒店3</li>
   <li onmouseover="ReDrawMap('113.2634046','23.1561963','豪華大酒店4')">豪華大酒店4</li>
   <li onmouseover="ReDrawMap('113.2687466','23.1273524','豪華大酒店5')">豪華大酒店5</li>
   <li onmouseover="ReDrawMap('113.2569644','23.1093136','豪華大酒店6')">豪華大酒店6</li>
   <li onmouseover="ReDrawMap('113.2767329','23.0909343','豪華大酒店7')">豪華大酒店7</li>
   <li onmouseover="ReDrawMap('113.2453437','23.1078105','豪華大酒店8')">豪華大酒店8</li>
   <li onmouseover="ReDrawMap('113.2428724','23.1056848','豪華大酒店9')">豪華大酒店9</li>
   <li onmouseover="ReDrawMap('113.2676179','23.1147277','豪華大酒店10')">豪華大酒店10</li>
   </ul>
    </div>
    <div style="width:900px;height:500px; float: left;border:1px solid gray" id="container"></div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    
    function ReDrawMap(jingdu,weidu,hotelname) {
        var resultData = [{ "HotelCode": "1175", "jingdu": "113.2694165", "weidu": "23.1206685" }, { "HotelCode": "1178", "jingdu": "113.2675147", "weidu": "23.131815" }, { "HotelCode": "1182", "jingdu": "113.2860744", "weidu": "23.1375744" }, { "HotelCode": "1185", "jingdu": "113.2634046", "weidu": "23.1561963" }, { "HotelCode": "1186", "jingdu": "113.2687466", "weidu": 23.1273524 }, { "HotelCode": "1188", "jingdu": "113.2569644", "weidu": "23.1093136" }, { "HotelCode": "1190", "jingdu": "113.2767329", "weidu": "23.0909343" }, { "HotelCode": "1191", "jingdu": "113.2453437", "weidu": "23.1078105" }, { "HotelCode": "1192", "jingdu": "113.2428724", "weidu": "23.1056848" }, { "HotelCode": "1194", "jingdu": "113.2676179", "weidu": "23.1147277"}];
        //var alert(resultData.length);
        var map = new BMap.Map("container");          // 建立地圖實例
        var point = new BMap.Point(113.275, 23.117);
        map.centerAndZoom(point, 15);             // 初始化地圖，設置中心點座標和地圖級別
        map.enableScrollWheelZoom(); // 容許滾輪縮放
        map.enableKeyboard = true;
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl()); // 啓用比例尺。            
        map.addControl(new BMap.MapTypeControl()); // 是否啓用衛星地圖等等。
       
        var MAX = resultData.length;
        // alert(MAX);
        var markers = [];
        var pt = null, mypt = null;
        var i = 0;
        var infoWindow;
        var myIcon = new BMap.Icon("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/chizhiyiheng.png", new BMap.Size(28, 37), {
    });
    // alert(markers.length);
    var opts1 = { title: '<span style="font-size:14px;color:#0A8021">'+hotelname+'</span>' };
    var tmpInfo = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝陽區高碑店小學旁</br><b>電話:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>詳情>></a></div>", opts1);  // 建立信息窗口對象，引號裏能夠書寫任意的html語句。

    for (; i < MAX; i++) {
        //alert(resultData[1].jingdu);
        pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu);
        mypt = new BMap.Marker(pt);
        mypt.setIcon(myIcon);
        map.addOverlay(mypt);
       // mypt.openInfoWindow(tmpInfo);
        markers.push(mypt);
    }
   
        var pointa = new BMap.Point(jingdu, weidu); // 建立點座標
       // alert(point);
        debugger;
      // var mkrs =map.Map.getOverlays();
      // alert(mkrs);
        var positionjing;
        var positionwei;
        for (var i = 0; i < MAX; i++) {
                positionjing = resultData[i].jingdu;
                positionwei = resultData[i].weidu;
                if (positionjing == jingdu && positionwei == weidu) {
                    pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu);
                    mypt = new BMap.Marker(pt);
                    mypt.setIcon(myIcon);
                    map.addOverlay(mypt);
                    mypt.openInfoWindow(tmpInfo);
                }
            }
      
    }
    $(document).ready(function () {
        var strc = "Mapdata.aspx"
        var cityid = "146";
        var resultData = [{ "HotelCode": "1175", "jingdu": "113.2694165", "weidu": "23.1206685" }, { "HotelCode": "1178", "jingdu": "113.2675147", "weidu": "23.131815" }, { "HotelCode": "1182", "jingdu": "113.2860744", "weidu": "23.1375744" }, { "HotelCode": "1185", "jingdu": "113.2634046", "weidu": "23.1561963" }, { "HotelCode": "1186", "jingdu": "113.2687466", "weidu": 23.1273524 }, { "HotelCode": "1188", "jingdu": "113.2569644", "weidu": "23.1093136" }, { "HotelCode": "1190", "jingdu": "113.2767329", "weidu": "23.0909343" }, { "HotelCode": "1191", "jingdu": "113.2453437", "weidu": "23.1078105" }, { "HotelCode": "1192", "jingdu": "113.2428724", "weidu": "23.1056848" }, { "HotelCode": "1194", "jingdu": "113.2676179", "weidu": "23.1147277"}];
        //var alert(resultData.length);
        var map = new BMap.Map("container");          // 建立地圖實例
        //var map = option.Map || new BMap.Map("container");     
        var point = new BMap.Point(113.275, 23.117);
        map.centerAndZoom(point, 15);             // 初始化地圖，設置中心點座標和地圖級別
        map.enableScrollWheelZoom(); // 容許滾輪縮放
        map.enableKeyboard = true;
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl()); // 啓用比例尺。            
        map.addControl(new BMap.MapTypeControl()); // 是否啓用衛星地圖等等。

        var MAX = resultData.length;
       // alert(MAX);
        var markers = [];
        var pt = null, mypt = null;
        var i = 0;
        var infoWindow;
        var myIcon = new BMap.Icon("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/chizhiyiheng.png", new BMap.Size(28, 37), {
    });
    for (; i < MAX; i++) {
        //alert(resultData[1].jingdu);
        pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu);
        mypt = new BMap.Marker(pt);
        mypt.setIcon(myIcon);
        map.addOverlay(mypt);
        markers.push(mypt);
    }
    //alert(markers.length);
    ////最簡單的用法，生成一個marker數組，而後調用markerClusterer類便可。
  //  var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers.reverse(), isAverangeCenter: true, girdSize: 100, maxZoom: 15 });

    /*$.ajax({
    type: "POST",
    dataType: "json",
    url: strc,
    // data: "sortBy='" + sortByStr + "' &&paixu='" + paixu + "'", //傳值
    data: { "cityid": cityid },
    beforeSend: function (XMLHttpRequest) {
    // $("#fdiv").html("<img style='margin:40px 0 0 10px;' src='http://www.fnetravel.com/images/022.gif'/>&nbsp;數據加載中...");
    },
    success: function (resultData) {
    alert(resultData);
    /* var map = new BMap.Map("container");
    var pp = new BMap.Point(113.275, 23.117);    
    map.centerAndZoom(pp,15);*/
    /*
    var map = new BMap.Map("container");          // 建立地圖實例
    //var map = option.Map || new BMap.Map("container");     
    var point = new BMap.Point(113.275, 23.117);
    map.centerAndZoom(point, 10);             // 初始化地圖，設置中心點座標和地圖級別
    map.enableScrollWheelZoom(); // 容許滾輪縮放
    map.enableKeyboard = true;
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl()); // 啓用比例尺。            
    map.addControl(new BMap.MapTypeControl()); // 是否啓用衛星地圖等等。

    var MAX = resultData.count;
    var markers = [];
    var pt = null, mypt = null;
    var i = 0;
    var infoWindow;
    var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(28, 37), {
    });
    for (; i < MAX; i++) {
    pt = new BMap.Point(resultData.data[i].Longitude, resultData.data[i].Dimension);
    mypt = new BMap.Marker(pt);
    mypt.setIcon(myIcon);
    mypt.addEventListener("click", function (no) {
    return function () {
    infoWindow = LoadMakerInfo(resultData.data[no]);
    this.openInfoWindow(infoWindow);
    //createInfoWin(resultData.data[no]).redraw();
    };
    } (i));
    markers.push(mypt);
    }
    ////最簡單的用法，生成一個marker數組，而後調用markerClusterer類便可。
    var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers.reverse(), isAverangeCenter: true, girdSize: 100, maxZoom: 15 });
            
    },
    error: function (xx) {
    alert("xxxxxx");
    }
    });
    */
});
</script>

 

本想用Ajax從數據庫中動態取，可總是不成功。無奈只有寫死那麼十條數據了。java

代碼有點零亂，將就看看吧！jquery

參考：http://www.cnblogs.com/xsyblogs/p/3936275.htmlgit

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程