以下代码拷贝成html，直接运行即能看到百度地图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度地图</title>
</head>
<body>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&amp;v=1.1&amp;services=true"></script>
<div class="map-div" id="dituContent" style="height:600px">
<script type="text/javascript">
function initMap(){
createMap();
setMapEvent();
addMapControl();
addMarker();
}
function createMap(){
debugger;
var map = new BMap.Map("dituContent");
var point = new BMap.Point(121.517038,31.242691);
map.centerAndZoom(point,17);
window.map = map;
}

function setMapEvent(){
debugger;
map.enableDragging();
map.enableScrollWheelZoom();
map.enableDoubleClickZoom();
map.enableKeyboard();
}

function addMapControl(){
debugger;
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 markerArr = [{title:"金钥匙集团",content:"上海陆家嘴浦东南路500号国家开发银行13楼<br />电话：400 052 6606",point:"121.517038|31.242691",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
function addMarker(){
debugger;
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
function createInfoWindow(i){
debugger;
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
function createIcon(json){
debugger;
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();
</script>
</div>
</body>
</html>

百度地图demo的更多相关文章

  1. Android studio百度地图demo出现230错误，key校验失败

    转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...

  2. 将百度地图Demo抽取出来安到自己的程序中

    今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...

  3. 【Android接百度地图API】百度地图Demo点击按钮闪退

    运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...

  4. 百度地图 - demo

    项目需要集成百度地图,那么关于如何集成百度地图的事,就自己去百度开放平台查看文档吧,这是非常简单的事,在这里就不多说了. 那么下面我就说说我在这个demo里所做的事. 首先,项目需要具备定位及计算两地 ...

  5. android 百度地图demo 随感

    最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...

  6. 简单高效快捷的百度地图demo

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  7. Jquery Mobile 百度地图 Demo

    首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...

  8. 一个抽取百度定位的教程（下载百度地图Demo+配置+抽取）

    效果展示 已经下载Demo的可以直接到第五步,已经配置好的并可以运行的可以直接到第七步. 1.在浏览器搜索 " 百度定位API ",点击下面这个链接 2.翻到最下面找到并点击 &q ...

  9. 百度地图的demo提示key验证错误！错误码：230;

    在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...

随机推荐

  1. Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  2. Dapper-据说stackoverflow使用的orm

    using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; usin ...

  3. MVC发布到虚拟主机上出现的错误

    问题1:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 现象:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 原因:站点中部署的Web使用的 ...

  4. Yii 2.x Behavior - 类图

    yii\base\Component  继承这个类的类都具备扩展行为的能力

  5. spring事务概念理解

    1.数据并发问题 脏读 A事务读取B事务尚未提交的更新数据,并在此数据的基础上操作.如果B事务回滚,则A事务读取的数据就是错误的.即读取了脏数据或者错误数据. 不可重复组 A事务先后读取了B事务提交[ ...

  6. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  7. About 静态代码块，普通代码块，同步代码块，构造代码块和构造函数的纳闷

    构造函数用于给对象进行初始化,是给与之对应的对象进行初始化,它具有针对性,函数中的一种.特点:1:该函数的名称和所在类的名称相同.2:不需要定义返回值类型.3:该函数没有具体的返回值.记住:所有对象创 ...

  8. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  9. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...