百度地图应用

最新推荐文章于 2019-09-26 00:05:05 发布

羽筠

最新推荐文章于 2019-09-26 00:05:05 发布

阅读量452

点赞数

分类专栏： HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/51555719

版权

HTML + CSS + JS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

百度地图应用：

包含地图API，加上自己的密钥：

密钥申请：

百度开发者中心

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

收藏

觉得还不错? 一键收藏
0
评论
百度地图应用

百度地图应用：包含地图API，加上自己的密钥：密钥申请：百度开发者中心http://developer.baidu.com/开发支持http://developer.baidu.com/platform/catalog/navigation-c/node/n301申请密钥、应用列表http://lbsyun.baidu.com/apiconsole/key
复制链接

扫一扫