百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。另外,2014年1月9日,极速版JavaScript API全新上线,此版本专门针对简单功能的移动端浏览器开发提供。
该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。
百度地图官网首页:http://lbsyun.baidu.com/
ak申请地址: http://lbsyun.baidu.com/apiconsole/key?application=key
api 文档下载:http://lbsyun.baidu.com/index.php?title=jspopular/js-download
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>百度地图</title>
<style>
body, html {
100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#container {
100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/map.js"></script>
</body>
</html>
<script>
function mapCallback() {
var map = new BMap.Map("container");
var point = new BMap.Point(108.92713066909194, 34.228349244048696);//设置坐标点
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
var icon = new BMap.Icon('img/loca.svg', new BMap.Size(50, 50), {//添加图标
anchor: new BMap.Size(20, 20)
});
var mkr = new BMap.Marker(new BMap.Point(108.92713066909194, 34.228349244048696), {//中心点
icon: icon
});
var opts = {
200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello", // 信息窗口标题
enableMessage: true,//设置允许信息窗发送短息
message: "这个消息为啥不会显示。。。"
};
var infoWindow = new BMap.InfoWindow("世界这么大,我想到处走走~", opts); // 创建信息窗口对象
map.addEventListener('touchstart', function (e) {//输出经纬度坐标
var newOne = new BMap.Point(e.point.lng + "," + e.point.lat);
console.log(newOne);
mkr.openInfoWindow(infoWindow, point); //开启信息窗口
});
// var local = new BMap.LocalSearch(map, {
// renderOptions:{
// map: map,
// autoViewport:true
// }
// });
// local.searchNearby("小吃","门前");
map.centerAndZoom(point, 17);
map.addOverlay(mkr);
}
function loadScript() {//map ver2.0
var script = document.createElement('script');
script.src = "http://api.map.baidu.com/api?v=2.0&ak=CvyXEc7z4BO6IYkTfHU4POsluYKkAFdV&callback=mapCallback";
document.body.appendChild(script);
}
window.onload = loadScript();
</script>
效果图: