利用百度地图实现搜索定位功能
生活随笔
收集整理的這篇文章主要介紹了
利用百度地图实现搜索定位功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索定位</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#map {
800px;
height: 800px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申請的ak碼"></script>
</head>
<body>
<div id="map">
</div>
<input type="text" id="address">
<button id="btn">搜索</button>
</body>
</html>
2.js部分
代碼都有注釋,就不多說了
// 百度地圖API功能
var map = new BMap.Map("map");
map.centerAndZoom("杭州", 11);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默認縮放平移控件
// 標尺控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
//定位
function setPlace(value) {
var local, point, marker = null;
local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: fn
});
local.search(value);
function fn() {
//如果搜索的有結果
if(local.getResults() != undefined) {
map.clearOverlays(); //清除地圖上所有覆蓋物
if(local.getResults().getPoi(0)) {
point = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
map.centerAndZoom(point, 18);
marker = new BMap.Marker(point); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
marker.enableDragging(); // 可拖拽
alert("當前定位經度:"+point.lng+"緯度:"+point.lat);
} else {
alert("未匹配到地點!可拖動地圖上的紅色圖標到精確位置");
}
} else {
alert("未找到搜索結果")
}
}
}
// 按鈕事件
$("#btn").click(function(){
setPlace($("#address").val());
});
3.效果
總結
以上是生活随笔為你收集整理的利用百度地图实现搜索定位功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python没有菜单栏怎么搞mac_Ma
- 下一篇： 卷轴画制作教程