1、首先要有密鑰AK ，可以自己註冊獲取或複製別人的 。搜索百度地圖API （http://lbsyun.baidu.com/apiconsole/key） 2、地圖示例 如圖： 引原文：https://www.cnblogs.com/luhailin/p/6639943.html ...
1、首先要有密鑰AK ，可以自己註冊獲取或複製別人的 。搜索百度地圖API （http://lbsyun.baidu.com/apiconsole/key）
2、地圖示例
<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>
如圖：
引原文：https://www.cnblogs.com/luhailin/p/6639943.html
