<!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. JavaScript学习日志（六）：事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  2. 【2017集美大学1412软工实践_助教博客】团队作业9——测试与发布（Beta版本）

    题目 团队作业9--测试与发布(Beta版本)(http://www.cnblogs.com/happyzm/p/6917253.html) 团队作业9-1 测试与发布成绩 分值 1 0.5 0.5 ...

  3. Java学习1——JDK（学前准备）

    一.下载: 可以在http://www.oracle.com/technetwork/java/javase/downloads/index.html下载并安装Java SE(JDK) java大致版 ...

  4. 201521123093 java 第八周总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 1.泛型简介:同一个代码可以被不同的对象重用 2.使用泛型的好处:允许 ...

  5. 201521123050 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: public boolean contains(Object o) ...

  6. 201521123006 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口与抽象类拥有相同之处:(1)都代表系统的抽象层. (2)都不能被实例化(不能 ...

  7. 201521123012 《Java程序设计》第一周学习总结

    一.本章学习内容 1.了解了JDK.JRE .JVM. 2.大概看过了Java的诞生.版本演进(JDK1.1.4,JDK1.1.5--JDK1.1.8,J2SE1.2--Java SE 8)以及三大平 ...

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

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有 ...

  9. JPA关系映射之many-to-many

    @ManyToMany Board表实体类 @Entity @Cache(usage=CacheConcurrencyStrategy.NONSTRICT_READ_WRITE) @Table(nam ...

  10. spring的一些问题

    1.什么是spring? spring是一个轻量级的一站式框架,它的核心有两个部分,1.aop面向切面编程 2.ioc控制反转. 2.什么是aop aop就是面向切面编程,使用aop可以使业务逻辑各个 ...