您的位置：首页 > 编程语言

百度地图最简单的完成接口,和实例代码

2015-11-09 08:37 344 查看

1,申请开发者密钥,

2,根据名称获取对应坐标

3,根据坐标解析地图,加载地图

//根据名称获取对应坐标,需要编码

http://api.map.baidu.com/geocoder/v2/?address=%E5%8C%97%E4%BA%AC%E5%B8%82%E7%A7%91%E5%A4%A7%E5%A4%A9%E5%B7%A5%E5%A4%A7%E5%8E%A6&output=xml&ak=密钥&callback=showLocation

0

39.993816918846

116.36215116538

1

80

商务大厦

//根据坐标解析地图多个目标

http://api.map.baidu.com/geocoder/v2/?ak=密钥&callback=renderReverse&location=39.993816918846,116.36215116538&output=xml&pois=1

This XML file does not appear to have any style information associated with it. The document tree is shown below.

0

39.993816978544

116.36215117796

北京市海淀区北四环中路261号

学院路,五道口,北航

北四环中路

海淀区

北京市

北京市

中国

北

77

131

学院路30号北京科技大学

0

北京科技大学-金物楼

房地产

116.36232760516

39.994466060373

内

0

学院路30北京科技大学

96

北京科技大学-腐蚀楼

教育培训

116.36273184264

39.994314051135

西南

96

北京市海定区学院路30号

68

天工大厦

房地产

116.36154607936

39.993906388312

东

68

北京市海淀区学院路30号

0

天工大厦A座

房地产

116.36214794406

39.99381656397

附近

0

北京市海淀区学院路30号

89

科大天工大厦B座

房地产

116.36152811325

39.994203498747

东南

89

北京市海淀区

96

北京科技大学-环境断裂教育部重点实验室

教育培训

116.36273184264

39.994314051135

西南

96

北京市海淀区

96

北京科技大学-新材料技术研究院

教育培训

116.36273184264

39.994314051135

西南

96

学院路30号科大天工大厦A座1楼

0

鸿道茶社

美食

116.36214794406

39.99381656397

附近

0

北京市海淀区学院路30号

70

广发银行(学院路支行)

金融

116.36184252018

39.993388169318

东北

70

北京市海淀区

96

中国腐蚀与防护学会

政府机构

116.36273184264

39.994314051135

西南

96

内

北京科技大学

北京科技大学内,天工大厦东68米

如只想简单看到所指位置显示可以利用一下代码

<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>百度地图</title>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</head>
<body>

//最为地点显示只需要传入地址即可模糊匹配地图
<input type="hidden" id="cityName" value="北京市"/>
<div id="container" style="width:100%;height:100%;">
</div>
<script type="text/javascript">
var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point(115.98627625765,40.452841511587);    //创建点坐标
map.centerAndZoom(point, 14);                //初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom();                //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl());    //添加控件：缩放地图的控件，默认在左上角；
map.addControl(new BMap.MapTypeControl());        //添加控件：地图类型控件，默认在右上方；
map.addControl(new BMap.ScaleControl());        //添加控件：地图显示比例的控件，默认在左下方；
map.addControl(new BMap.OverviewMapControl());  //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},renderOptions: {  //结果呈现设置，
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
// alert(html.innerHTML)
}//这一段可以不要，只不过是为学习更深层次应用而加入的。
});
function setCity(){    search.search(document.getElementById("cityName").value);  }  search.search(document.getElementById("cityName").value);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航