百度地图获取地址转换为经纬度

最近在项目中用到百度地图,由于以前没有接触过,所以刚开始感觉无从下手;百度地图JavaScript API是用JavaScript编写的程序接口,废话不多说了看例子.(这是我第一次写博客,欢迎大家指教)

HTML页面代码:

[html] view plain copy

<div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50px;
border: 1px solid gray;
overflow:hidden;">
</div>

JavaScript代码:

[javascript] view plain copy

//创建百度地图容器
ar map = new BMap.Map("container");
//初始化地图,设置中心点坐标和地图级别。
var point = new BMap.Point(113.48722, 23.187232);
map.centerAndZoom(point, 13);

[javascript] view plain copy

var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开

由于项目需求我要页面获取到小区的名称转化为经纬度并且在该位置加上标注;下面就是从页面获取位置并且转化为经纬度的过程

HTML页面代码:

[html] view plain copy

<div style="width:730px;margin:auto;">
<input class="a" type="hidden" value="金水区"/>
<input class="a" type="hidden" value="二七区"/>
<input class="a" type="hidden" value="管城区"/>
<input class="a" type="hidden" value="经开区"/>
<input class="a" type="hidden" value="金水区"/>
<input class="a" type="hidden" value="高新区"/>
<input class="a" type="hidden" value="惠济区"/>
<input class="a" type="hidden" value="郑东新区"/>
<div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50px;
border: 1px solid gray;
overflow:hidden;">
</div>

JavaScript代码:

[javascript] view plain copy

var pointArray = [];//创建数组接收转化后的多个坐标值
var keyword = [];//从页面获取到的需要转化的地址
var keywordVal;
$(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
keywordVal = $(".a").eq(i).val();
keyword.push(keywordVal);
searchByStationName();
});
var markerArray = [];
function searchByStationName(keywordVal) {
map.clearOverlays();// 清空原来的标注
localSearch.search(keywordVal);
localSearch.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
map.centerAndZoom("郑州", 13);
var longitude = poi.point.lng;// 经度
var latitude = poi.point.lat;// 纬度
var pointVal = new BMap.Point(longitude, latitude);
pointArray.push(pointVal);
var marker = new BMap.Marker(pointVal);
markerArray.push(marker);
// 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
//在页面上展示出当前位置信息
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+ searchResult.keyword + "</p>");
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
});
}

下面贴上全部代码:

[html] view plain copy

<!doctype html>
<html lang="en">
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
<style>
a.{
margin-right:100px;
}
</style>
</head>
<body style="background:#CBE1FF">
<div style="width:730px;margin:auto;">
<input class="a" type="hidden" value="金水区"/>
<input class="a" type="hidden" value="二七区"/>
<input class="a" type="hidden" value="管城区"/>
<input class="a" type="hidden" value="经开区"/>
<input class="a" type="hidden" value="金水区"/>
<input class="a" type="hidden" value="高新区"/>
<input class="a" type="hidden" value="惠济区"/>
<input class="a" type="hidden" value="郑东新区"/>
<div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50px;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(113.48722, 23.187232);
map.centerAndZoom(point, 13);
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开
var pointArray = [];//创建数组接收转化后的多个坐标值
var keyword = [];//从页面获取到的需要转化的地址
var keywordVal;
$(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
keywordVal = $(".a").eq(i).val();
keyword.push(keywordVal);
searchByStationName();
});
* console.info(keyword); */
var markerArray = [];
function searchByStationName(keywordVal) {
map.clearOverlays();// 清空原来的标注
localSearch.search(keywordVal);
localSearch.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
map.centerAndZoom("郑州", 13);
var longitude = poi.point.lng;// 经度
var latitude = poi.point.lat;// 纬度
var pointVal = new BMap.Point(longitude, latitude);
pointArray.push(pointVal);
var marker = new BMap.Marker(pointVal);
markerArray.push(marker);
// 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
//在页面上展示出当前位置信息
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+ searchResult.keyword + "</p>");
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
});
}
console.info(pointArray);</script></html>

第一次写欢迎大家来吐槽指正

百度地图 获取地址转换为经纬度

猜你喜欢

百度地图获取地址转换为经纬度