百度地图之HTML
参考API网址
-- Web开发 JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopularGL
/*
* 使用本页面,请先申请AK,完善基础src信息
* 主JAVA后台开发,前端语法问题请自行优化^_^,留言提示
* 个人建议,新手先看开发指南,配好环境,然后去示例demo直接找相似功能拿代码,调试过程去看参考类
*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图之HTML引用</title>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=&s=1"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</head>
<body>
<div id="bMap" class="mapClass">
</div>
<script>
$(function () {
readMapStyle();
});
function readMapStyle(){
$.ajax({
url: 'js/bdInitStyle.json',
dataType: 'JSON',
type: 'GET',
success: function (list) {
var styleJson = list;
initBMap(styleJson);
},
error: function () {
console.log("读取地图样式json文件失败!");
initBMap();
}
});
}
function initBMap(styleJson){
createMap(styleJson) ;
setMapEvent();
addMapControl();
}
function createMap(styleJson){
var map = new BMap.Map("bMap",
{
minZoom:5,
enableMapClick:false
});
var point = new BMap.Point(105.994848, 36.354387);
map.centerAndZoom(point,5);
if(styleJson){
map.setMapStyleV2({styleJson:styleJson});
}
window.map = map;
map.addEventListener('dragend', function(e) {
});
map.addEventListener("tilesloaded",function(){
console.log("地图加载完毕");
});
map.addEventListener('zoomend', function(e) {
});
}
function setMapEvent(){
map.enableDragging();
map.enableScrollWheelZoom();
map.enableDoubleClickZoom();
map.enableKeyboard();
map.enableInertialDragging();
map.enableContinuousZoom();
}
function addMapControl(){
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
var size = new BMap.Size(10, 20);
var ctrl_cti = new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
});
map.addControl(ctrl_cti);
}
</script>
<style>
.mapClass{
height:750px;
width:77%;
float:left;
}
</style>
</body>
</html>