最近使用百度地图的一点心得
百度地图,地址转化为经纬度,在地图上添加多个标注2016-10-28
最近在项目中用到百度地图,由于以前没有接触过,所以刚开始感觉无从下手;百度地图JavaScript API是用JavaScript编写的程序接口,废话不多说了看例子.(这是我第一次写博客,欢迎大家指教)
HTML页面代码:
<div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50px;
border: 1px solid gray;
overflow:hidden;">
</div>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})); //右下角，打开由于项目需求我要页面获取到小区的名称转化为经纬度并且在该位置加上标注;下面就是从页面获取位置并且转化为经纬度的过程
HTML页面代码:
<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代码:
var pointArray = [];//创建数组接收转化后的多个坐标值
var keyword = [];//从页面获取到的需要转化的地址
var keywordVal;
$(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
keywordVal = $(".a").eq(i).val();
keyword.push(keywordVal);
searchByStationName();
});
<span style="white-space:pre"> </span>/* console.info(keyword); */
<span style="white-space:pre"> </span>var markerArray = [];
<span style="white-space:pre"> </span>function searchByStationName(keywordVal) {
<span style="white-space:pre"> </span>map.clearOverlays();// 清空原来的标注
<span style="white-space:pre"> </span>localSearch.search(keywordVal);
<span style="white-space:pre"> </span>localSearch.setSearchCompleteCallback(function(searchResult) {
<span style="white-space:pre"> </span>var poi = searchResult.getPoi(0);
<span style="white-space:pre"> </span>map.centerAndZoom("郑州", 13);
<span style="white-space:pre"> </span>var longitude = poi.point.lng;// 经度
<span style="white-space:pre"> </span>var latitude = poi.point.lat;// 纬度
<span style="white-space:pre"> </span>var pointVal = new BMap.Point(longitude, latitude);
<span style="white-space:pre"> </span>pointArray.push(pointVal);
<span style="white-space:pre"> </span>var marker = new BMap.Marker(pointVal);
<span style="white-space:pre"> </span>markerArray.push(marker);
<span style="white-space:pre"> </span>// 创建标注，为要查询的地方对应的经纬度
<span style="white-space:pre"> </span>map.addOverlay(marker);
<span style="white-space:pre"> </span>var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"//在页面上展示出当前位置信息
<span style="white-space:pre"> </span>+ searchResult.keyword + "</p>");
<span style="white-space:pre"> </span>marker.addEventListener("click", function() {
<span style="white-space:pre"> </span>this.openInfoWindow(infoWindow);
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>}下面贴上全部代码:
<!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})); //右下角，打开
<pre name="code" class="javascript">var pointArray = [];//创建数组接收转化后的多个坐标值
var keyword = [];//从页面获取到的需要转化的地址
var keywordVal;
$(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong
keywordVal = $(".a").eq(i).val();
keyword.push(keywordVal);
searchByStationName();
});
<span> </span>/* console.info(keyword); */
<span> </span>var markerArray = [];
<span> </span>function searchByStationName(keywordVal) {
<span> </span>map.clearOverlays();// 清空原来的标注
<span> </span>localSearch.search(keywordVal);
<span> </span>localSearch.setSearchCompleteCallback(function(searchResult) {
<span> </span>var poi = searchResult.getPoi(0);
<span> </span>map.centerAndZoom("郑州", 13);
<span> </span>var longitude = poi.point.lng;// 经度
<span> </span>var latitude = poi.point.lat;// 纬度
<span> </span>var pointVal = new BMap.Point(longitude, latitude);
<span> </span>pointArray.push(pointVal);
<span> </span>var marker = new BMap.Marker(pointVal);
<span> </span>markerArray.push(marker);
<span> </span>// 创建标注，为要查询的地方对应的经纬度
<span> </span>map.addOverlay(marker);
<span> </span>var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"//在页面上展示出当前位置信息
<span> </span>+ searchResult.keyword + "</p>");
<span> </span>marker.addEventListener("click", function() {
<span> </span>this.openInfoWindow(infoWindow);
<span> </span>});
<span> </span>marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
<span> </span>});
<span> </span>} console.info(pointArray);</script></html>
第一次写欢迎大家来吐槽指正