<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

	<style type="text/css">

	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

	</style>

	<title>百度地图API测试</title>

</head>

<body>

	<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

	var map = new BMap.Map("allmap");            // 创建Map实例

	var pointA = new BMap.Point(113.92983, 22.509397); // 创建点坐标   地址 蛇口沃尔玛

	var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城

	map.centerAndZoom(pointA, 15);

	map.enableScrollWheelZoom();                 //启用滚轮放大缩小

	map.addControl(new BMap.NavigationControl());

	map.addControl(new BMap.ScaleControl());

	map.addControl(new BMap.OverviewMapControl());

	//map.setCurrentCity("北京"); // 设置当前城市信息

	/*

     *  给地图添加监控 获取当前点击经纬度

	    map.addEventListener("click", function(e){

	    alert(e.point.lng + ", " + e.point.lat);

	    });

	*/

	addMarker(pointA, "蛇口沃尔玛", "地址：工业大道和东滨路交汇处<br/>电话：(0755)26816711");        // 创建标注1

	addMarker(pointB, "海岸城购物中心", "地址：文心五路33号海岸城东座212号<br/>电话：(0755)86125888");        // 创建标注2  

	//开始测距

	var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });  //定义折线

	map.addOverlay(polyline);     //添加折线到地图上

	polyline.addEventListener("click", function () {    //监听标注事件

	    alert('从蛇口沃尔玛到海岸城购物中心的距离是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  //获取两点距离,保留小数点后两位

	});

	//获取驾车路线

	//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });

	//driving.search(pointA, pointB);

	// 编写自定义函数,创建标注

	function addMarker(point, a, b) {

	    var marker = new BMap.Marker(point);

	    map.addOverlay(marker);

	    //map.removeOverlay(marker);                  // 将标注从地图中移除

	    //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

	    marker.addEventListener("click", function () {    //监听标注事件

	        var opts = {    //创建信息窗口

	            width: 250,     // 信息窗口宽度

	            height: 100,     // 信息窗口高度

	            title: a  // 信息窗口标题

	        }

	        var infoWindow = new BMap.InfoWindow(b, opts);  // 创建信息窗口对象

	        map.openInfoWindow(infoWindow, point);      //打开信息窗口

	        //alert("marker的位置是" + p.lng + "," + p.lat);

	    });

	}

</script>

百度地图JS调用示例的更多相关文章

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

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

  2. 百度地图 js 调用

    百度地图key 的获取 进入 http://lbsyun.baidu.com/i 登录你的账号 点击进入控制台,复制 ak 的值 <!doctype html> <html> ...

  3. Java web与web gis学习笔记（二）——百度地图API调用

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

  4. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  5. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  6. Winform调用百度地图接口简单示例

    1.首先用一个html文件调用百度地图接口(主要注册一个序列号):   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  8. [deviceone开发]-百度地图do_BaiduMap的示例

    一.简介 这个示例展示了百度地图的基本使用,并增加了一个自定义弹出的标示.这个标示是一个自定义的label,里面是地点的文字描述.因为这个组件需要根据应用app的包名去申请不同的key,所以提供一个可 ...

  9. 百度地图js根据经纬度定位和拖动定位点

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

随机推荐

  1. CCIE-交换路由复习笔记

    交换 考点: 1.trunk link(基础) 2.vtp 3.vlan 4.stp rstp mstp 5.hsrp vrrp glbp 6.ec Trunk link: 修改封装模式 802.1q ...

  2. 转：H2 入门

    H2 Database做为轻量级的内嵌数据库,功能十分强大,而且运行时只需要一个jar包即可,下表是官网的描述: 更详细的对比见官网页面: http://www.h2database.com/html ...

  3. 【2017集美大学1412软工实践_助教博客】团队作业6——展示博客（Alpha版本）

    题目 团队作业6: http://www.cnblogs.com/happyzm/p/6791211.html 团队成绩 团队成员简介 项目地址 项目目标,包括典型用户.功能描述.预期用户数量 如何满 ...

  4. 结对编程-四则运算-GUI

     201421123022 王若凡        201421123026  欧阳勇 https://git.coding.net/ttoyy/sizeyunsuan-GUI.git a.需求分析: ...

  5. 团队作业4——第一次项目冲刺（Alpha版本） Day5

    首先和助教及老师表示抱歉,博客确实当时就写了,但是一直不算写好,因为这几天卡住了,预计实现的功能实现不了,进度跟不上,现在也在寻求解决方法. 1.站立式会议: 2. Leangoo任务分解图: 3.任 ...

  6. 201521123086《java程序设计》第四周

    本章学习总结 尝试使用思维导图总结有关继承的知识点 1.2 使用常规方法总结其他上课内容. 为了不必要写重复的代码,可以运用继承,用关键字extends来定义一个类,被继承的类叫做父类,继承的类叫做子 ...

  7. 201521123100 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

  8. 201521123077 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 线程的同步(加锁防止多个线程同时访问) synchronized关键字修饰 可以使用于方法前或者方法内做同步 ...

  9. cityEngine入门（实现数据的预处理以及cityEngine的3维显示）

    一.  实验要求 1.     提供数据: 中田村两个图幅影像数据 DEM提供包含高程数值的文本和矢量数数据 完成内容: 实现中田村两个图幅的拼接,生成一个影像数据(Image.tif) 将DEM数据 ...

  10. 分区工具fdisk，gdisk，parted

    在linux中,当我们给系统添加一块新硬盘时,我们是无法使用的,因为他还没有分区和格式化,只有当我们将新硬盘分区并格式化之后,挂载在某个目录下,才能供我们正常使用,接下来我们要学习三种硬盘分区工具,f ...