1.先注册百度账号
2.登录百度地图开放平台 点击跳转登录
3.申请秘钥 地址
引入地图js文件时最后的 ak即自己申请秘钥,记得更换
<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: 300px;
width: 50%;
float: left;
}
ul {
float: left;
}
ul li {
height: 40px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iwfYuKQm6uTZzuFUneI7KMKhlT6IF6mi"></script>
<title>坐标定位</title>
</head>
<body>
<div id="allmap"></div>
<ul id="list">
<li data-longitude="116.403963" data-latitude="39.915119">天安门</li>
<li data-longitude="116.314688" data-latitude="39.984729">创富大厦</li>
</ul>
</body>
</html>
<script type="text/javascript">
// 用经纬度设置地图中心点
var list = document.getElementById('list'),
map = new BMap.Map("allmap"),
showMark;
// 百度地图API功能
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);
map.enableScrollWheelZoom(true);
showMark = function(e){
e = e || window.event;
e = e.target || e.srcElement;
while(e.tagName.toLowerCase() !== 'li'){
e = e.parentNode;
}
var longitude = e.getAttribute('data-longitude'),
latitude = e.getAttribute('data-latitude');
map.clearOverlays();
map.centerAndZoom(new BMap.Point(longitude,latitude),18);
var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
}
if (window.addEventListener) {
list.addEventListener('click', showMark, false);
} else {
list.attachEvent('onclick', showMark);
}
</script>
