google map初次使用总结

最新推荐文章于 2023-01-06 14:54:38 发布

weixin_33744854

最新推荐文章于 2023-01-06 14:54:38 发布

阅读量537

点赞数

原文链接：https://my.oschina.net/u/1581846/blog/829568

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

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

使用过程

一、申请api key

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

二、引入api

说明：想使用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代码

部分属性说明：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());
});

     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查询不怎么方便，等以后研究好在更新。

转载于:https://my.oschina.net/u/1581846/blog/829568