百度地图JS调用示例
<!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调用示例的更多相关文章
- HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图 js 调用
百度地图key 的获取 进入 http://lbsyun.baidu.com/i 登录你的账号 点击进入控制台,复制 ak 的值 <!doctype html> <html> ...
- Java web与web gis学习笔记(二)——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- 百度地图--JS版
百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...
- 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)
可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...
- Winform调用百度地图接口简单示例
1.首先用一个html文件调用百度地图接口(主要注册一个序列号): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 百度地图js小结
1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...
- [deviceone开发]-百度地图do_BaiduMap的示例
一.简介 这个示例展示了百度地图的基本使用,并增加了一个自定义弹出的标示.这个标示是一个自定义的label,里面是地点的文字描述.因为这个组件需要根据应用app的包名去申请不同的key,所以提供一个可 ...
- 百度地图js根据经纬度定位和拖动定位点
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
随机推荐
- C#之实参和形参
1.值类型 例如:我们定义一个函数 static void Exchange(int x, int y) { int flag = x; flag = y; y = x; x = flag; } 其中 ...
- CCIE-MPLS VPN-实验手册(下卷)
10:跨域的MPLS VPN (Option A) 10.1 实验拓扑 10.1 实验需求 a. R1 R2 R3 组成P-NETWORK R1 R2 R3 位于AS 1,底层协议采用EI ...
- MySQL (二)-- 数据类型(列类型)、数值类型、 小数类型、 时间日期类型、 字符串类型 、 MySQL记录长度、列属性
1 数据类型(列类型) 所谓的数据类型:对数据进行统一的分类,从系统的角度出发是为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中将数据类型分成了三大类: 2 数值类型 数值类型数据:都 ...
- 当今游戏大作share的特性大盘点
极品游戏制作时的考虑要素大盘点 不知不觉入坑Steam已近4年,虽然说Steam的毒性让很多人走向一条不归路,但是想我这样即使"中毒"还是很快乐很感恩的.那么本期文章就谈谈我对其中 ...
- 团队作业9——测试与发布(Beta版本)
Deadline: 2017-6-5 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的两个方面 测试报告 发布说明 展示博客(单独一篇博客) 晚交 - 0分 迟交 ...
- 201521123042 《java程序设计》 第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. ①泛型定义:泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展, ...
- 201521123002《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 先查看源代码 con ...
- 自定义win8资源管理器左侧导航窗格的方法
Win8自定义资源管理器左侧导航窗格: 快捷键Win+R – 输入regedit: 删除“网络”项目 HKEY_CLASSES_ROOTCLSID{F02C1A0D-BE21-4350-88B0-73 ...
- Java I/O 从0到1 - 第Ⅰ滴血 File
前言 File 类的介绍主要会依据<Java 编程思想>以及官网API .相信大家在日常工作中,肯定会遇到文件流的读取等操作,但是在搜索过程中,并没有找到一个介绍的很简洁明了的文章.因此, ...
- GUI TextField
GUI.TextField public static function TextField(position: Rect, text: string): string; public stati ...