百度地图应用:
包含地图API,加上自己的密钥:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
密钥申请:
百度开发者中心
开发支持
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>