<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  
<script>
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
} //创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(118.059023,36.811819);//定义一个中心点坐标
map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
} //地图事件设置函数:
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 markerArr = [{title:"王府井广场",content:"我的备注",point:"118.05856|36.812093",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建marker
function addMarker(){
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);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
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;
}
//创建一个Icon
function createIcon(json){
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();//创建和初始化地图

百度地图api调用的更多相关文章

  1. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Java web与web gis学习笔记(二)——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  4. GPS坐标转换 百度地图API调用

    1 如果GPS输出的值是DD.DDDDDDDD格式的,直接调用地图API的转换函数处理,就可以正常显示2 如果GPS输出的值是DD.MMMMMMMM格式的,就需要先进行分转度处理,然后再调API,就可 ...

  5. 【百度地图API】如何根据摩卡托坐标进行POI查询,和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  6. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  7. 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API

    因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...

  8. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  9. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

随机推荐

  1. Linux2.6内核进程调度系列--scheduler_tick()函数2.更新实时进程的时间片

    RT /** * 递减当前进程的时间片计数器,并检查是否已经用完时间片. * 由于进程的调度类型不同,函数所执行的操作也有很大差别. */ /* 如果是实时进程,就进一步根据是FIFO还是RR类型的实 ...

  2. (七)Maven使用的最佳实践

    这里说一下在使用Maven过程中不是必须的,但十分有用的几个实践,关键时刻或许能解决您的问题. 1.设置MAVEN_OPTS环境变量 通常需要设置MAVEN_OPTS的值为-Xms128m -Xmx5 ...

  3. IO流总结

    IO流的作用:用于设备和设备之间的数据传输. IO流的概念:流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象. IO流的分类:  按照操作数据的类型分为两种: 字节流和字符流.  按 ...

  4. Linix登录报"/etc/profile: line 11: syntax error near unexpected token `$'{\r''"

    同事反馈他在一测试服务器(CentOS Linux release 7.2.1511)上修改了/etc/profile文件后,使用source命令不能生效,让我帮忙看看,结果使用SecureCRT一登 ...

  5. Python导入其他文件中的.py文件 即模块

    import sys sys.path.append("路径") import .py文件

  6. Thread Object wait() notify()基本

    package com.thread.test.thread; import java.util.ArrayDeque; import java.util.Queue; import java.uti ...

  7. 织梦Dedecms安全设置

    织梦DedeCMS是一款非常流行的CMS,很多刚开始建站人都用的织梦,一方面是织梦比较容易操作;另一方面是织梦的SEO方面做的确实比其他的系统要好一些.这些都导致织梦的用户群是非常庞大的,用的人多了, ...

  8. 5-sql查询

    sql查询 一.Sql查询 1.查看表字段信息 用scott账户登陆 1).查看scott账户下的所有表 2).查看员工表字段信息 3).查看部门表字段信息 4).查看工资等级字段信息 2.查询表 1 ...

  9. java环境变量配置

    1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0 ...

  10. Installation error: INSTALL_FAILED_NO_MATCHING_ABIS

    使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决办法 http://www.cnblogs.com/xiaobo-Linux/ 下载地址: ...