地图的折线：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 ...
随机推荐
- HDU-3038How Many Answers Are Wrong权值并查集
How Many Answers Are Wrong 题意:输入一连串的区间和,问和前面的矛盾个数: 思路:我在做专题,知道是并查集,可是还是不知道怎么做,学了一下权值并查集和大佬的优秀思路,感觉回了 ...
- POJ-2502 Subway( 最短路 )
题目链接:http://poj.org/problem?id=2502 Description You have just moved from a quiet Waterloo neighbourh ...
- ACM-ICPC 2018 沈阳赛区(网络赛)
D.Made In Heaven One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with he ...
- hdu 1176免费馅饼（记忆化搜索）
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...
- Atcoder C - Closed Rooms（思维+bfs）
题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_c 题意:略. 题解:第一遍bfs找到所有可以走的点并标记步数,看一下最少几步到达所有没锁的点,然 ...
- webpack4.0 babel配置遇到的问题
babel配置 babel版本升级到8.x之后发现出现了很多问题.首先需要安装 "@babel/core": "^7.1.2", "@babel/pl ...
- SpringBoot系列__01HelloWorld
接触SpringBoot很久了,但是一直没有很深入的研究一下源码,最近重启了博客,顺便开始深入研究一下技术. 1.简介 参照官方文档的说法,SpringBoot的设计理念就是为了简化Java程序员搭建 ...
- 聊聊Spring Cloud Config
Spring Cloud Config 转自:https://blog.csdn.net/fjnpysh/article/details/71307311 现今这个时候,微服务大行其道,互联网应用遍地 ...
- linux非root用户下安装软件，搭建生产环境
之前的用实验室的服务器,因为某些原因,使用的用户没有root权限.linux的非root用户很多软件无法安装,非常的不方便.我的方法是使用brew来代替系统的包管理工具.brew是最先用在mac上的包 ...
- CNCF 宣布成立应用交付领域小组，正式开启云原生应用时代
作者|赵钰莹 作为云原生领域的顶级开源社区, Cloud Native Computing Foundation (云原生基金会,以下简称 CNCF)近日宣布成立 Application Delive ...