<!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. 【C++小白成长撸】--（续）单偶数N阶魔方矩阵

    1 /*程序的版权和版本声明部分: **Copyright(c) 2016,电子科技大学本科生 **All rights reserved. **文件名:单偶数N阶魔方矩阵 **程序作用:单偶数N阶魔 ...

  2. Javascript学习日志（三）：闭包

    说实话,前面一节的原型和原型链在当初学的时候并没有很头疼,对着高级编程第三版撸了几遍就理解透了,闭包这一节真的挺头疼的,很惭愧,看了差不多十来遍吧,还翻看了网上的其他博客和解释文档,五花八门的表达方式 ...

  3. PHP初入，简易网页整理（布局&特效的使用）

    html><html> <head> <meta charset="UTF-8"> <title></title> ...

  4. Window下SVN服务器搭建以及客户端使用

    一.下载 上一篇博客是关于Jenkins的内容,在Jenkins自动化编译时可能会自动获取版本更新进行build,那就需要用到版本更新的工具.这里使用VisualSVN Server来作为搭建svn的 ...

  5. 【集美大学1411_助教博客】团队作业3——需求改进&系统设计 成绩

    看到同学们越来越认真了,助教非常高兴.大家已经开始了alpha冲刺,请控制好进度.成功的关键就是不断迭代,不断迭代. 关于leangoo 我看到所有组的同学都已经开始使用leangoo,请大家把助教加 ...

  6. 201521123083 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常,多线程 1.finally题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 一个tr ...

  7. C语言之算法初步（汉诺塔--递归算法）

    个人觉得汉诺塔这个递归算法比电子老鼠的难了一些,不过一旦理解了也还是可以的,其实网上也有很多代码,可以直接参考.记得大一开始时就做过汉诺塔的习题,但是那时代码写得很长很长,也是不理解递归的结果.现在想 ...

  8. 201521123071 《JAVA程序设计》第十四周学习总结

    第14周作业-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 1.使用JDBC将Java程序与数据库连接 1.1注册驱动 Class.f ...

  9. Jquery第三篇【AJAX 相关的API】

    前言 前面我们已经学了讲解了Jquery的选择器,关于DOM 的API还有事件的API.本博文需要讲解Jquery对AJAX的支持- 我们在开始使用JavaScript学习AJAX的时候,创建异步对象 ...

  10. Java Sftp上传下载文件

    需要使用jar包  jsch-0.1.50.jar sftp上传下载实现类 package com.bstek.transit.sftp; import java.io.File; import ja ...