<!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. java基于注解的redis自动缓存实现

    目的: 对于查询接口所得到的数据,只需要配置注解,就自动存入redis!此后一定时间内,都从redis中获取数据,从而减轻数据库压力. 示例: package com.itliucheng.biz; ...

  2. 父子一对多iframe，子iframe改子iframe元素

    $("iframe", parent.document).contents().find("#ProductNameIn").val(66666666); 1. ...

  3. 二,ESP8266 GPIO和SPI和定时器和串口

    让这个灯亮 我们写lua用这个软件 链接:http://pan.baidu.com/s/1kVN09cr 密码:pfv7 http://www.cnblogs.com/yangfengwu/p/624 ...

  4. 自制ACL+DHCP实验（初版）

    (实验用gns模拟器) ACL 实验拓扑: 实验要求: 1.1.1.1→3.3.3.3 不通 11.11.11.11→3.3.3.3 通 2.2.2.2→3.3.3.3 通 实验步骤: 步骤一:基本配 ...

  5. 转：【Java集合源码剖析】Hashtable源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/36191279 Hashtable简介 Hashtable同样是基于哈希表实现的,同样每个元 ...

  6. MySQL （五）--连接查询简介、 交叉连接、 内连接、外连接、自然连接、温馨小提示

    1 连接查询简介 将多张表(可以大于2)进行记录的连接(按照某个指定的条件进行数据拼接). 最终结果:记录数可能会有变化,字段书一定会增加(至少两张表的合并). 连接查询:join,使用方式:左表 j ...

  7. go golang 笔试题 面试题 笔试 面试

    go golang 笔试题 面试题 笔试 面试 发现go的笔试题目和面试题目还都是比较少的,于是乎就打算最近总结一下.虽然都不难,但是如果没有准备猛地遇到了还是挺容易踩坑的. 就是几个简单的笔试题目, ...

  8. 控制结构(10) 指令序列(opcode)

    // 上一篇:管道(pipeline) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编译/打包/发布等各种高频但非"核心"的脚本代码.职业程序员 ...

  9. 201521123012 《Java程序设计》第六周学习总结

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

  10. 201521123019 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 一.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. Ans ...