地图的折线：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 ...
随机推荐
- P3317 [SDOI2014]重建 变元矩阵树定理 高斯消元
传送门:https://www.luogu.org/problemnew/show/P3317 这道题的推导公式还是比较好理解的,但是由于这个矩阵是小数的,要注意高斯消元方法的使用: #include ...
- POJ - 3164-Command Network 最小树形图——朱刘算法
POJ - 3164 题意: 一个有向图,存在从某个点为根的,可以到达所有点的一个最小生成树,则它就是最小树形图. 题目就是求这个最小的树形图. 参考资料:https://blog.csdn.net/ ...
- 【欧拉降幂】Super_log
In Complexity theory, some functions are nearly O(1)O(1), but it is greater then O(1)O(1). For examp ...
- 使用Nginx、Nginx Plus防止服务器DDoS攻击
分布式拒绝服务攻击(DDoS)指的是通过多台机器向一个服务或者网站发送大量看似合法的数据包使其网络阻塞.资源耗尽从而不能为正常用户提供正常服务的攻击手段.随着互联网带宽的增加和相关工具的不断发布,这种 ...
- 排序入门练习题3 谁考了第k名 题解
题目出处:<信息学奥赛一本通>第二章 上机练习1 题目描述 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名的学生的学号和成绩. 输入格式 输入的第一行包含两 ...
- iOS -打包上传成功，在"构建版本"一直刷不出来
今天提交版本到appstore,构建版本一直不出来,等了一天也没有出来,其实就是权限问题,iOS13 来了,所以面临的问题随之而来,苹果给邮箱发了这段话: Dear Developer,We iden ...
- Metaspolit工具----基础
Metasploit框架(Metasploit Framework,MSF)是一个开源工具,旨在方便渗透测试,他是有Ruby程序语言编写的模板化框架,具有很好的扩展性,便于渗透测试人员开发.使用定制的 ...
- Elastic Stack 笔记（七）Elasticsearch5.6 聚合分析
博客地址:http://www.moonxy.com 一.前言 Elasticsearch 是一个分布式的全文搜索引擎,索引和搜索是 Elasticsarch 的基本功能.同时,Elasticsear ...
- day 3 总结
- Day 2 Bash shell 认识
1.拍摄虚拟机的快照 2. 什么是Bash shell? 命令解释器,将用户输入的命令,翻译给内核程序,将用户输入的指令翻译给内核 程序,内核处理完成之后将结果返回给bash. 如何打开一个bash窗 ...