关闭

百度地图应用

149人阅读 评论(0) 收藏 举报
分类:

百度地图应用:

包含地图API,加上自己的密钥:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

密钥申请:

百度开发者中心

http://developer.baidu.com/

开发支持
http://developer.baidu.com/platform/catalog/navigation-c/node/n301

申请密钥、应用列表
http://lbsyun.baidu.com/apiconsole/key

类参考
http://developer.baidu.com/map/reference/

示例
http://developer.baidu.com/map/jsdemo.htm

百度地图拾取坐标系统即可
http://api.map.baidu.com/lbsapi/getpoint/index.html


实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图应用</title>
<style type="text/css">
#map{ width:100%; height:628px; overflow:hidden;}
#sh , #hf{ width:80px; height:30px; line-height:30px; color:#fff; text-align:center; background-color:green; position:absolute; left:50px; cursor:pointer;}
#sh{ top:50px;}
#hf{ top:100px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uBRP2scx44D4rREj4ToGMPafZc97bVsQ"></script>
</head>

<body>
<!--地图-->
<div id="map"></div>
<div id="sh">上海</div>
<div id="hf">合肥</div>

<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
// 百度地图API功能
var map = new BMap.Map("map");  // 创建Map实例
//上海
var point_sh = new BMap.Point(121.480511,31.235957);
var marker_sh = new BMap.Marker(point_sh);  // 创建标注
map.addOverlay(marker_sh);              // 将标注添加到地图中
//合肥
var point_hf = new BMap.Point(117.233592,31.826709);
var marker_hf = new BMap.Marker(point_hf);  // 创建标注
map.addOverlay(marker_hf);              // 将标注添加到地图中

map.centerAndZoom(point_sh, 15);   // 初始化地图,用城市名设置地图中心点
map.disableScrollWheelZoom(true); //禁用滚轮放大缩小。 
$("map").onclick = function(){
	map.enableScrollWheelZoom(true); //启用滚轮放大缩小。 
};
//切换至上海
$("sh").onclick = function(){
	map.panTo(point_sh);
};
//切换至合肥
$("hf").onclick = function(){
	map.panTo(point_hf);
};

var infoWindow_hf = new BMap.InfoWindow("地址:合肥市政府", {width:200,height:100,title:"合肥市政府"});  // 创建信息窗口对象 
marker_hf.addEventListener("click", function(){  
	map.openInfoWindow(infoWindow_hf,point_hf); //开启信息窗口
});
var infoWindow_sh = new BMap.InfoWindow("地址:上海市政府", {width:200,height:100,title:"上海市政府"});  // 创建信息窗口对象 
marker_sh.addEventListener("click", function(){  
	map.openInfoWindow(infoWindow_sh,point_sh); //开启信息窗口
});
</script>
</body>
</html>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:111170次
    • 积分:1756
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:6篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论