<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>點選獲取經緯度以及地址
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
//通過點選百度地圖，可以獲取到對應的point, 由point的lng、lat屬性就可以獲取對應的經度緯度
console.log(e.point.lng + ", " + e.point.lat);
var pt = e.point;
geoc.getLocation(pt, function(rs){
//addressComponents物件可以獲取到詳細的地址資訊
var addComp = rs.addressComponents;
var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
//將對應的HTML元素設定值
$("#site").val(site);
$("#longitude").val(pt.lng);
$("#latitude").val(pt.lat);
});
});獲取兩點間距離，可以算出覆蓋區域，比如覆蓋區域10個座標和中心點算距離
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.centerAndZoom("重慶",12); //初始化地圖,設定城市和地圖級別。
var pointA = new BMap.Point(106.486654,29.490295); // 建立點座標A--大渡口區
var pointB = new BMap.Point(106.581515,29.615467); // 建立點座標B--江北區
alert('從大渡口區到江北區的距離是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //獲取兩點距離,保留小數點後兩位
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定義折線
map.addOverlay(polyline); //新增折線到地圖上
</script>3 座標轉換
我們知道，Google地圖、soso地圖與百度地圖的座標是不一樣的，通常會差挺遠一段距離。因此我們在微信中使用百度地圖導航等百度地圖API時，若 根據微信獲取的使用者位置資訊的話，得到的結果通常是不準確的。這時我們就需要把微信獲取的使用者位置座標轉換成百度地圖對應的座標才可以。百度地圖座標轉換API是一套以HTTP形式提供的座標轉換介面，用於將常用的非百度座標（目前支援GPS裝置獲取的座標、google地圖座標、soso地圖座標、amap地圖座標、mapbar地圖座標）轉換成百度地圖中使用的座標
圓形區域搜尋
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項 divid=allmap
var mPoint = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom(true); //開啟滾輪縮放
map.centerAndZoom(mPoint,15); //座標設定為地圖中心點，縮放級別15
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby('餐館',mPoint,1000);
</script>