Google Map 形状显示

添加多段线

Polyline 构造函数带有一组用于指定线的 LatLng 坐标的 PolylineOptions,以及一组用于调整多段线视觉行为的样式。

Polyline 对象在地图上绘制为一系列直线线段。您可以在构建线时在 PolylineOptions 内指定线描边的自定义颜色、粗细和不透明度,也可在构建后更改这些属性。多段线支持下列描边样式:

  • strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。
  • strokeOpacity 指定一个介于 0.0 和 1.0 的数值,用于确定线颜色的不透明度。默认值为1.0
  • strokeWeight 指定线的宽度(单位:像素)。

多段线的 editable 属性指定用户是否可以编辑形状。同理,您也可以通过设置 draggable 属性来允许用户拖动线

所有的绘图都有 editable 属性和draggable 属性

移除多段线

如需移除地图中的多段线,请调用 setMap() 方法,并传递 null 作为其自变量。在下例中,flightPath 是一个多段线对象:

flightPath.setMap(null);

请注意,以上方法不会删除多段线,而只是从地图中移除多段线。如果您实际上是想删除多段线,则应先将其从地图中移除,然后将多段线本身设置为 null

检查多段线

多段线以 LatLng 对象数组形式指定一系列坐标。这些坐标决定线的路径。如需检索这些坐标,请调用 getPath(),后者将返回 MVCArray 类型的数组。您可以利用下列操作操纵和检查该数组:

  • getAt() 返回给定以零为起点索引值处的 LatLng
  • insertAt() 在给定以零为起点索引值处插入传递的 LatLng。请注意,该索引值处的任何现有坐标都将前移。
  • removeAt() 移除给定以零为起点索引值处的 LatLng

:您不能直接利用 mvcArray[i] 语法检索数组的第 i 个元素。您必须使用 mvcArray.getAt(i)

// This example creates an interactive map which constructs a polyline based on// user clicks. Note that the polyline only appears once its path property// contains two LatLng coordinates.

var poly;var map;

function initMap() {  map = new google.maps.Map(document.getElementById(‘map‘), {    zoom: 7,    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.  });

  poly = new google.maps.Polyline({    strokeColor: ‘#000000‘,    strokeOpacity: 1.0,    strokeWeight: 3  });  poly.setMap(map);

  // Add a listener for the click event  map.addListener(‘click‘, addLatLng);}

// Handles click events on a map, and adds a new point to the Polyline.function addLatLng(event) {  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate  // and it will automatically appear.  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.  var marker = new google.maps.Marker({    position: event.latLng,    title: ‘#‘ + path.getLength(),    map: map  });}

查看示例 (polyline-complex.html)

定制多段线

您可以向多段线添加符号形式的基于矢量的图像。您可以通过组合使用符号和 PolylineOptions 类对地图上多段线的外观进行充分的控制。请参阅符号,了解有关箭头虚线自定义符号动画符号的信息。

其他绘图都可以根据多线段的使用及方法来使用

-----------------------------------------------------华丽分割线( 以下为实例代码)--------------------------------------------------------------

// 划折线
var flightPlanCoordinates = [
{lat: 36.075620815001415, lng: 120.43020844459534},
{lat: 36.074025246504746, lng: 120.4285454750061},
{lat: 36.069949462636, lng: 120.43118476867676},
{lat: 36.06604691846644, lng: 120.42285919189453},
{lat: 36.074025246504746, lng: 120.4139757156372},
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: ‘#FF0000‘,
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

var workStart = new google.maps.Marker({
position: flightPlanCoordinates[0],
label: "起",
title: "上班起点",
map: map
});
var workEnd = new google.maps.Marker({
position: flightPlanCoordinates[(flightPlanCoordinates.length-1)],
label: "终", // label 只显示第一个字符
title: "上班终点",
map: map
});

// 绘制多边形
var triangleCoords = [
{lat: 36.06602136399105, lng: 120.35249282982409},
{lat: 36.082132409147086, lng: 120.42076576221541},
{lat: 36.10016285436, lng: 120.3873546955059},
{lat: 36.06602136399105, lng: 120.35249282982409},
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: ‘#32CD32‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#3CB371‘,
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// 绘制矩形
var rectangle = new google.maps.Rectangle({
draggable: true, // 是否可拖动
editable: true, // 是否可编辑
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
bounds: {
north: 36.114595,
south: 36.104595,
east: 120.369731,
west: 120.349731
}
});
// 绘制圆形
var cityCircle = new google.maps.Circle({
draggable: true, // 是否可拖动
editable: false, // 是否可编辑
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
center: qingdao,
radius: 600 // 单位米
});

时间: 2024-10-17 20:47:13

Google Map 形状显示的相关文章

如何将经纬度利用Google Map API显示C# VS2005 Sample Code

原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上,这个做法有两种,最简单的就是直接传值到Google Maps上. 举例来说,当我们知道经纬度后,只要将数据套到以下网址即可. http://maps.google.com/maps?q=25.048346%2c121.516396 在参数q=后面,就可以加上经纬度了. 25.048346是Lati

在Google Map中显示多个Marker并画出Polygon

有时需要在地图显示多个位置并画出多段线 实现后截图: HTML: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="h

Google Map和桌面组件 Android开发教程

本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开发和网络开发等基础知 识,而且还深入阐述了传感器.语音识别.桌面组件开发.Android游戏引擎设计.Android应用优化.OpenGL等高级知识.另外,本书还全面 介绍了如何利用原生的C/C++(NDK)和Python.Lua等脚本语言(Android Scripting Environment)来开发A

【转】Android Google Map API使用的八个步骤

Android Google Map API使用的八个步骤 本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何在地图上,用第三方的组件库,实现气球式显示若干指定位置的功能. 步骤1 创建新的Android 工程 首先打开eclipse新建立一个Android 工程,其中相关参数设置如下: Project name:MallFinder Build 

google map api v3

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function killerrors() { return true; } window.onerror = killerrors; </script> <meta name="viewport" content="initial-scale=1.0, user-sc

基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)

html 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Geolocation获取地理位置,配合Google Map API

GPS与Google Map定位系统

GPS与Google Map定位系统 以MyMap服务系统为实例,介绍Android Google Map.Android定位服务.案例重构,采用Java开发GPS与Google Map定位应用程序. Google地图是Google公司提供的电子地图服务,能提供3种视图:一是矢量地图,可提供行政区.交通及商业信息:二是不同分辨率的卫星照片:三是地形视图,可以用以显示地形和等高线.使用Google Map的服务编写应用程序,需要申请Google Map Android API Key.Google

在Google Map中使用地址获取坐标(适用小数据量)

近期手上有个95条数据的地址信息,想把地址转换成经纬度坐标,叠加在底图上.ESRI的online作为专业的云平台,号称提供地理编码服务,可能使用自己的数据制作Web map,于是转成CSV后试了下,结果只有4条记录转换成坐标了,并且都偏离了一个省的范围,基本上不可用.后来想在google earth上试下,使用地址搜索,也不知道是服务器慢,还是什么其他原因,earth的搜索功能简直处于瘫痪状态,打一个地址,10分钟能反应过来,结果基本上是找不到.无奈之下,又试了试google Map,Map上是

初识SFDC创建一个google map(最基础版本)

google map 目前我只会用js创建,好处是不需要申请google地图钥匙直接就可以用: 有一点必须强调,浏览器必须是IE <apex:page > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://