google map初次使用总结

原创
2017/01/23 11:27
阅读数 3K

前言

      最近项目中需要使用google地图相关功能,如地址定位、地址划分等,为了使下次使用google地图的相关功能时少走弯路、故把过程中遇到的问题总结了一下。也给初次使用google地图的小伙伴做参考。

使用过程

        一、申请api key

        具体过程请参照官网https://developers.google.cn/,去年12月份谷歌开发者平台面向中国开发了部分功能,就不需要翻墙了。

       二、引入api

<script src="http://maps.google.cn/maps/api/js?language=zh-TW&v=3.exp&key=AIzaSyCoy86qvSNN4A1nEA5Kg-jVdNNjjyVbyFI&libraries=places,drawing,geometry" type="text/javascript"></script>

    说明:想使用google map中的api必须先引入脚本,其中v表示版本、key就是第一步申请的api key,

如果要使用到地址搜索、划分区域等功能,则需要加入libraries=places,drawing,geometry引入相关控件。分别为地址查询库、绘图库、函数库。

    三、初始化map

$(function(){
    var mapProp = {
      center:new google.maps.LatLng(22.1223232, 123.32322331),
      zoom:17,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
      };
    map=new google.maps.Map(document.getElementById("map"),mapProp);

});

html代码

<div  id="map" ></div>

部分属性说明:center,表示地图的中心位置。zoom表示地图缩放比例,越大显示的范围越小。mapTypeId.ROADMAP 用于显示默认的道路地图视图。这也是默认地图类型,

 

MapTypeId.SATELLITE 用于显示 Google Earth 卫星图像。
MapTypeId.HYBRID 用于同时显示正常视图和卫星视图
MapTypeId.TERRAIN 基于地面信息显示物理地图。

通过这三步就已经把google地图初始化好了。这个过程中有部分属性想了解可以查看api。

    四、项目中使用到的功能

1、通过搜索地址,自动加载地址,勾选之后自动定位到地图中的位置。同时获取地址的详细信

function initAutocomplete() {
  var input = document.getElementById('autocomplete');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        url: place.icon,
        size: new google.maps.Size(100, 100),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(50, 50)
      };
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

     if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }   
      alert(place.formatted_address+"地图对应的idplace_id-----"+place.place_id);
      alert(place.formatted_address+"的纬度---"+place.geometry.location.lat());
      alert(place.formatted_address+"的经度-----"+place.geometry.location.lng());
    });
    map.fitBounds(bounds);
    map.setZoom(18);
  });
}

说明:使用自动搜索功能,需要引入api时加上libraries=places。

2、多边形绘画区域功能,同时记录多边形所有节点的坐标,判断一个点是否在一个多边形内部。

function showOrHidedrawingManager(thisObj,index){
            var drawingManager = new google.maps.drawing.DrawingManager({
                   drawingMode: google.maps.drawing.OverlayType.POLYGON,
                   drawingControl: false,
                   editable : true,
                   drawingControlOptions: {
                   position: google.maps.ControlPosition.TOP_CENTER,
                   drawingModes: [
                      google.maps.drawing.OverlayType.POLYGON,
                   ]
            },

            //多边行属性,颜色、边框、透明度等。
            polygonOptions: {
              fillColor: areaData[index].color,
              fillOpacity: 0.5,//填充透明度
              strokeColor:areaData[index].color,
              strokeWeight: 2,
              editable: true,
              zIndex: 1
            }
          });
          drawingManager.setMap(map);

//监听事件 ,当绘图完成时,存储多边形。
          google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
              var coordinate = new google.maps.LatLng(22.28255,114.1577184);  //地图上的一个点

            //判断一个点是否在一个多边形中。
              var isWithinPolygon = google.maps.geometry.poly.containsLocation(coordinate, polygon)
              alert("判断是否在多边形中---环球大厦-------------"+isWithinPolygon);
              var vertices = polygon.getPath();//遍历所有的多边形节点。
             // polygon.getPaths();//Retrieves the paths for this polygon.  这里很奇怪,getPaths结果只有一个值。
              for (var i =0; i < vertices.getLength(); i++) {
                var xy = vertices.getAt(i);
                alert("循环多边形的每个节点---经度--"+xy.lng()+"纬度----"+xy.lat());
              } 
            });
    }
}

说明:获取多边形所有节点polygon.getPath();而不是polygon.getPaths();,经测试polygon.getPaths();只获取第一个节点,应该是api出问题了,估计后面会更新。

获取多边行节点主要为了可以存储这个多边形,方便数据回显。

绘图存在多种类型:多边形、矩形、圆等,通过drawingMode: google.maps.drawing.OverlayType.POLYGON,指定。CIRCLE,Rcetangle等。

3、多边形回显示

回显在初始化地图时,通过获取一个一个的点集合,组装成图像 ,在地图中显示出来。

var triangleCoords = [
          {lat: 22.28218, lng: 114.1577},
          {lat: 22.28432, lng: 114.1547},
          {lat: 22.27678, lng: 114.1537},
          {lat: 22.27567, lng: 114.1536},
          {lat: 22.27467, lng: 114.1645}
      ];

var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#0088cc',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#0088cc',
        fillOpacity: 0.35
      });

 bermudaTriangle.setMap(map);

多个多边行,就多次这样处理。

还有很多控件没有使用到,等以后使用到了在进行更新。

这个过程中还是需要多查看api,api地址https://developers.google.cn/maps/documentation/javascript/3.exp/reference,现在不需要翻墙还是方便很多的。里面也有一些例子可以参考。

目前网页版的api查询不怎么方便,等以后研究好在更新。

展开阅读全文
打赏
1
16 收藏
分享
加载中
更多评论
打赏
0 评论
16 收藏
1
分享
返回顶部
顶部