百度地图例子(通过景区坐标在百度地图上显示景区信息)

今天看到了百度地图上可以标识景区的功能,特做了个demo,秀一下哈....要得到某个景区,如深圳市世界之窗,那得先得到他的经纬度,

点击红点后出现 

百度地图例子(通过景区坐标在百度地图上显示景区信息)


http://api.map.baidu.com/geocoder?address=深圳市世界之窗&output=json&key=37492c0ee6f924cb5e934fa08c6b1676

 从中可得到

{status: '字符串状态常量', 取值如下:

 //OK 成功

 INVILID_KEY 非法密钥 

 INVALID_PARAMETERS 非法参数,参数错误时候给出。

 result: {    

 location: {

 lat: 纬度:数值,

 lng: 经度:数值

 },

 precise:位置的附加信息,是否精确查找1为精确查找,0为不精确查找),

 confidence: 可信度,

 level:'级别'

 },

 }


参数说明:

output

json

jsonxml

输出格式为json或者xml

address

北京市海淀区上地十街10

根据指定地址进行坐标的反定向解析

location

38.76623,116.43213
lat<纬度>,lng<经度>

根据指定坐标来进行地址的解析

city

北京市

广州市

地址所在的城市名

key

8cb976834235d8cbcde2dce4835ae191

用户申请注册的key

返回结果(地址解析的结果)

 在网页中的使用:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#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 id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>世界之窗</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='世界之窗'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>亲,这就是世界之窗...</p>" +
"</div>";
  var map = new BMap.Map("allmap");
  //这个是直接定位经纬度,
//var point = new BMap.Point(113.981325, 22.542315);

// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
var infoWindow = new BMap.InfoWindow(sContent);
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint( "深圳市世界之窗 " , function (point){
if (point) {
    var marker =  new BMap.Marker(point)
    map.centerAndZoom(point, 13 );
 map.addOverlay( marker);
 
 marker.addEventListener("mouseover", function(){         
    this.openInfoWindow(infoWindow);
 
 //图片加载完毕重绘infowindow
    document.getElementById('imgDemo').onload = function (){
     infoWindow.redraw();
    }

  });
  }
}, " 北京市 " );
</script>

Point方法里面的两个参数为世界之窗的经度和纬度

位子有点点偏离.......

     

   Demo参考http://developer.baidu.com/map/geocoding-api.htm

你可能感兴趣的:(百度地图api)