百度地圖BMap API實例

本文轉載自查看原文 2014-09-26 14:00 63866 BMap/ Map

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
        <style type="text/css">
            body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
            p{margin-left:5px; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?ak=申請的Key&v=2.0&services=false"></script>
    </head>
    <body>
        <div id="content" class="content">
        <input type="text" value="" id="keyword" />
        <input type="button" name="" id="" value="查詢" onclick="search()" />
        <div style="width:600px;height:500px;border:0px solid gray" id="container"></div>
        <p id="aa"></p>
        <script type="text/javascript">
            //創建Map實例
            var map = new BMap.Map("container");
            var point = new BMap.Point(118.060576,36.842432);
            map.centerAndZoom(point,15);
            //添加鼠標滾動縮放
            map.enableScrollWheelZoom();
            
            //添加縮略圖控件
            map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
            //添加縮放平移控件
            map.addControl(new BMap.NavigationControl());
            //添加比例尺控件
            map.addControl(new BMap.ScaleControl());
            //添加地圖類型控件
            //map.addControl(new BMap.MapTypeControl());
            
            //設置標注的圖標
            var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));
            //設置標注的經緯度
            var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});
            //把標注添加到地圖上
            map.addOverlay(marker);
            var content = "<table>";  
                content = content + "<tr><td> 編號：001</td></tr>";  
                content = content + "<tr><td> 地點：淄博市張店區</td></tr>"; 
                content = content + "<tr><td> 時間：2014-09-26</td></tr>";  
                content += "</table>";
            var infowindow = new BMap.InfoWindow(content);
            marker.addEventListener("click",function(){
                this.openInfoWindow(infowindow);
            });
            
            //點擊地圖，獲取經緯度坐標
            map.addEventListener("click",function(e){
                document.getElementById("aa").innerHTML = "經度坐標："+e.point.lng+" &nbsp;緯度坐標："+e.point.lat;
            });
            
            //關鍵字搜索
            function search(){
                var keyword = document.getElementById("keyword").value;
                var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(keyword);
            }
        </script>
        
        </div>
    </body>
</html>

index.php?title=jspopular

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度地圖BMap API的應用實例 HTTPS中調用百度地圖API - BMap is not defined 百度地圖bmap/BMapGL差不多百度地圖BMap使用示例百度地圖API 應用實例 Ehcarts 與百度地圖結合時，如何獲取bmap的實例對象？ JavaScript動態加載script方式引用百度地圖API，Uncaught ReferenceError: BMap is not defined 百度地圖中找不到BMap的解決 vue項目調用百度地圖 BMap is not defined vue項目調用百度地圖 BMap is not defined