頁面中加入地圖map

時間 2019-11-07

標籤頁面加入地圖 map 简体版

原文原文鏈接

一、首先要有密鑰AK ，能夠本身註冊獲取或複製別人的。搜索百度地圖API （http://lbsyun.baidu.com/apiconsole/key）javascript

二、地圖示例css

<head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=weuMwIVhzBCjZgGaPA5SVOQV"></script> //這裏是引入，ak=您的密鑰
　　　　<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密鑰&s=1"></script> //若是是https的網站，後面要加&s=1 

    </head>
        <style>
            *{margin:0;padding:0;}
            #container{
                margin:50px auto;
                width:800px;height:600px;
                border:2px solid #F65F57;
            } 
        </style>
    <body>
        <div id="container"></div>  //顯示地圖的div
        <script type="text/javascript">
            var map= new BMap.Map('container'); // 建立地圖實例  
            var point= new BMap.Point(114.059627,22.627415); // 建立點座標 
            map.centerAndZoom(point,16);    // 初始化地圖，設置中心點座標和地圖縮放級別 
            map.addControl(new BMap.NavigationControl());  //添加平移縮放控件，左上方位置
            map.addControl(new BMap.ScaleControl());//添加比例尺控件，左下方位置
            map.addControl(new BMap.MapTypeControl());//地圖類型控件，右上方位置
            map.addControl(new BMap.OverviewMapControl()); 
            var marker = new BMap.Marker(point); // 建立標註    
            map.addOverlay(marker);   // 將標註添加到地圖中
            
            msg = {    
                   width : 300,     // 信息窗口寬度    
                   height: 50,     // 信息窗口高度    
                   title : "公司簡介" , // 信息窗口標題   
                   offset:new BMap.Size(8,-12) //調位置，至關於css相對定位relative
            }    
            
            // 建立信息窗口對象  ，寫文字內容
            var infoWindow = new BMap.InfoWindow("<p>hello world!</p> <div style='color:red;'>客服電話：123456</div>", msg);    
            map.openInfoWindow(infoWindow, map.getCenter());      // 頁面顯示信息窗口

        </script>
    </body>