jQuery:[2]百度地图开发平台实战
原文链接: http://blog.csdn.net/moniteryao/article/details/51078779
快速开始
开发平台地址
http://lbsyun.baidu.com/index.php?title=jspopular
示例Demo
<div style="min-height: 480px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var lat = '33.485931', longt = '118.23049', bcode='0';
var markerArr;
$(function () {
var url = "../Controls/SelectControl.aspx?action=getchecklist";
//$(".test").html(url);
$.ajax({
url: url,
dataType: 'json',
type: 'get',
async: false,
success: function (data) {
markerArr = data;
creatmap();
}
});
});
var pointarr = new Array();
var infoWindow = new Array();
var map;
function creatmap() { map = new BMap.Map("map");
//第1步:设置地图中心点
var point = new BMap.Point(longt, lat); //113.312463,23.146515 map.addOverlay(marker);
//第2步:初始化地图,设置中心点坐标和地图级别。
//设置可否拖拽
//marker.enableDragging();
map.centerAndZoom(point, 18);
//第3步:启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//第4步:向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//设置不相关图标不显示
map.setMapStyle({
styleJson:
[{
"featureType": "poi",
"elementType": "labels",
"stylers": {
"color": "#000000",
"visibility": "off"
}
}]
}); //circle.enableEditing();
//第5步:向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//第6步:向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//alert(markerArr.length);
//第7步:绘制点
for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].longt;
var p1 = markerArr[i].lat;
var checksum = markerArr[i].checksum;
var point = new BMap.Point(p0, p1); //118.230272,33.482474 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - 10 * 25)
}); var marker = new BMap.Marker(point, { icon: myIcon });//自定义图标
map.addOverlay(marker);
(function () {//重点在这里,闭包的作用体现出来了,不然,信息框一直指向最后一个坐标
var index = i;
var _iw = new BMap.InfoWindow('', { title: markerArr[i].name, width: 100,heigth:30 });
var _marker = marker;
_marker.addEventListener("click", function () {
this.openInfoWindow(_iw);
});
})()
}
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=2.0&callback=creatmap&ak=eewwwwwwwwwwRomLeeeeeelUq";
document.body.appendChild(load);
}
window.onload = map_load;
</script>