&&百度地图使用实例该实例实现的是把百度地图嵌入到你的网站，然后显示到某一个地方，使用很简单。可以通过直接创建地图，也可以自行修改。由编辑于 16:14:003个牛币请下载代码后再发表评论//map.html精精精精原精原原原原精最热搜索分享话题编程语言基础Web开发数据库开发客户端开发脚本工具游戏开发服务器软硬件开源组件类库相关分享精精原最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友查看: 10057|回复: 2
你可能用到的百度地图效果（附源码）
该用户从未签到
本帖最后由 yetaoaiueo 于
11:41 编辑
& &&&需要实现百度地图的一些展示效果，虽然最终效果做出来了，可是这中间也走了很多的弯路，希望有用到的可以直接拿来用，少走一些弯路。百度地图为开发者提供了一系列的接口，点百度接口去百度接口。本文主要用到了以下几个效果：
1、热力图显示
2、自定义图标的聚合显示
3、云麻点显示
& && &热力图显示
& && &百度地图热力图是通过设置热力图半径、颜色、透明度等参数直观展示数据分布情况，而我这段时间所做的，就是通过一段时间内的订单数量，再结合经纬度，在地图上显示热力分布图。百度地图官方的API给的示例很Easy，创建地图实例，初始化参数，生成点的数组，然后创建热力图对象，并将热力图对象添加到地图实例，设置数据源，这样这个热力图的效果就可以展示出来了。（当然申请AK和引入Js就不用说了），这部分源码比较简单，就不展示了，只需要看热力图API相信都是可以明白的。
& && &可是自己做的时候，效果却没这么容易出来。我在做的过程中，开始最大的一处疑问就是，其他代码部分代码都跟官方API示例一样，只是换了个数据源，热力图效果就是出不来。后来在试了无数遍之后，发现如果当前地图放大的级别过大，也就是有些点没有在当前地图可视区域内展示的话，热力图效果是不会出来的！当然了，关于这点没有百度地图官方的解释，也没有得到求证，只是我在开发过程中发现的一个解决方案。如果你也在做这部分，恰好遇到这个问题的话不妨试试。其次为了效果明显，最好是多添加几个点，这样效果会更好一些。以下是效果图：
[attachimg]24**[/attachimg]
& & &&自定义图标聚合显示
& && &说到这个聚合显示，哎，说多了都是泪啊。本来提出的需求只是需要将数据库中的店铺展示出来，然后点击的时候弹出详细信息的提示框。我一想，这还不简单？通过Handler从后台获取到数据，然后以Json的格式传给前台，然后来个for循环，依次添加到地图不就解决了？第一版我确实是这么干的。拿到数据之后再做foreach……以下是Js脚本。
function LoadMakers(data) {
& & var Maker = &[&;
& & $(data).each(function () {
& && &&&var sContent = &&div&&style='text-align:'&&h4 style='margin:0 0 5px 0;padding:0.2em 0'&& + this.pointerTitle + &&/h4&&;
& && &&&if (this.pointImg) {
& && && && &sContent = &&div&&style='text-align:'&&h4 style='margin:0 0 5px 0;padding:0.2em 0; width:300px'&& + this.pointerTitle + &&/h4&&;
& && && && &sContent += &&img style='float:margin:4width:104height:69px' id='imgDemo' src='& + this.pointImg + &'&&title='& + this.pointerTitle + &'/&&;
& && &&&}
& && &&&if (this.address) {
& && && && &if (this.pointImg) {
& && && && && & sContent += &&p style='margin:0;line-height:1.5;font-size:13width:200margin-left:110px'&& + this.address + &&/p&&;
& && && && &} else {
& && && && && & sContent += &&p style='margin:0;line-height:1.5;font-size:13width:200'&& + this.address + &&/p&&;
& && && && &}
& && &&&}
& && &&&if (this.pointerContent) {
& && && && &if (this.pointImg) {
& && && && && & sContent += &&p style='margin:0;line-height:1.5;font-size:13width:200margin-left:110px'&& + this.pointerContent + &&/p&&;
& && && && &} else {
& && && && && & sContent += &&p style='margin:0;line-height:1.5;font-size:13width:200'&& + this.pointerContent + &&/p&&;
& && && && && &
& && && && &}
& && &&&}
& && &&&sContent += &&/div&&;
& && &&&Maker += &{supId:&+this.spId+&,Longitude:& + this.markersLongitude + &,Dimension:& + this.markersDimension + &,Window: { LoadEvent:'click',Content:\&& + sContent + &\&},enableMassClear:true},&;
& & });
& & Maker += &]&;
& & return eval(Maker);
}复制代码
& && &我在本地添加了将近100个点的数据，测试没问题之后就提交到Svn了，然后跟项目经理说这个东东做完了。然后项目经理将数据切成正式数据，叫我给他演示一下。这一演示不要紧啊，脸全没了。正式数据库中有5000多条数据，而我取数据时后台做了过滤，只提取有经纬度的点，即使这样也有1500多条记录。没错，1500多条，这意味着浏览器客户端这边要循环1500多次来做这个操作！然后奇迹就发生了，页面就假死了！无论怎么刷新都没有效果了，即使等了很长时间地图加载出来了，只要稍微一放大或者移动地图页面就会直接挂掉。然后项目经理就一顿巴拉巴拉巴拉，这就是你给我的结果么？
& && &谁让我确实这个东东没做好呢？也没脸跟别人争辩，拿回来重新研究吧。于是在网上搜了一下，发现很多人也都遇到了这个问题，就是当点大于一定的数量之后，浏览器都会出现假死的情况。然后上百度论坛浏览了一下，确实有提到这个问题，当点的数量在150个以内时，这么做是没有问题的，但当点数量大于300个时，这么做就行不通了。百度给出了两种解决方案：
No2：数据抽希：比如有10个marker，选择其中6个做为显示点。
& && &这里对比了一下需求，Marker聚合是将所有的点聚合起来，显示一个总数，然后点击的时候再分开；而数据抽希字面的意思是从中选取一部分来展示。而我所接到的任务是展示所有点，显然数据抽希这里是用不上了，那就来聚合吧。这是第二版。
& && &首先简单介绍一下，百度聚合展示提供了开源的类库，只需要在页面中引用即可。以下是Js脚本代码：
var map = option.Map||new BMap.Map(&MapContent&);& && && & // 创建地图实例
& && && && && && && && && && &&&var point = new BMap.Point(116..921984);
& && && && && && && && && && &&&map.centerAndZoom(point, 10);& && && && & // 初始化地图，设置中心点坐标和地图级别
& && && && && && && && && && &&&map.enableScrollWheelZoom(); // 允许滚轮缩放
& && && && && && && && && && &&&map.enableKeyboard =
& && && && && && && && && && &&&map.addControl(new BMap.NavigationControl());
& && && && && && && && && && &&&map.addControl(new BMap.ScaleControl()); // 启用比例尺。& && && && &
& && && && && && && && && && &&&map.addControl(new BMap.MapTypeControl()); // 是否启用卫星地图等等。
& && && && && && && && && && &&&var markers = [];
& && && && && && && && && && &&&var pt = null, mypt =
& && && && && && && && && && &&&var i = 0;
& && && && && && && && && && &&&var infoW
& && && && && && && && && && &&&var myIcon = new BMap.Icon(&/Admin/Images/red.png&, new BMap.Size(28, 37), {
& && && && && && && && && && &&&});
& && && && && && && && && && &&&for (; i & MAX; i++) {
& && && && && && && && && && && && &pt = new BMap.Point(resultData.data[i].Longitude, resultData.data[i].Dimension);
& && && && && && && && && && && && &mypt = new BMap.Marker(pt);
& && && && && && && && && && && && &mypt.addEventListener(&click&, function (no) {
& && && && && && && && && && && && && & return function () {
& && && && && && && && && && && && && && &&&infoWindow = LoadMakerInfo(resultData.data[no]);
& && && && && && && && && && && && && && &&&this.openInfoWindow(infoWindow);
& && && && && && && && && && && && && && &&&//createInfoWin(resultData.data[no]).redraw();
& && && && && && && && && && && && && & };
& && && && && && && && && && && && &} (i));
& && && && && && && && && && && && &markers.push(mypt);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&////最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
& && && && && && && && && && &&&var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers.reverse(), isAverangeCenter: true,girdSize:100,maxZoom:15 });
[font=微软雅黑][size=3]
[/size][/font]
[align=center][font=微软雅黑][size=3]
12.jpg (438.03 KB, 下载次数: 220)
10:12 上传
[/size][/font][/align]
[align=center][font=微软雅黑][size=3]
[/size][/font][/align]
[align=left][font=微软雅黑][size=3]& && &与第一版相比，性能确实有了很大的改进，至少在本地加载个1500多条数据已经没问题了。可是通过聚合之后又引入了新的问题，就像上图中的绿色圆圈，有两个4，一个6，正常这些数据点击之后都会散开的，当一直点击的时候应该可以看到没有聚合的点。可是这里出现的问题是有些可以点开，有些居然点不开。开始我以为是数据的问题，以为相隔比较近的点是无法展开的，后来就对数据做了处理，如果有相同的数据则通过加减随机数，确保拿出来的数据没有相同的，可是这个问题还是没有解决。希望有了解的朋友可以告知一二。通过这样聚合，展示数据确实比第一版快很多，可是当在公网上的时候，页面缩放或者移动的时候还是会卡。所以还得重新找解决方案。[/size][/font]
[font=微软雅黑][size=3]
[/size][/font]
[font=微软雅黑][size=3]& &&&这里值得一提的就是百度地图我们可以看到那种鼠标在左边搜索列表滑动，右边地图中搜到的结果跟着变化的那种效果，这里我们也是可以做的。监测左边列表的MoueEnter事件，然后根据当前Enter的点的经纬度创建一个点，然后Foreach右边搜索结果中的点，如果通过point的equals方法，判断是否是同一个点，如果是则改变当前的Icon即可。Js脚本：[/size][/font]
[font=微软雅黑][size=3]
[/size][/font]
[code]function ReDrawMap(data) {
& && && && &if (data.markersLongitude && data.markersDimension) {
var tmpInfo = LoadMakerInfo(data);
& && && && && & var point = new BMap.Point(data.markersLongitude, data.markersDimension); // 创建点坐标
& && && && && & var mkrs = option.Map.getOverlays();
& && && && && &
& && && && && & for (var i = 0; i & mkrs. i++) {
& && && && && && &&&position = mkrs[i].
& && && && && && &&&if (position&&position.equals(point)) {
& && && && && && && && &mkrs[i].openInfoWindow(tmpInfo);
& && && && && && &&&}
& && && && && & }
& && && && &}
& && &&&}复制代码
& && &云麻点效果展示
& && &最初没有用这个云麻点展示效果是因为一些敏感数据，可是后来发现没有其他合适的解决方案的时候，就采用了这个方案。云麻点效果也就是LBS云存储，用户将数据存放在百度的云服务器，然后直接从百度云获取数据。这个流程是：先在LBS开放平台创建数据表，然后添加需要的字段，然后就可以在后台批量上传数据。数据上传至百度服务器后，会生产相应的云麻点图层，这些图层在加载的时候直接被展示出来，这样可以很大程度上提高性能。现在假设后台数据已经准备完毕了，前台所作的操作：
& && &首先，初始化地图的数据：
var map = new BMap.Map(&MapContent&); //初始化数据
& && && && && & map.enableScrollWheelZoom();& && && && && && && && && & // 启用滚轮放大缩小 map.enableContinuousZoom();& && && && && && && && && &&&// 启用地图惯性拖拽，默认禁用 map.enableInertialDragging();& && && && && && && && && &// 启用连续缩放效果，默认禁用。 map.addControl(new BMap.NavigationControl());& && && &&&// 添加平移缩放控件
& && && && && & map.addControl(new BMap.ScaleControl());& && && && && & // 添加比例尺控件
& && && && && & map.addControl(new BMap.OverviewMapControl());& && && & // 添加缩略地图控件
& && && && && & map.addControl(new BMap.MapTypeControl());& && && && &&&// 添加地图类型控件
& && && && && & map.centerAndZoom(new BMap.Point(116..921984), 5); // 初始化地图,设置中心点坐标和地图级别
& && && && && & map.addControl(new BMap.NavigationControl()); // 启用鱼骨头。
[/size][/font]
[font=微软雅黑][size=3]& && &[b]然后，设置筛选的条件：[/b][/size][/font]
[font=微软雅黑][size=3]
[/size][/font]
[code]//检索模块相关代码
& && && && && & var keyword = &&,& &//检索关键词
& && && && && && && && &page = 0,& & //当前页码
& && && && && && && && &points = [],& &//存储检索出来的结果的坐标数组
& && && && && && && && &customLayer = //麻点图层
& && && && && & customLayer = new BMap.CustomLayer({
& && && && && && &&&geotableId: 00000,//后台生成表的Id
& && && && && && &&&q: '', //检索关键字
& && && && && && &&&tags: '', //空格分隔的多字符串
& && && && && & }); //新建麻点图图层对象
& && && && && & map.addTileLayer(customLayer); //将麻点图添加到地图当中
& && && && && & customLayer.addEventListener('hotspotclick', hotspotclickCallback); //给麻点图添加点击麻点回调函数
& && && && && & /**
& && && && && & * 麻点图点击麻点的回调函数
& && && && && & * @param 麻点图点击事件返回的单条数据
& && && && && & */
& && && && && & function hotspotclickCallback(e) {
& && && && && & }
& && && && && && &&&var customPoi = e.customPoi,
& && && && &str = [];
& && && && && && &&&str.push(&address = & + customPoi.address);
& && && && && && &&&str.push(&phoneNumber = & + customPoi.phoneNumber);
& && && && && && &&&//创建检索信息窗口对象
& && && && && && &&&var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
& && && && && && && && &width: 290,& && && && &&&//宽度
& && && && && && && && &height: 40,& && && && &&&//高度
& && && && && && && && &enableAutoPan: true,& & //自动平移
& && && && && && && && &enableSendToPhone: true, //是否显示发送到手机按钮
& && && && && && && && &searchTypes: [
& && && && && & BMAPLIB_TAB_SEARCH,& &//周边检索
& && && && && & BMAPLIB_TAB_TO_HERE,&&//到这里去
& && && && && & BMAPLIB_TAB_FROM_HERE //从这里出发
& && && && &]
& && && && && && &&&});
& && && && && && &&&searchInfoWindow.open(point); //打开信息窗口
& && && && && & }复制代码
& && & 之后就是最关键的一步，请求数据：
& && && && && && &&&'q': '', //检索关键字
& && && && && && &&&'page_index': page,&&//页码
& && && && && && &&&// 'filter': filter.join('|'),&&//过滤条件
& && && && && && &&&'region': '131',&&//北京的城市id
& && && && && && &&&'scope': '2',&&//显示详细信息
& && && && && && &&&'geotable_id': 00000,
& && && && && && &&&'page_size': 12,
& && && && && && &&&'ak': '****'&&//用户ak
& && && && && & }, function (e) {
& && && && && && &&&renderMap(e, page + 1);
& && && && && & });[/code]
& && & 完了之后再调整一下样式，结果如图：
13.png (535.52 KB, 下载次数: 235)
10:13 上传
& &&&通过LBS云存储，可以很好的解决海量数据加载缓慢的问题，但是这样做的缺点就是一方面数据必须上传到百度的云服务器，另一方面数据维护还是比较麻烦的，必须得通过接口来操作。以上是最近做百度接口总结的一些问题，希望对您能有所帮助。
(711.96 KB, 下载次数: 41)
10:10 上传
TA的每日心情开心 21:32签到天数: 1 天[LV.1]初来乍到
本帖最后由 yetaoaiueo 于
11:41 编辑
厉害！能不能分享下源码啊？
该用户从未签到
本帖最后由 yetaoaiueo 于
11:41 编辑
今天才知道有这个东西，之前都不知道啊。
Powered byC# asp.net 求使用百度地图API的DEMO，可以获取锚点位置的信息并存入数据库，反之亦然，从数据库读取信息并在
我来回答：
登录后才能回答(&)
&%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo16.aspx.cs" Inherits="BaiDuMap.Demo16" %&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" /&
&meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" /&
&title&百度地图API自定义地图&/title&
&!--引用百度地图API--&
&style type="text/css"&
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14font-weight:overflow:padding-right:13white-space:nowrap}
.iw_poi_content {font:12px arial,sans-overflow:padding-top:4white-space:-moz-pre-word-wrap:break-word}
&script type="text/javascript" src="http://api./api?key=59db47a1ff044e&v=1.1&services=true"&&/script&
&script src="jquery-1.3.2.min.js" type="text/javascript"&&/script&
&input id="text1" type="text" value="张虔" /&
&input id="text2" type="text" value="茂兴路" /&
&input id="btn" type="button" value="查询" /&
&!--百度地图容器--&
&div style="width:697height:550border:#ccc solid 1" id="dituContent"&&/div&
&script type="text/javascript"&
//创建和初始化地图函数：
function initMap() {
createMap(); //创建地图
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
addRemark(); //向地图中添加文字标注
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
var point = new BMap.Point(121..249162); //定义一个中心点坐标
map.centerAndZoom(point, 12); //设定地图的中心点和坐标并将地图显示在地图容器中
window.map = //将map变量存储在全局
var transit = new BMap.WalkingRoute(map, {
renderOptions: { map: map }
window.transit =
//地图事件设置函数：
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
//地图控件添加函数：
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 lbPoints = [{ point: "121..294595", content: "张虔" }
//向地图中添加文字标注函数
function addRemark() {
for (var i = 0; i & lbPoints. i++) {
var json = lbPoints[i];
var p1 = json.point.split("|")[0];
var p2 = json.point.split("|")[1];
var label = new BMap.Label("&div style='padding:2'&" + json.content + "&/div&", { point: new BMap.Point(p1, p2), offset: new BMap.Size(3, -6) });
map.addOverlay(label);
label.setStyle({ borderColor: "#999" });
initMap(); //创建和初始化地图
$(document).ready(function() {
$("#btn").click(function() {
var Geoc = new BMap.Geocoder()
Geoc.getPoint($("#text2").val(), function(point) {
transit.enableAutoViewport();
transit.search({ point: new BMap.Point(121..294595) }, { point: point });
}, "上海市");
将上面的页面复制下来，保存为.html文件，然后运行该静态页面将会显示一张任何功能都没有，但却和百度地图一样的页面。
若不能显示或者是出现乱码，则用以下办法解决：
& & & & & & & & & &&1.当你保存txt文件时采用默认编码格式(ANSI),则在上述代码中将编码格式改为charset="gb2312";若还不能显示，则查看是不你的浏览器的问题，在internet工具，选项里找到“禁用脚本提示”，看是否打钩了。
2.保存txt文件时选择编码格式为utf-8，则上面的代码就能正常显示
扫描二维码关注微信
请选择（填写）你的举报理由
问题内容涉及敏感信息
问题广告嫌疑
散布谣言，扰乱社会秩序
侮辱或者诽谤他人，侵害他人合法权益
含有法律、行政法规禁止的其他内容