481
百度地圖的js調用
全部學習資源下載：https://pan.baidu.com/s/1eSGy3Qi
效果預覽：https://wjf444128852.github.io/demo/baiduditu/index.html
html5裏完全支持百度地圖
使用步驟
1、 引入百度地圖的JS
* 鏈接 - https://api.map.baidu.com/api?v=2.0&ak=秘鑰
* 必須先申請應用秘鑰 - XXXXXXX
2、在HTML頁麵中定義用於顯示百度地圖的容器(元素)
* 使用<div></div>元素
3. 創建百度地圖的對象(Map)
* * 構造器 - BMap.Map(容器id)
* * 通過centerAndZoom()進行地圖的初始化
* * 該方法是必要方法
4. 初始化百度地圖
* Map地圖對象
* * 方法 - centerAndZoom(center,zoom)
* * center參數 - 設置當前的中心點
* * 類型為Point,zoom參數必須設置
* * 類型為String,例如"北京",zoom參數可以省略
* * zoom參數 - 設置地圖顯示級別
* * PC端 - 3-19
* * 移動端 - 3-18
<!DOCTYPE html> <html> <head> <title>使用百度地圖位置定位</title> <meta charset="utf-8" /> <script src="https://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script> <style type="text/css"> body, html,#allmap { width: 100%; height: 100%; overflow: hidden; margin:0; font-family:"微軟雅黑"; } </style> </head> <body> <div id="allmap"></div> <script> var map = new BMap.Map("allmap"); map.centerAndZoom("上海",12); /* * 使用瀏覽器定義 - 得到當前位置的經度和緯度 * Geolocation類 * * 作用 - 返回用戶當前的位置 * * 問題 - 依靠瀏覽器來實現當前位置定位的功能 * * 構造器 - Geolocation() * * 方法 * * getCurrentPosition(callback)方法 * * 作用 - 返回用戶當前位置 * * 參數callback * * 定位成功,該回調函數具有一個GeolocationResult參數 * GeolocationResult類 * * 作用 - 返回當前位置的經度和緯度 * * 屬性 * * point - 當前位置坐標值(經度和緯度) */ /* var local = new BMap.Geolocation(); local.getCurrentPosition(function(result){ // result.point獲取的坐標值 - 不準確 console.log(result.point.lng); console.log(result.point.lat); }); */ /* * 使用地址解析方式 - 到當前位置的經度和緯度 * Geocoder類 * * 作用 - 用於獲取用戶的地址解析 * * 構造器 - Geocoder() * * 方法 * * getPoint(address,callback,city)方法 * * 作用 - 對指定的地址進行解析 * * 參數 * * address - 設置解析的地址內容 * * callback - 回調函數 * * 地址定位成功,具有Point參數 * * city - 當前中心城市 */ // 創建比例尺控件對象 var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT}); // 將比例尺控件添加到百度地圖中 map.addControl(scale); // /* * Control類 - 控件類 * NavigationControl類 - 表示地圖的平移縮放控件 * * 構造器 - NavigationControl() * Map對象移除控件 - removeControl() */ var nav = new BMap.NavigationControl(); map.addControl(nav); // 設定目標提醒位置 var geo = new BMap.Geocoder(); geo.getPoint("上海市廈門路115號",function(point){ /* console.log(point.lng); console.log(point.lat); */ var marker = new BMap.Marker(point); map.centerAndZoom(point,17); map.addOverlay(marker); /* * 鼠標點擊標注,打開信息窗口 * InfoWindow類 - 信息窗口 * * 構造器 - InfoWindow(addr,options) * * addr - 設置的地址 * * options - 設置信息窗口的設置 */ var opts = { width : 200, height: 100, title : "捷達五金商城" } // 創建信息窗口對象 var info = new BMap.InfoWindow("地址:廈門路115號.",opts); // 為標注綁定click事件 marker.addEventListener("click",function(){ // 打開信息窗口 map.openInfoWindow(info,point); }); },"上海市"); </script> </body> </html>
最後更新：2017-11-03 18:33:53