<!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. (4)ES6解构赋值-字符串篇

    字符串的解构赋值 let [a,b,c,d,e] = 'Apple'; console.log(a); //A console.log(b); //p console.log(c); //p cons ...

  2. [2017BUAA软工助教]第0次个人作业

    学习别人的经验和体会 零.前言 我认为人生就是一次次地从<存在>到<光明>. 一.软件工程师的成长 0.这是一个博客索引 同学们在上这门课的时候基本都是大三,觉得在大学里,到教 ...

  3. 【Beta】Daily Scrum Meeting——Day7

    站立式会议照片 1.本次会议为第七次Meeting会议: 2.本次会议在中午12点,在陆大楼召开,本次会议为30分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 昨天已 ...

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

    ·本次会议为第三次Scrum Meeting会议~ ·本次会议项目经理召开时间为15:00,在教学楼教室召开,召开时长约30分钟,探讨了昨日任务的进展.遇到的困难以及后续所要开展的工作. 1.站立式会 ...

  5. 201521123053《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 答:先贴上主要代码: priva ...

  6. 201521123059 《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  7. 201521123027 <iava程序设计>第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  8. 201521123040《Java程序设计》第3周学习总结

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

  9. JavaEE error整理（不断更新）

    该文章用于整理开发中遇到的一些错误,及解决方法,不断整理更新. 1. 缺包异常 异常1:java.lang.NoClassDefFoundError: org/apache/commons/loggi ...

  10. maven web 项目中启动报错 Java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

    主要原因是maven项目里面的jar包吗,没有导入到项目中 maven web 项目中启动报错 Java.lang.ClassNotFoundException: org.springframewor ...