调用百度api

白色翅膀的鱼

于 2014-09-15 14:42:48 发布

阅读量392

点赞数 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html { width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap { width: 100%;height: 100%;overflow: hidden;margin-top: 50;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>地址解析</title>
</head>
<body>
<div align="center" padding_top="10">
<div ><p id="lng">    经度:</p></div>
<div id = "lat">        纬度:</div>


<button style="width:200px;height:30px" name="confirm" οnclick="oncfrimlocation();">确定</button>
</div>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//从php文件里获取地址
var address = "温州市文一路33号";
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
var marker ;
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl());              //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_TOP_RIGHT}));   //右上角，打开
map.addControl(new BMap.ScaleControl());                    // 添加默认比例尺控件
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));                    // 左下
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));                    // 左上
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(address, function(point){
  if (point) {
    map.centerAndZoom(point, 16);
    marker = new BMap.Marker(point);
    marker.enableDragging();    //可拖拽
    map.addOverlay(marker);
 document.getElementById("lng").innerHTML = "经度:"+point.lng;
 document.getElementById("lat").innerHTML="纬度:"+point.lat;
  }
}, "温州市");
function showInfo(e){
 document.getElementById("lng").innerHTML = "经度:"+e.point.lng;
 document.getElementById("lat").innerHTML="纬度:"+e.point.lat;
 marker.setPosition(e.point);
}
map.addEventListener("click", showInfo);
function oncfrimlocation(){
    var p = marker.getPosition();       //获取marker的位置
    alert("marker的位置是" + p.lng + "," + p.lat);    
    //在这里把值回传给php
}
</script>