关于GoogleMap的使用经验 - wilsonreis

tangyongjie

获取key:在网站白名单加上网址 允许所有就填*

引入

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&key="></script>

 

如果你是中国用户 谷歌建议这样引入

<script type="java/script" src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key="></script>

 

可以指定版本号

<script type="java/script" src="http://maps.google.cn/maps/api/js?v=3.20&region=cn&language=zh-CN&key="></script>

 

不指定默认是实验版本 v=3.exp

使用限制

如果连续90天以上 每天地图加载次数超过25000 谷歌就会找你谈费用

 

1.地图控件

 

 

  • Zoom control ：显示滑动条 或者 "+/-" 按钮 控制缩放级别 默认显示,在非触摸设备显示在左上角 在触摸设备显示在左下角
  • Pan control ：默认显示,且显示在左上角(非触摸设备) 如果允许,可以旋转地图
  • Scale control
  • MapType control : 默认显示,在右上角
  • Street View control : 可以通过拖动小人来开启街景,默认显示,在右上角
  • Rotate control  开启45°实景图才会显示(更多信息 45° Imagery) 默认显示 在左上角
  • Overview Map control 默认显示,在右下角,默认为关闭状态

 

代码

function initialize() {
　　var mapOptions = {
　　zoom: 18,
　　center: new google.maps.LatLng(36.964645, -122.01523),
　　panControl: true,
　　zoomControl: true,
　　scaleControl: true,
　　mapTypeControl:true,
　　streetViewControl:true,
　　rotateControl:true,
　　overviewMapControl:true
}
var map = new google.maps.Map(document.getElementById(\'map-canvas\'),
mapOptions);
}

google.maps.event.addDomListener(window, \'load\', initialize);

 

 

可以通过setOptions()方法动态设置地图控件

 

 2.地图类型

每一个地图类型都必须包含几个处理检索和释放瓷砖的方法 以及定义它的视觉行为

可以使用基本的地图类型 (basic map types) 完全自定义地图类型(custom map types) 或者是个性化地图(Styled Maps)(在基本的地图类型上定义样式)

完全自定义地图类型需要明白地图映射表(Map Type Registry)

 

基本类型

地图的种类

  • MapTypeId.ROADMAP 默认值 街道图
  • MapTypeId.SATELLITE 卫星图
  • MapTypeId.HYBRID 混合图
  • MapTypeId.TERRAIN 地形图

通过设置mapTypeId设置地图种类 有两种设置方法

初始设置

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions)

动态设置

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

45°视角

仅卫星图和混合图且在较高的放大级别支持 可以通过Pan Control旋转 这个时候Rotate control会出现在PanControl和ZoomControl之间

旋转控制只允许顺时针旋转 视图默认是东北方向 如果缩小视图将会推出45°视角 45°视角只支持部分城市

可以通过Map类的setTile(0)关闭45°视角 setTile(45)开启

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(36.964645, -122.01523),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById(\'map-canvas\'), mapOptions);
  map.setTilt(45);
}

google.maps.event.addDomListener(window, \'load\', initialize);
View example (aerial-simple.html).

 

The Map\'s getTilt() method will always reflect the current tilt being shown on the map; if you set a tilt on a map and then later remove that tilt (by zooming the map out, for example), the map\'s getTilt() method will return 0.

 

如果关闭45°视角 就可以指定相对于东方的一个基本方向 

下面例子 展示了自动变换视角

var map;
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(45.518970, -122.672899),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    heading: 90,
    tilt: 45
  };
  map = new google.maps.Map(document.getElementById(\'map-canvas\'), mapOptions);
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we\'re showing aerial imagery
  if (map.getTilt() != 0) {
    window.setInterval(rotate90, 3000);
  }
}

google.maps.event.addDomListener(window, \'load\', initialize);
View example (aerial-rotation.html).

 

修改地图种类标记

mapTypeId是一个字符串用来关联地图地图种类的唯一标识符 每一个map对象拥有一个可用的地图种类标记

不要直接读取地图种类标记 你可以通过添加关联了地图种类标记的自定义地图类型来修改原来的地图种类标记

但不能修改基本的地图标记 尽管你可以通过mapTypeControlOptions移除它

 

下面的例子中 mapTypeControlOptions只有两种地图类型

The following code sets the map to show only two map types in the map\'s mapTypeControlOptions and modifies the registry to add the association with this identifier to the actual implementation of the MapType interface. Note: we purposefully did not document the creation of the custom map type itself in the previous code. See Styled Maps orCustom Map Types below for information on constructing a map type.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom \'mymap\'.
// Note that because this is simply an association, we
// don\'t need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = \'mymaps\';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate \'mymap\' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

个性化地图

有两种方法

1.设置MapOptions对象的style属性 (在地形图和卫星图 基本的图像不会受影响除了街道 图标等 遵循样式准则)

2.新建StyledMapType的地图新风格 可以被map type control选择 

Both approaches take an array of MapTypeStyles, each of which is composed ofselectors and stylers. Selectors specify what map components should be selected for styling, while stylers specify the visual modification of those elements.

 

有两种思想

地图特征(Map features): 可以在地图上标记的街道 标签

样式(Stylers): 可以被应用在地图特征的颜色和可见的元素

Map features 和 stylers 包括在一个样式数组中, 传入MapOptions对象中,或者StyledMapType构造器中.该数组采用以下的格式

var stylesArray = [
  {
    featureType: \'\',
    elementType: \'\',
    stylers: [
      {hue: \'\'},
      {saturation: \'\'},
      {lightness: \'\'},
      // etc...
    ]
  },
  {
    featureType: \'\',
    // etc...
  }
]

Map features

地图由一些使用MapTypeStyleFeatureType的特征组成,例如街道,公园 特征类型形成一个分类树 所有的一切都是它的根

地图中的所有特征列表都记录在api文档中 指定特性都将选择所有地图元素

features使用这样的语法,feature:\'feature\'

{
  featureType: "road"
}

一些特征类型包含使用点表示法指定的子类(例如landscape.natural或road.local)。如果父特征（道路，例如）是指定的，那么风格也会应用到这个选择将适用于它的孩子.

此外，在地图上有不同的元素的一些特征。一路，例如，不仅包括图形线（几何）的地图上，而且文字表示其名称（标签）。元素内的特点是通过指定一个类类型maptypestyleelementtype选择。下面的元素类型的支持：

  • all (default) selects all elements of that feature.
  • geometry selects all geometric elements of that feature.
    • geometry.fill selects only the fill of the feature\'s geometry.
    • geometry.stroke selects only the stroke of the feature\'s geometry.
  • labels selects only textual labels associated with that feature.
    • labels.icon selects only the icon displayed within the feature\'s label.
    • labels.text selects only the text of the label.
    • labels.text.fill selects only the fill of the label. The fill of a label is typically rendered as a colored outline that surrounds the label text.
    • labels.text.stroke selects only the stroke of the label\'s text.

接下来的例子选择所有的当地道路的标签

{
  featureType: "road.local",
  elementType: "labels"
}

Stylers

 stylers是一个MapTypeStyler类型的地图样式 支持一下参数：

hue

lightness 浮点型 值为-100到100 元素的百分比变化的亮度 负值增加暗度(-100为黑色 100为白色) 

saturation 浮点型 值为-100到100 显示的百分比变化强度的基本颜色,适用于元素。

gamma 浮点型 值为0.01到10

 

  • gamma (a floating point value between 0.01 and 10.0, where 1.0 applies no correction) indicates the amount of gamma correction to apply to the element. Gammas modify the lightness of hues in a non-linear fashion, while not impacting white or black values. Gammas are typically used to modify the contrast of multiple elements. For example, you could modify the gamma to increase or decrease the contrast between the edges and interiors of elements. Low gamma values (< 1) increase contrast, while high values (> 1) decrease contrast.
  • invert_lightness (if true) simply inverts the existing lightness. This is useful, for example, for quickly switching to a darker map with white text.
  • visibility (on, off, or simplified) indicates whether and how the element appears on the map. A simplified visibility removes some style features from the affected features; roads, for example, are simplified into thinner lines without outlines, while parks lose their label text but retain the label icon.
  • color (an RGB hex string) sets the color of the feature.
  • weight (an integer value, greater than or equal to zero) sets the weight of the feature, in pixels. Setting the weight to a high value may result in clipping near tile borders.

The color of a feature may be set with either a single color value, or modified by combination of hue, saturation and lightness. These properties represent two different methods of representing color but it\'s possible to combine the two methods. For example, you might set a color and then alter the saturation and lightness to fade out the map when displaying a dialog. For more information on color models, see The Hue, Saturation, Lightness Model documentation.

Styler rules are applied in the order they appear within the MapTypeStyler array. Do not combine multiple operations into a single styler operation; instead, define each operation as a separate entry in the styler array. Order is important, as some operations are not commutative. Features and/or elements that are modified through styler operations (usually) already have existing styles; the operations act on those existing styles, if present.

The Hue, Saturation, Lightness Model

Styled maps use the Hue, Saturation, Lightness (HSL) model to denote color within the styler operations. These operations to define color are common within graphic design.Hue indicates the basic color, saturation indicates the intensity of that color, andlightness indicates the relative amount of white or black in the constituent color.

While hue takes an HTML hex color value, it only uses this value to determine the basic color, not its saturation or lightness, which are indicated separately.

RGB hue values which consist of equal parts Red, Green and Blue — such as "#000000" (black) and "#FFFFFF" (white) and all the pure shades of gray — do not indicate a hue whatsoever, as none of those values indicate an orientation in the HSL coordinate space. To indicate black, white or gray, you must remove all saturation(set the value to -100) and adjust lightness instead.

Additionally, when modifying existing features which already have a color scheme, changing a value such as hue does not change its existing saturation orlightness.

 

例子

亮蓝

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

亮绿

stylers: [
  { color: "#99FF33" }
]

删除所有颜色的特性,无论其起始颜色: 

stylers: [
  { visibility: "off" }
]

Style Array Example

The map feature selectors and the styler rules are combined into a style array. You can target any combination of features can be targeted in a single array; however, the number of styles that you can apply at once is limited. If your style array exceeds the maximum number of characters then no style will be applied.

The following example turns all map features to gray, then colors arterial road geometry in blue, and hides business labels completely:

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

 

改变默认的地图风格

改变地图风格(改变标签和街道在地形图和卫星图也有效果) 在Map的MapOptions设置style参数 也可以在构造的时候调用setOption方法

下面的例子可以减少饱和特性和禁用道路上的标签

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

参见MapFeatures 和 Stylers

 

Creating a StyledMapType

You can create a new map type to which to apply styles, by creating aStyledMapType and passing the feature and styler information to the constructor. This approach does not affect the style of the default map types.

To create a new map type:

  1. Create your array of styles. See Map Features and Stylers for instructions.
  2. Create a new google.maps.StyledMapType object, passing it the array of styles, as well as a name for the new map type.
  3. Create your map object and, in the map options, include an identifier for the the new map type in the mapTypeIds array (which is a property of themapTypeControlOptions object).
  4. Associate the identifier in the last step with the new styled map.
  5. Set the map to use the new map type.
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, \'map_style\']
    }
  };
  var map = new google.maps.Map(document.getElementById(\'map-canvas\'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set(\'map_style\', styledMap);
  map.setMapTypeId(\'map_style\');
}

 

The Styled Map Wizard

Creating styles by hand and testing your code to see how they look is potentially time-consuming. Instead, you can use the Styled Map Wizard to set up the JSON for your map\'s styles. The wizard allows you to select features and their elements, apply operations to those features, and save the styles to JSON, which you can copy and paste into your application.

自定义地图(高级功能 暂不研究)

Custom Map Types

The Google Maps JavaScript API V3 now supports the display and management of custom map types, allowing you to implement your own map imagery or tile overlays.

Several possible map type implementations exist within the V3 API:

  • Standard tile sets consisting of images which collectively constitute full cartographic maps. These tile sets are also known as base map types. These map types act and behave like the existing default map types: ROADMAP,SATELLITE, HYBRID and TERRAIN. You can add your custom map type to a Map\'s mapTypes array to allow the UI within the Maps API to treat your custom map type as a standard map type (by including it in the MapType control, for example).
  • Image tile overlays which display on top of existing base map types. Generally, these map types are used to augment an existing map type to display additional information and are often constrained to specific locations and/or zoom levels. Note that these tiles may be transparent, allowing you to add features to existing maps.
  • Non-image map types, which allow you to manipulate the display of map information at its most fundamental level.

Each of these options relies on creating a class that implements the MapType interface. Additionally, theImageMapType class provides some built-in behavior to simplify the creation of imagery MapTypes.

Before we explain classes which implement MapType, it is important to understand how Google Maps determines coordinates and decides which parts of the map to show. You will need to implement similar logic for any base or overlay MapTypes.

………………

 

可以实现用户登录功能 从而保存标记地点

https://developers.google.com/maps/documentation/javascript/signedin

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode