關於GoogleMap的使用經驗

時間  2019-12-17
標籤 關於 googlemap 使用 經驗 简体版
原文   原文鏈接

獲取key:在網站白名單加上網址 容許全部就填*javascript

引入html

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

 

若是你是中國用戶 谷歌建議這樣引入java

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

 

能夠指定版本號canvas

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

 

不指定默認是實驗版本 v=3.expapi

使用限制數組

若是連續90天以上 天天地圖加載次數超過25000 谷歌就會找你談費用app

 

1.地圖控件ide

 

 

  • Zoom control ：顯示滑動條 或者 "+/-" 按鈕 控制縮放級別 默認顯示,在非觸摸設備顯示在左上角 在觸摸設備顯示在左下角
  • Pan control ：默認顯示,且顯示在左上角(非觸摸設備) 若是容許,能夠旋轉地圖
  • Scale control
  • MapType control : 默認顯示,在右上角
  • Street View control : 能夠經過拖動小人來開啓街景,默認顯示,在右上角
  • Rotate control  開啓45°實景圖纔會顯示(更多信息 45° Imagery) 默認顯示 在左上角
  • Overview Map control 默認顯示,在右下角,默認爲關閉狀態

 

代碼svn

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程