关于Google Map 叠加层之Polyline(折线)、Polygon(多边形)、InfoWindow(信息窗口)

转载至 http://scorpio-jh.blog.sohu.com/156761136.html

示例

—————— Polyline 折线

// 1. 从雍和宫–东直门画一条折线
// 路径
var path = [
new google.maps.LatLng(39.949227017559615,116.41707632263186),
new google.maps.LatLng(39.94942441423325,116.42548773010256),
new google.maps.LatLng(39.9408700359111,116.42583105285647),
new google.maps.LatLng(39.94080422885547,116.43364164550783)
];
// 折线参数
var polylineOptions = {
path: path,
geodesic: true, // 可测量的
strokeColor: “#000”, // 线条颜色黑色
strokeOpacity: 0.5, // 透明度 50%
strokeWeight: 5 // 宽度 5像素
};
// 创建一个Polyline的实例
var polyline1 = new google.maps.Polyline(polylineOptions);
polyline1.setMap(map); // 设置显示到map上

效果：

// 2. 再创建一个Polyline，双击地图时，绘制折线
var polyline2 = new google.maps.Polyline({
strokeColor: “#f30”, // 线条颜色红色
strokeOpacity: 0.7, // 透明度 70%
strokeWeight: 5 // 宽度 5像素
});
// 将折线放置在map上
polyline2.setMap(map);
// 给map添加双击事件
google.maps.event.addListener(map, “dblclick”, function(event){
// 获得折线路径
var path = polyline2.getPath();
// 在路径的原点打一个标记
if( path.length == 0 ) {
var marker = new google.maps.Marker();
marker.setMap(map);
marker.setPosition(event.latLng);
marker.setTitle(event.latLng.toUrlValue());
}
// 在路径上追加坐标位置
// 因为路径时一个MVCArray，我们可以简单的追加一个新的坐标位置，它将会自动出现
path.push(event.latLng);
});
}

——-polygon多边形

使用方法和Polyline类似，比较简单

// 将故宫的范围用多边形Polygon勾画出来
// 路径
var path = [
new google.maps.LatLng(39.921421297246326,116.38527605255129),
new google.maps.LatLng(39.92175042507842,116.39566156585695),
new google.maps.LatLng(39.91200757162273,116.39613363464358),
new google.maps.LatLng(39.911810067017406,116.39184210021975),
new google.maps.LatLng(39.90720146455565,116.39197084625246),
new google.maps.LatLng(39.907036865876215,116.39068338592531),
new google.maps.LatLng(39.911810067017406,116.39008257110598),
new google.maps.LatLng(39.91171131450119,116.38583395202639)
];
// 多边形参数
var polygonOptions = {
paths: path,
fillColor: “#f60”, // 填充色
fillOpacity: 0.3, // 填充色透明度
strokeColor: “#f00”, // 线条颜色黑色
strokeOpacity: 0.7, // 透明度 70%
strokeWeight: 5 // 宽度 5像素
};
var polygon1 = new google.maps.Polygon(polygonOptions);
polygon1.setMap(map); // 设置显示到map上

效果：

—————————– InfoWindow 信息窗口

示例

// 创建一个信息窗口，设置最大宽度为50
var infoWindow = new google.maps.InfoWindow({maxWidth:300});

// 在地图上双击时，打一个标记
google.maps.event.addListener(map, "dblclick", function(event){var marker = new google.maps.Marker();
marker.setMap(map);
marker.setPosition(event.latLng);// 点击标记时，打开信息窗口
google.maps.event.addListener(marker, "click", function(){var content = "<b>" + marker.getPosition().toUrlValue() + "</b><br/>";content += "<p>" + $("#textDiv").html() + "</p>";infoWindow.setContent(content);  // 设置信息窗口中的内容// 在map上的marker位置打开信息窗口infoWindow.open(map, marker);});
});

效果：

关于Google Map 叠加层之Polyline(折线)、Polygon(多边形)、InfoWindow(信息窗口)相关推荐

js添加多marker 高德地图_【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
Google Map apiv3叠加层
叠加层概述叠加层是地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动.叠加层表示的是"添加"到地图中以标明点.线.区域或对象集合的对象. Maps API 包含以下几种 ...
Google Maps JavaScript API V3 叠加层
注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本.该 API 的第 2 版已根据我们的弃用政策正式弃用.欢迎您将 ...
Google Map API 的基础使用
因为公司业务由国内市场到国际市场,有一些国际性业务的项目需要用到Google Map.项目完成后,把一些常用的方法写出来,供大家参考. 一.google地图基础显示 (1)引用google map j ...
2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...
Google Maps API V3 之绘图库信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
百度地图使用折线、多边形覆盖物绘制或编辑行政区域
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
记录：google map谷歌地图自定义叠加层overlay流程
Google Map自定义叠加层的实现 1.触发: // 返回结果的数组,拿到有效的值存进数组 let newArr = res.filter((item) => {return item.li ...

关于Google Map 叠加层之Polyline(折线)、Polygon(多边形)、InfoWindow(信息窗口)

关于Google Map 叠加层之Polyline(折线)、Polygon(多边形)、InfoWindow(信息窗口)相关推荐

最新文章

热门文章