以下代码拷贝成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. const 与 readonly知多少

    原文地址: http://www.cnblogs.com/royenhome/archive/2010/05/22/1741592.html 尽管你写了很多年的C#的代码,但是可能当别人问到你cons ...

  2. EnumHelper.cs枚举助手（枚举描述信息多语言支持）C#

    C#里面经常会用到枚举类型,枚举是值类型对象,如果你想用枚举类型的多属性特性,或者你想在MVC页面上通过简单的值类型转换,将某字段值所代表的含义转换为文字显示,这时候必须要将枚举扩展,是它支持文本描述 ...

  3. Linq在Array,List,Dictionary中的应用

    Linq在Array,List,Dictionary中的应用 今天在实际工作中需要对array,list,dictionary进行排序,试一试linq,发现非常好用,代码如下: using Syste ...

  4. Android Service

    一.在MainAcitivity界面启动Service  : public class MyService extends Service intent = new Intent(MainActivi ...

  5. mybatis笔记3 一些原理的理解

    1,mybatis流程跟踪,原理理解 基本思路: 从SqlSessionFactory的初始化出发,观察资源的准备和环境的准备,以及实现持久层的一些过程: 进入SqlSessionFactoryBea ...

  6. 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  7. jdk顺序表笔记

    一.AbstractCollection 提供了集合的最大实现 继承该类,必须实现size()和iterator(),因为该类操作集合都是通过iterator 二.fail-fast策略 该策略在集合 ...

  8. 【干货分享】前端面试知识点锦集01（HTML篇）——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  9. BCS datetime 时间区间问题

    BCS 整合sql表时发现以下问题: datetime字段在列表中带了时区,比如插入12-6号的数据,在sql中显示的是12-5 date类型字段无法正确识别,插入成功但报错 LobSystem (外 ...

  10. github源码学习之UIImage+YYWebImage

    UIImage+YYWebImage是YYWebImage(https://github.com/ibireme/YYWebImage)中的一个分类,这个分类封装了一些image常用的变化方法,非常值 ...