地图的折线：Polyline
(1)var polyline = new BMap.Polyline([new BMap.Point(X1,Y1),new BMap.Point(X2,Y2),new BMap.Point(X3,Y3)],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
(2)map.addOverlay(polyline);
<html>
<head>
<!--引用百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
</script>
<title>
地图折线
</title>
<!--
设计样式
container容器：占50%大小
-->
<style type="text/css">
#container{
width:50%;
height:50%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point(116.404, 39.915);//定位
map.centerAndZoom(point,15); //将point移到浏览器中心，并且地图大小调整为15; //标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addEventListener("click",function(){ //点击标注时出发事件
alert("您点击了标注");
});
marker.enableDragging(); //标注可拖拽 //创建信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 //折线
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(117.321,40.321)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} //蓝色、宽度为6
);
map.addOverlay(polyline); </script>
</body>
</html>
地图的折线：Polyline的更多相关文章
- 高德地图API中折线polyline不能跨越180度经度线的解决方案
1.问题 最近在使用高德地图的API,有一个需求是画出对象的历史轨迹,采用了高德地图API中的折线polyline函数.但如果需要跨180度经度线的折线,会出现不能跨越的情况,如下图所示: 图中有三个 ...
- 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单
利用绘制工具绘制点线面,并在执行绘制完成回调事件给相应覆盖物添加事件操作,提供标注的点击弹窗和标注.折线.多边形的右键删除 效果图如下: 完整代码如下:html+js <!DOCTYPE htm ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- Google 地图 API V3 之 叠加层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.3
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.1
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
- 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.0
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
随机推荐
- JOBDU 1027 欧拉回路
题目1027:欧拉回路 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3620 解决:1847 题目描述: 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条 ...
- hdu 3265 Posters（线段树+扫描线+面积并）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3265 题意:给你一张挖了洞的墙纸贴在墙上,问你总面积有多少. 挖了洞后其实就是多了几个矩形墙纸,一张墙 ...
- Linux开机启动过程（个人理解）
简述Linux启动过程 1)BIOS开机自检 2)MBR引导 3)启动引导程序菜单(GRUB) 4)加载内核 5)加载虚拟文件系统加载函数模块 6)启动系统进程 /sbin/init --->/ ...
- Java 中的array数组总结之一
数组:是一个将同种类型的数据存储在存储单元中. 可以用三种方式声明数组: 1.数据类型 标识符[]; int mothDays[]; 2.数据类型 标识符[] = new 数据类型[大小]; int ...
- 基于SSM的在线考试系统
本系统功能非常完善,页面美观大方,技术新颖,选用主流数据库Mysql,表数量及结构适当,如果你需要做在线考试或者其它考试类系统,这个系统将非常有用. 其实,任何考试系统,无非试题不一样,所以如果你是做 ...
- Java中ElasticSearch的删除示例
public class DeleteElasticAPI { private static RestClient restClient; static { restClient=RestClient ...
- 阿里雷卷：Reactive 基金会的成立将对开发方式带来哪些影响？
作者 | 赵钰莹 近日,Linux 基金会宣布成立 Reactive 基金会.对于 Reactive,各位开发者应该并不陌生,尤其是 Node.js 开发者,但真正了解并意识到这件事情对开发方式带来的 ...
- 进击的 Java ，云原生时代的蜕变
作者| 易立 阿里云资深技术专家 导读:云原生时代的来临,与Java 开发者到底有什么联系?有人说,云原生压根不是为了 Java 存在的.然而,本文的作者却认为云原生时代,Java 依然可以胜任&qu ...
- java对象与java对象引用的区别
java对象与java对象引用的区别 对象与对象引用的区别 直接用例子说话吧 Person per = new Person("张三"); 这一条语句,其实包括了四个动作: 右边的 ...
- 14个Linux系统安全小妙招，总有一招用的上！
对于互联网IT从业人员来说,越来越多的工作会逐渐转移到Linux系统之上,这一点,无论是开发.运维.测试都应该是深有体会.曾有技术调查网站W3Techs于2018年11月就发布一个调查报告,报告显示L ...