呼叫百度地圖顯示周圍方圓100米、500米、1000米附近的餐館賓館酒店及公交站點API介面
阿新 • • 發佈：2019-02-14
呼叫百度地圖顯示周圍方圓100米、500米、1000米附近的餐館、賓館及公交站點程式碼
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>資料介面</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
地址：<input type="text" name="address" id="address" value="上海市"/> <button id="mapsearch" onClick="searchAddress()">搜尋</button>
<div style="width:600px;height:400px;border:1px solid gray" id="container"></div>
<div id="results" style="font-size:13px;margin-top:10px;"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.addControl(new BMap.NavigationControl());//建立一個特定樣式的地圖平移縮放控制元件
map.enableScrollWheelZoom();
var lng=121.5;
var lat=31.3;
var point = new BMap.Point(lng,lat);
//在地圖首次自動載入的時候以lng=121.5，lat=31.3經緯度顯示該地附近的餐館。
allmap(point);
//當點選滑鼠左鍵的時候，獲得點選事件，獲得點選點經緯度，通過經緯度搜索方圓附近的餐館。
map.addEventListener("click", function(){
map.clearOverlays();//清除由於上次事件留下的痕跡。
var center = map.getCenter();//為得到地圖的中心點位，返回GLatLng型別的值.
lng=center.lng;
lat=center.lat;
point = new BMap.Point(lng,lat);
allmap(point);
});
function getSquareBounds(centerPoi,r){
var a = Math.sqrt(2) * r; //正方形邊長
mPoi = getMecator(centerPoi);
var x0 = mPoi.x, y0 = mPoi.y;
var x1 = x0 + a / 2 , y1 = y0 + a / 2;//東北點
var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南點
var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
return new BMap.Bounds(sw, ne);
}
//根據球面座標獲得平面座標。
function getMecator(poi){
return map.getMapType().getProjection().lngLatToPoint(poi);
}
//根據平面座標獲得球面座標。
function getPoi(mecator){
return map.getMapType().getProjection().pointToLngLat(mecator);
}
//根據經緯度這個點，搜尋方圓附近所有的餐館。
function allmap(point){
map.centerAndZoom(point,11);
var circle = new BMap.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"}});
var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
local.searchInBounds("餐館",bounds);//以圓形為範圍以餐館為關鍵字進行搜尋。
}
//獲得輸入框address的地址，通過地址解析，獲得該地址的經緯度。記住該地址只能為上海市地區的位置。
function searchAddress(){
var address = document.getElementByIdx_x_x_x("address").value;
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point){
if (point) {
map.addOverlay(new BMap.Marker(point));
map.clearOverlays();//清除由於上次事件留下的痕跡。
allmap(point);
} }, "上海市");
}
</script>