地图示例-- 一个简单的百度地图示例_小组_ThinkSAAS
地图示例-- 一个简单的百度地图示例
地图示例-- 一个简单的百度地图示例
百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。
百度地图相对谷歌地图来说，提供的数据比较全面，比如交通路线。功能也比较多，基本上现在各大网站都是使用的百度地图，同时文档和API也做得不错。
个人建议使用百度地图API开发时，详细阅读官方提供的和。最好是对API中各个类的基本功能有个大致的了解。如果看到某些网站的地图很炫，也可以借助firebug或其他工具查看源码参考其实现。官网成功案例展示的那些网站的地图功能都可以参考。如果想要更高级绚丽的功能，官网的也可以了解一下。
贴出来的code是js的代码，可以运行的实例请下载文章的附件。有部分功能使用了jquery，不了解的童鞋请了解下jquery的使用语法。
此demo主要实现了以下几个功能
1.创建一个简单地图实例，配置了常用的地图上的控件，比如缩略地图、比例尺控件、缩放控件等。
2.使用ajax查询后台数据，并将其标注到地图中（大众化需求）。
3.拖拽地图后保存修改后的坐标（大众化需求）。
4.通过地图外的html操作地图内的功能（demo中只提供了点击某个链接，在地图中对应标注上打开信息窗口，需要其他工的请参考类文档后自由发挥）。
5.其他一些细微的功能，基本地图中要用到的。
code中使用js实现的hash完成了部分功能，不理解该原理的童鞋也请自己去补习相关知识，或者使用数组形式，官方示例中可以找到相关实现好的code。
自己的js是已经使用闭包的形式了，这里还是普通形式，建议使用闭包方式，好处的话大家都懂得。最后还是那句话，请多看类参考文档和官方示例。
&!-- 开始加载地图的处理 --&
&script type="text/javascript"&
// 存储信息窗的hash表
var infoWindowMap = new Hash();
// 存储标注的hash表
var markerMap = new Hash();
var buildingJsonStr = '[{"buildingId":"2A67E0D67","name":"02","x":"31.22127","y":"121.398516"}, {"buildingId":"20AD64EAB3AC576FFD3E","name":"03","x":"31.221587","y":"121.397745"}, {"buildingId":"45BBDB43","name":"04","x":"31.220695","y":"121.39827"}, {"buildingId":"A7EF4BC1B5","name":"05","x":"31.220769","y":"121.397956"}, {"buildingId":"0A4924B99F","name":"06","x":"31.220178","y":"121.398149"}, {"buildingId":"91C6FB5F3838EA67AEB6","name":"07","x":"31.220236","y":"121.397776"}, {"buildingId":"E99A96BB0","name":"08","x":"31.220576","y":"121.397269"}, {"buildingId":"F4A035D852D89F418667","name":"09","x":"31.220638","y":"121.396932"}, {"buildingId":"869C8C3AA796DB2D6A17","name":"10","x":"31.22051","y":"121.39633"}, {"buildingId":"8CD20D0E333F3D775AEE","name":"11","x":"31.220634","y":"121.395917"}, {"buildingId":"465B808DF","name":"12","x":"31.221186","y":"121.396132"}, {"buildingId":"76B9BD4DDEF","name":"13","x":"31.221151","y":"121.396478"}, {"buildingId":"60A7AEE993AD2F3D254E","name":"14","x":"31.221923","y":"121.396478"}, {"buildingId":"D993F7D6F104C6241EA0","name":"15","x":"31.221529","y":"121.397035"}, {"buildingId":"CA0FFF9EA","name":"16","x":"31.222487","y":"121.39682"}, {"buildingId":"50C5CEFCC37B745AE217","name":"17","x":"31.222155","y":"121.397278"}, {"buildingId":"CEB7EADAF0","name":"18","x":"31.222992","y":"121.396829"}, {"buildingId":"C4AE4CAC7","name":"19","x":"31.223008","y":"121.397215"}, {"buildingId":"AF30FB412","name":"20","x":"31.223054","y":"121.397745"}, {"buildingId":"BE86B8CA7D9","name":"21","x":"31.223039","y":"121.398109"}, {"buildingId":"4F721F26E60E4AE38B78","name":"22","x":"31.223062","y":"121.398702"}, {"buildingId":"35C890FA62A7AC3D7B4F","name":"23","x":"31.223077","y":"121.399106"}, {"buildingId":"3A343A9B0EE1A2F87ED6","name":"24","x":"31.222533","y":"121.398567"}, {"buildingId":"3BF14B2E","name":"25","x":"31.222128","y":"121.398109"}, {"buildingId":"F88DD30DD","name":"26","x":"31.221888","y":"121.398769"}]';
var estateJsonStr = '[{"estateId":"18D179397","name":"天山河畔花园","address":"水城路883弄/长宁路","x":"31.221034","y":"121.397223"}]'
* 获取相关的json数组
* @returns
function getJsonData() {
var url ="Your url";
// 此处注释请求后台程序获取json数组的方法，直接返回定义好的json数组
// $.ajax({
// type: 'GET',
// url: url,
// async: false,
// dataType: 'json',
// timeout: 50000,
// cache: false,
// error: function(XMLHttpRequest, status, thrownError) {
// alert('Error loading ' + url +', Please send it again!');
// success: function(json) {
// reltJson =
// 转换json数组字符串成json对象，正式使用时上述ajax方法直接拿到的是json对象，不需要这步操作
reltJson = eval(buildingJsonStr);
return reltJ
// 全局变量
// 地图对象
var estateJ
// 中心点json数据
var mouseoutI // 鼠标移出标注时的图像对象
var mouseoverI // 鼠标放在标注时的图像对象
// 绘制地图
drawMap();
* 绘制地图
function drawMap(){
estateJson = eval(estateJsonStr)[0];
// 初始化中心点的json数据
map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP, enableHighResolution: true});
// 设置卫星图为底图
initIcon();
configuration();
buildContextMenu();
initCenterMarker();
initOtherMarkers();
* 地图基本功能设置
* @param map
function configuration(){
// 初始化中心坐标
var point = getPoint(estateJson.y, estateJson.x);
// 启用键盘操作
map.enableKeyboard();
// 启用滚轮放大缩小
map.enableScrollWheelZoom();
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 18);
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
// 添加平移缩放控件
map.addControl(new BMap.NavigationControl());
// 启用地图惯性拖拽
map.enableInertialDragging();
// 展示普通街道、卫星和路网的混合视图
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));
// 创建缩略地图控件
var control = new BMap.OverviewMapControl();
// 展开缩略地图控件，默认不展开
control.changeView();
// 添加缩略地图控件
map.addControl(control);
// 设置地图显示的城市 此项是必须设置的
map.setCurrentCity("上海");
* 创建右键菜单
function buildContextMenu(){
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
text:'放大',
callback:function(){map.zoomIn();}
text:'缩小',
callback:function(){map.zoomOut();}
text:'放置到最大级',
callback:function(){map.setZoom(20);}
for(var i=0; i & txtMenuItem. i++){
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==1 || i==3) {
contextMenu.addSeparator();
map.addContextMenu(contextMenu);
* 初始化标注图像
function initIcon(){
mouseoutIcon = new BMap.Icon("images/marker-icon.gif", new BMap.Size(12, 21), {imageOffset:new BMap.Size(-46,0)});
mouseoverIcon = new BMap.Icon("images/marker-icon.gif", new BMap.Size(12, 21), {imageOffset:new BMap.Size(-69,0)});
* 初始化中心点标注
function initCenterMarker(){
addMarker(getPoint(estateJson.y, estateJson.x), estateJson.name, estateJson.estateId)
* 初始化其他标注
function initOtherMarkers(){
// 获取其他json数据
var markersJson = getJsonData();
$.each(markersJson, function(){
addMarker(getPoint(this.y, this.x), this.name, this.buildingId);
* 获取栋座坐标point对象
* 无坐标时，随机生成在小区坐标附近
* @param y
* @param x
function getPoint(y, x){
// 因为json字符串中定义的是字符串，需要转换成float
var _y = parseFloat(y);
var _x = parseFloat(x);
// 如果是有效的坐标，则直接创建point
if(_y & 0 || _x & 0)
return new BMap.Point(_y, _x);
// 如果不是有效坐标，则创建中心点附近的随机坐标值
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
return new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.8), ne.lat - latSpan * (Math.random() * 0.8));
* 添加多个标注
* @param point 坐标
* @param text 标注文本
* @param buildingId 编号
function addMarker(point, text, id){
// 创建标注
var marker = new BMap.Marker(point, {icon:mouseoutIcon});
marker.setLabel(new BMap.Label(text, {offset:new BMap.Size(9,-20)}));
marker.setTitle(text);
marker.enableDragging();
// 标注拖拽结束后绑定的事件
marker.addEventListener("dragend", function(e){
editCoord(id, e.point.lat, e.point.lng, text);
// 鼠标离开标注时绑定的事件
marker.addEventListener("mouseout", function(e){
marker.setIcon(mouseoutIcon);
// 鼠标移到标注时绑定的事件
marker.addEventListener("mouseover", function(e){
marker.setIcon(mouseoverIcon);
// 鼠标点击标注时绑定的事件
marker.addEventListener("click", function(e){
marker.openInfoWindow(infoWindow);
// 信息窗关闭时绑定的事件
marker.addEventListener("infowindowclose", function(e){
marker.setIcon(mouseoutIcon);
// 信息窗打开时绑定的事件
marker.addEventListener("infowindowopen", function(e){
marker.setIcon(mouseoverIcon);
// 显示到地图中
map.addOverlay(marker);
//创建信息窗
var infoWindow = Window(getContent(text));
// 存储到hash
infoWindowMap.put(id, infoWindow);
markerMap.put(id, marker);
var link = '&li&&a href="javascript:void(0);"onclick="showInfoWindos(''+id+'')"&'+ text +'&/a&&/li&';
$('#a_view').append(link);
* 展示标注的信息窗
* @param id
function showInfoWindos(id){
var marker = markerMap.get(id);
if(infoWindowMap.get(id) != undefined){
marker.openInfoWindow(infoWindowMap.get(id));
* 保存坐标编辑
* @param id
* @param x
* @param y
* @param name
function editCoord(id, x, y, name){
// $.ajax({
// type: 'POST',
// url: 'Your url',
// data: {
'id' : id,
// success: function(data) {
// showMsg("&strong&"+ name +"修改后的坐标已自动保存&/strong&");
showMsg('&strong&"' + name + '"修改后的坐标已自动保存&/strong&');
* 获取信息窗html
function getContent(name){
var content ="&div&&p&{name}&/p&&/div&";
return content.replace("{name}", name);
* 展示坐标修改后的提醒内容
function showMsg(msg){
$('#msg_view').html(msg);
酸奶小妹的博客也提供了不少的实例：
下载次数: 51
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
手机客户端
ThinkSAAS接收任何功能的Iphone(IOS)和Android手机的客户端定制开发服务
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。【MOD共享】【新】中国地图背景＋路牌＋名称 v8版_欧洲卡车模拟2吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：50,111贴子：
【MOD共享】【新】中国地图背景＋路牌＋名称 v8版
为了方便新手使用本mod不懂的问题，所以在这也发一次【说明】本mod下载后是7z格式的压缩包，需要解压，解压后得到一个scs格式的mod，把scs格式的mod拖到 我的文档／欧卡的目录／mod／即可，进入游戏，在游戏人物界面打开mod管理器，双击本mod图标（激活）【MOD介绍】这个版本更新的内容与上个版本完全不同，除了香港以外其它地区全部都重新整理重做了原因 中国没有地区适合做英国更新的内容重做了所有地区名称（除了香港）因为上个版本有卡友反映字体太大，所以重做了字体基本汉化完善了百分之90 很多文件都重做了也大大增加了我所花费的时间国庆放假4天，3天都在做这mod 所以说，不喜欢本Mod的卡友不要喷我！ 此外还做的地图（新增了真实中国高清地图背景）将在下一个版本更新已知问题（路牌因找不到文件导致无法汉化北欧的路牌）一直都找不到的路牌，技术有限，望见谅！本人纯属为了个人需要才把图做成中国地区看到有不少卡友都很喜欢此mod，本人也很高兴在我有能力的情况下还会再更新此mod 原创mod供卡友玩【声明】（本mod不是地图mod，纯属用欧洲地图汉化制作成中国地区的名称与路牌）【适用版本】1.19.x - 1.21.x【】 Ётs2-梓宁Cнёη 【贝壳门生】【图片欣赏】 百度网盘【下载地址】 【图片】【图片】
巴西地图+捷克全国地图+...
啥都不说了，跑了两天一...
兼容地图，980 MB。少...
山路18弯开播
发帖更新就交给我，大家...
这个mod是我在其他地方...
韩国冒险地图 v6.4-1.22...
贵州地图第二期已完成，...
载入小TIP镇楼，大哥们...
摩尔多瓦地图共和国是欧...
发图掉口味，本次共有5...
很好很给力！我一直在等后续的这个地图，因为那嘎达还是北欧的地名，这回都换成了中国的地盘儿了。谢谢楼主了！
@ 你好楼主，你怎么弄2个香港啊？我觉着有点浪费之余呢也不对劲啊。香港都是靠左行驶的，所以把原图英国给弄成香港，这个是完全正确的。可是另一个香港是在英国以外的，是靠右行驶的。可不可以改动一下，把另个香港（不是的那个香港）改成澳门好吧了？谢谢。
楼主 1.19的支持不 大概多大mb
一款真正“球迷做给球迷”的足球类游戏！
哈哈 谢谢楼主
下不下先留名
怎样安装？
密码呢？？？？？
内&&容:使用签名档&&
保存至快速回贴我要地图-地图API首页
什么是我要地图
我要地图 API 为您提供免费、开放的地图应用接口。实现在网页、Flash 应用、手机客户端操作地图、叠加位置信息的功能，以及扩展更多的以地图为基础的应用程序。
我要地图网站（）、我要地图Andriod版（详细） 均是基于 API 开发的。
提供基于JS的地图API
提供基于AS的地图API
Android API
提供基于Android平台的地图API
提供基于iOS平台的地图API
电话:010-6
电话:010-2
flex频道新增拉框缩放地图和点聚合绽放效果。
JS频道新增拉框放大、拉框搜索、圆形搜索、矩形搜索、多边形搜索工具类。
JS频道线、面覆盖物实现整体拖动功能。
JS频道新增线末尾追加点的功能。
JS频道新增点覆盖物旋转功能。
JS频道新增地图动画缓进缓出的动画特效。
flex频道新增了实时追踪和轨迹回放接口。
API开发者网站界面改版。页面样式修改，JS频道代码示例修改为统一方式。
JS频道增强覆盖物功能。添加覆盖物编辑类、覆盖物工具类、覆盖物管理类。
新增加了flex频道，示例采用全屏的页面模式。同时js的类参考模块采用全新布局，阅览使用更加方便。
JS频道新增加了单片图层和切片图层叠加功能，更新了覆盖物以及点、线、面的编辑功能。今天看啥 热点：
Arcgis for js加载百度地图，arcgisjs
在前面的文章里提到了Arcgis for js加载天地图，在本节，继续讲解如何在Arcgis for js中加载百度地图。
影像-无标注
影像-有标注
第一，在此感谢/chenyuming/p/3343729.html这篇文章的主人，给了我很大的启发与帮助，因为一直在找相关的参数，都不对，只有这个参数是没有问题的。
第二，百度地图可调用的有地图切片，影像切片，以及道路等POI切片，我将之用TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下：
BDAnoLayer.js
define([&dojo/_base/declare&,
&esri/layers/tiled&],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-7892, -08.7892, this.spatialReference));
this.scale = [63.889,944,472,236,618,
309,155,577,289,144,572,,
this.resolution = [928,.,91.,2499,
.,152.,76.2,38.6,19.3,9.15,
4.37,2.68,1.05,0.817,0.617];
this.tileInfo = new esri.layers.TileInfo({
&rows&: 256,
&cols&: 256,
&compressionQuality&: 90,
&origin&: {
&x&: -7892,
&spatialReference&: this.spatialReference,
&lods&: [{ &level&: 0, &resolution&: this.resolution[0], &scale&: this.scale[0] },
{ &level&: 1, &resolution&: this.resolution[1], &scale&: this.scale[1] },
{ &level&: 2, &resolution&: this.resolution[2], &scale&: this.scale[2] },
{ &level&: 3, &resolution&: this.resolution[3], &scale&: this.scale[3] },
{ &level&: 4, &resolution&: this.resolution[4], &scale&: this.scale[4] },
{ &level&: 5, &resolution&: this.resolution[5], &scale&: this.scale[5] },
{ &level&: 6, &resolution&: this.resolution[6], &scale&: this.scale[6] },
{ &level&: 7, &resolution&: this.resolution[7], &scale&: this.scale[7] },
{ &level&: 8, &resolution&: this.resolution[8], &scale&: this.scale[8] },
{ &level&: 9, &resolution&: this.resolution[9], &scale&: this.scale[9] },
{ &level&: 10, &resolution&: this.resolution[10], &scale&: this.scale[10] },
{ &level&: 11, &resolution&: this.resolution[11], &scale&: this.scale[11] },
{ &level&: 12, &resolution&: this.resolution[12], &scale&: this.scale[12] },
{ &level&: 13, &resolution&: this.resolution[13], &scale&: this.scale[13] },
{ &level&: 14, &resolution&: this.resolution[14], &scale&: this.scale[14] },
{ &level&: 15, &resolution&: this.resolution[15], &scale&: this.scale[15] },
{ &level&: 16, &resolution&: this.resolution[16], &scale&: this.scale[16] },
{ &level&: 17, &resolution&: this.resolution[17], &scale&: this.scale[17] },
{ &level&: 18, &resolution&: this.resolution[18], &scale&: this.scale[18] },
{ &level&: 19, &resolution&: this.resolution[19], &scale&: this.scale[19] }
this.loaded =
this.onLoad(this);
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return &http://online& + num + &./tile/?qt=tile&x=&+numX+&&y=&+numY+&&z=&+level+&&styles=sl&udt=&;
BDVecLayer.js
define([&dojo/_base/declare&,
&esri/layers/tiled&],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-7892, -08.7892, this.spatialReference));
this.scale = [63.889,944,472,236,618,
309,155,577,289,144,572,,
this.resolution = [928,.,91.,2499,
.,152.,76.2,38.6,19.3,9.15,
4.37,2.68,1.05,0.817,0.617];
this.tileInfo = new esri.layers.TileInfo({
&rows&: 256,
&cols&: 256,
&compressionQuality&: 90,
&origin&: {
&x&: -7892,
&spatialReference&: this.spatialReference,
&lods&: [{ &level&: 0, &resolution&: this.resolution[0], &scale&: this.scale[0] },
{ &level&: 1, &resolution&: this.resolution[1], &scale&: this.scale[1] },
{ &level&: 2, &resolution&: this.resolution[2], &scale&: this.scale[2] },
{ &level&: 3, &resolution&: this.resolution[3], &scale&: this.scale[3] },
{ &level&: 4, &resolution&: this.resolution[4], &scale&: this.scale[4] },
{ &level&: 5, &resolution&: this.resolution[5], &scale&: this.scale[5] },
{ &level&: 6, &resolution&: this.resolution[6], &scale&: this.scale[6] },
{ &level&: 7, &resolution&: this.resolution[7], &scale&: this.scale[7] },
{ &level&: 8, &resolution&: this.resolution[8], &scale&: this.scale[8] },
{ &level&: 9, &resolution&: this.resolution[9], &scale&: this.scale[9] },
{ &level&: 10, &resolution&: this.resolution[10], &scale&: this.scale[10] },
{ &level&: 11, &resolution&: this.resolution[11], &scale&: this.scale[11] },
{ &level&: 12, &resolution&: this.resolution[12], &scale&: this.scale[12] },
{ &level&: 13, &resolution&: this.resolution[13], &scale&: this.scale[13] },
{ &level&: 14, &resolution&: this.resolution[14], &scale&: this.scale[14] },
{ &level&: 15, &resolution&: this.resolution[15], &scale&: this.scale[15] },
{ &level&: 16, &resolution&: this.resolution[16], &scale&: this.scale[16] },
{ &level&: 17, &resolution&: this.resolution[17], &scale&: this.scale[17] },
{ &level&: 18, &resolution&: this.resolution[18], &scale&: this.scale[18] },
{ &level&: 19, &resolution&: this.resolution[19], &scale&: this.scale[19] }
this.loaded =
this.onLoad(this);
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return &http://online& + num + &./tile/?qt=tile&x=&+numX+&&y=&+numY+&&z=&+level+&&styles=pl&scaler=1&udt=&;
BDimgLayer.js
define([&dojo/_base/declare&,
&esri/layers/tiled&],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-7892, -08.7892, this.spatialReference));
this.scale = [63.889,944,472,236,618,
309,155,577,289,144,572,,
this.resolution = [928,.,91.,2499,
.,152.,76.2,38.6,19.3,9.15,
4.37,2.68,1.05,0.817,0.617];
this.tileInfo = new esri.layers.TileInfo({
&rows&: 256,
&cols&: 256,
&compressionQuality&: 90,
&origin&: {
&x&: -7892,
&spatialReference&: this.spatialReference,
&lods&: [{ &level&: 0, &resolution&: this.resolution[0], &scale&: this.scale[0] },
{ &level&: 1, &resolution&: this.resolution[1], &scale&: this.scale[1] },
{ &level&: 2, &resolution&: this.resolution[2], &scale&: this.scale[2] },
{ &level&: 3, &resolution&: this.resolution[3], &scale&: this.scale[3] },
{ &level&: 4, &resolution&: this.resolution[4], &scale&: this.scale[4] },
{ &level&: 5, &resolution&: this.resolution[5], &scale&: this.scale[5] },
{ &level&: 6, &resolution&: this.resolution[6], &scale&: this.scale[6] },
{ &level&: 7, &resolution&: this.resolution[7], &scale&: this.scale[7] },
{ &level&: 8, &resolution&: this.resolution[8], &scale&: this.scale[8] },
{ &level&: 9, &resolution&: this.resolution[9], &scale&: this.scale[9] },
{ &level&: 10, &resolution&: this.resolution[10], &scale&: this.scale[10] },
{ &level&: 11, &resolution&: this.resolution[11], &scale&: this.scale[11] },
{ &level&: 12, &resolution&: this.resolution[12], &scale&: this.scale[12] },
{ &level&: 13, &resolution&: this.resolution[13], &scale&: this.scale[13] },
{ &level&: 14, &resolution&: this.resolution[14], &scale&: this.scale[14] },
{ &level&: 15, &resolution&: this.resolution[15], &scale&: this.scale[15] },
{ &level&: 16, &resolution&: this.resolution[16], &scale&: this.scale[16] },
{ &level&: 17, &resolution&: this.resolution[17], &scale&: this.scale[17] },
{ &level&: 18, &resolution&: this.resolution[18], &scale&: this.scale[18] },
{ &level&: 19, &resolution&: this.resolution[19], &scale&: this.scale[19] }
this.loaded =
this.onLoad(this);
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return &http://shangetu& + num + &./it/u=x=&+numX+&;y=&+numY+&;z=&+level+&;v=009;type=sate&fm=46&udt=&;
});从上面的getTileUrl可以看到，三者返回的url的地址是有区别的，在上述那边博文里面提到的url已经失效，为了得到最新的地址，我做了如下工作：
1、用百度地图JS API调用并显示百度地图，代码如下：
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&style type=&text/css&&
body, html,#allmap {width: 100%;height: 100%;overflow:margin:0;font-family:&微软雅黑&;}
&script type=&text/javascript& src=&http://api./api?v=2.0&ak=你的秘钥&&&/script&
&title&地图展示&/title&
&div id=&allmap&&&/div&
&script type=&text/javascript&&
// 百度地图API功能
var map = new BMap.Map(&allmap&);
// 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
// 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
map.setCurrentCity(&北京&);
// 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);
//开启鼠标滚轮缩放
&/script&2、F12打开Chrom调试——NetWork——左边找一张切片，右边切换至Preview面板
如此，URL即为切片的Url，其中online后面的数字2即为代码中的num，x为代码中的numX，y为numY，z为缩放级别。
第三，调用显示
调用显示比较简单，代码如下：
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Baidu Map&/title&
&link rel=&stylesheet& href=&http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css&&
&link rel=&stylesheet& href=&http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css&&
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
.base-map-ano{
background: #e6edf1;
border: #96aed1 1
padding: 4px 5
padding-left: 0
padding-top: 0
font-weight:
.base-map{
background: #f0f0f0;
border: #96aed1 1
z-index: 99;
font:normal 11px &宋体&,A
color:#868686;
.base-map-switch{
padding: 4px 8
.base-map-switch-active{
background:#e6edf1;
font-weight:
color: #4d4d4d;
.base-map-switch:hover{
.base-map-switch-center{
border: 1px #96aed1
border-top:
border-bottom:
&script type=&text/javascript&&
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'bdlib',
location: this.location.pathname.replace(/\/[^/]+$/, &&)+&/js/bdlib&
&script src=&http://localhost/arcgis_js_api/library/3.9/3.9/init.js&&&/script&
&script src=&js/jquery-1.8.3.js&&&/script&
var map,showMap,anoC
require([&esri/map&,
&bdlib/BDVecLayer&,
&bdlib/BDImgLayer&,
&bdlib/BDAnoLayer&,
&esri/layers/FeatureLayer&,
&esri/geometry/Point&,
&esri/SpatialReference&,
&dojo/domReady!&],
function (Map,
BDVecLayer,
BDImgLayer,
BDAnoLayer,
FeatureLayer,
SpatialReference
map = new Map(&map&, {
logo: false
var vecMap = new BDVecLayer();
var imgMap = new BDImgLayer();
var anoMap = new BDAnoLayer();
map.addLayer(vecMap);
map.addLayers([imgMap,anoMap]);
imgMap.hide(),anoMap.hide();
var pt = new Point(3474, new SpatialReference({ wkid: 102100 }));
map.centerAndZoom(pt, 5);
showMap = function(layer){
//设置按钮样式
var baseMap = [&vec&,&img&];
for(var i= 0, dl=baseMap.i&i++){
$(&#&+baseMap[i]).removeClass(&base-map-switch-active&);
$(&#&+layer).addClass(&base-map-switch-active&);
//设置显示地图
switch(layer){
case &img&:{//影像
vecMap.hide();
imgMap.show();
$(&#ano&).show();
default :{//地图
vecMap.show();
imgMap.hide(),anoMap.hide();
$(&#ano&).hide();
$(&#chkAno&).attr(&checked&,false);
anoCtrl = function(){
if($(&#chkAno&).attr(&checked&)){
anoMap.show();
anoMap.hide();
&div id=&map&&
&div class=&base-map&&
&div id=&vec& class=&base-map-switch base-map-switch-active& onclick=&showMap('vec')&&地图&/div&
&div id=&img& class=&base-map-switch base-map-switch-center&
onclick=&showMap('img')&&影像
&div id=&ano& class=&base-map-ano&&
&input id=&chkAno& type=&checkbox& name=&chkAno& value=&chkAno& onchange=&anoCtrl()&/&标注
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
WEB前端教程最近更新