百度地图API - 码农教程

地图API

其实没必要解释太多了，就是地图，只不过是静态那种，因为没有GPS的支持，所以你懂的，为啥用百度，因为它文档的字我能看懂，那为啥不用谷歌，那肯定是因为谷歌上面都是英文，我看不懂而且注册个啥还要外网贼卡！

使用

我还是喜欢用简短的话来表达，使用百度地图API，需要有百度账号，然后进到这个百度地图官网，登录上去。

这我只用到了Javascript API，因为别的我也不会...
然后你看API，它应该会让你去认证一下子，认证好了就就到控制台创建一个应用。

在白名单里，打个*号就行。

创建好了之后可以参考。
开放平台

这里生成的API KEY需要添加到你的DEMO当中，I believe you make sense。

成品

指定地点显示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=VdlHAppjcIXtyeSX75HqYSphoGuoGjcY"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(117.35, 32.95), 11);  // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
	mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
    ]}));	  
map.setCurrentCity("蚌埠");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

IP定位显示

这里我加了一个搜索可以根据自己需求
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height: 500px;width:100%;overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
dt{
	font-size:14px;
	font-family:"微软雅黑";
	font-weight:bold;
	border-bottom:1px dotted #000;
	padding:5px 0 5px 5px;
	margin:5px 0;
}
dd{
	padding:5px 0 0 5px;
}
li{
	line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VdlHAppjcIXtyeSX75HqYSphoGuoGjcY"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>带检索功能的信息窗口</title>
</head>
<body>
<div id="allmap">	
</div>
<div id="result">
	<input type="button" value="默认样式" onclick="openInfoWindow2()"/>

</div>

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

function myFun(result){
	var cityName = result.name;
	map.setCenter(cityName);
	alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
</script>

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(116.307852,40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();

var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
              '</div>';

//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
		title  : "百度大厦",      //标题
		width  : 290,             //宽度
		height : 150,              //高度
		panel  : "panel",         //检索结果面板
		enableAutoPan : true,     //自动平移
		searchTypes   :[
			BMAPLIB_TAB_SEARCH,   //周边检索
			BMAPLIB_TAB_TO_HERE,  //到这里去
			BMAPLIB_TAB_FROM_HERE //从这里出发
		]
	});
var marker = new BMap.Marker(poi); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
    searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
//样式1
var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息检索", {
	title: "搜索框", //标题
	panel : "panel", //检索结果面板
	enableAutoPan : true, //自动平移
	searchTypes :[
		BMAPLIB_TAB_SEARCH   //周边检索
	]
});
function openInfoWindow2() {
	searchInfoWindow2.open(new BMap.Point(117.35707987,32.92949891));
}

	
</script>

</body>

</html>

效果图

原文地址：https://www.cnblogs.com/effortfordream/p/13301163.html