项目中用到了百度地图,整理一下常用的方便查阅:
一、资料
1.概述JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopular
2.demo
http://developer.baidu.com/map/jsdemo.htm
3.工具开源库(如鼠标点击后计算范围、聚合效果等)
http://developer.baidu.com/map/jsdemo.htm
二、常用的功能及实现
1、引入常用的资源包(引入http://api.map.baidu.com/api?v=2.0&ak=tzAcIFZ5xCoRwm63NcBGfoVB 时ak是自己申请的一个秘钥)
</pre><p></p><p><span style="background-color: rgb(240, 240, 240);"></span><pre name="code" class="javascript"> <!--jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--jquery-->
<!--百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tzAcIFZ5xCoRwm63NcBGfoVB"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<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" />
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></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.js"></script>
<!--聚合-->
<!--百度地图-->
2、初始化地图
$(function(){ /*所有js代码放入*/});
2.1. 创建地图对象设置中心点以及缩放的级别zoom
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
/*centerAndZoom(center:Point, zoom:Number) none 设初始化地图。
<span style="color:#ff0000;"> 如果center类型为Point时,zoom必须赋值,范围3-19级,</span>若调用高清底图(针对移动端开发)时,
zoom可赋值范围为3-18级。如果<span style="color:#ff0000;">center类型为字符串时,比如“北京”,zoom可以忽略</span>,地图将自动根据center适配最佳zoom级别。
*/
//map.centerAndZoom(new BMap.Point(113.195425, 39.657158), 10); //初始化地图,设置中心点坐标和地图级别
map.centerAndZoom("北京市");
});
2.2. 插入缩放定位等控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true,
showZoomInfo: true,
});
map.addControl(navigationControl);
2.3.开启滚轮缩放及禁用双击放大
map.enableScrollWheelZoom(); //开启鼠标滚轮缩放
map.disableDoubleClickZoom(true);//禁用双击放大。
//限制区域
var b = new BMap.Bounds(new BMap.Point(111.822527, 40.296748), new BMap.Point(114.566024,39.043834));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
}
2.5.添加行政区域(县、区级别)
function getBoundary() {
var bdary = new BMap.Boundary();
bdary.get("西安市雁塔区", function (rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
});
}
2.6结合后台获得制定区域并画出
ShowArea();
//读取已有区域
function ShowArea() {
$.post("Handler.ashx?action=getAreaData", "", function (data, status) {
//var data = eval(dataJSON);
var points = GetPointsArray(data);
var polygon1 = new BMap.Polygon(points, { strokeColor: "blue", fillColor: "#f0979f", strokeWeight: 2, strokeOpacity: 0.5, fillOpacity: 0.3 }); //创建多边形
map.addOverlay(polygon1); //增加多边形
});
}
function GetPointsArray(points) {
var pointsArray = points.split(";");
var result = new Array();
for (var i = 0; i < pointsArray.length; i++) {
result[i] = new BMap.Point(pointsArray[i].split(",")[0], pointsArray[i].split(",")[1]);
}
return result;
}
2.7.后台获得区域(点的集合)(使用ajax与一般处理程序)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication3
{
/// <summary>
/// Handler 的摘要说明
/// </summary>
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string action=context.Request["action"];
switch(action)
{
case "getAreaData":
GetAreaData(context);
break;
}
}
public void GetAreaData(HttpContext context)
{
string s = "108.860872, 34.258506;108.831975, 34.258587;108.827325, 34.254061;108.82198, 34.253861;108.821721, 34.242147;108.82502, 34.242241;108.825366, 34.235732;108.828081, 34.235904;108.828549, 34.225515;108.841104, 34.22704;108.836877, 34.210519;108.839338, 34.205291;108.852262, 34.206639;108.852829, 34.18584;108.875588, 34.185636;108.875624, 34.177398;108.980798, 34.177959;109.00823, 34.180186;109.022781, 34.185512;109.039102, 34.182088;109.060345, 34.191182;109.053019, 34.212803;109.056843, 34.243072;109.054189, 34.257263;109.033871, 34.257004;109.036981, 34.256214;109.037215, 34.240337;109.027373, 34.240809;109.027372, 34.243714;109.022632, 34.243735;109.02261, 34.248791;109.002924, 34.248887;108.971729, 34.236415;108.938526, 34.235527;108.897292, 34.253332;108.89572, 34.257881;108.860872, 34.258506";
context.Response.Write(s);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
2.8. 点聚合及批量弹出窗口
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
map.enableScrollWheelZoom();
var MAX = 10;
var markers = [];
var pt = null;
var i = 0;
for (; i < MAX; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
var marker = new BMap.Marker(pt);
markers.push(marker);
var content1 = '<div style="margin:0;line-height:20px;padding:2px;">内容</div>';
markers.push(marker);
<span style="color:#ff0000;"> //使用闭包 这样内容才能显示的不同,否则全部都会只显示最后一个content1的内容</span>
(function (content1) {
marker.addEventListener("click", function (e) {
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content1, {
title: '信息<a target="_top" οnclick="alert(1)" style="margin-left:5px;font-size:12px;line-height:30px;color:#3d6dcc;font-weight:normal;text-decoration:none;cursor:pointer;">详情»</a>', //标题
width: 250, //宽度
height: 200, //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
enableSendToPhone: false,//百度发送短信图标
searchTypes: [
//BMAPLIB_TAB_SEARCH, //周边检索
//BMAPLIB_TAB_TO_HERE, //到这里去
//BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
searchInfoWindow.open(e.target);
});
})(content1)
}
//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });