谷歌地图的API应用

基础设置

  // 配置地图初始参数setMapOptions() {let mapOptions = {mapTypeId: google.maps.MapTypeId.ROADMAP,gestureHandling: 'greedy', // 地图上的手势mapTypeControl: false, // Map类型控件mapTypeControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},clickableIcons: false, // 地图图标不可点击streetViewControl: false, // 街景街景小人物fullscreenControl: false, // 全屏控件panControl: false, // 平移控件--没效果panControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},zoomControl: true, // 地图缩放级别zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}}return mapOptions},// 创建中心点centerZoom(map, point, zoom) {map.setCenter(point)map.setZoom(zoom)},// 获取点坐标createPoint(lng, lat) {// lat:纬度，lng:经度return new google.maps.LatLng(lat, lng) // 顺序和其它地图api的不一样},// 切换城市toggleCity(args) {const {map, cityName, zoom} = {...args}let geocoder = new google.maps.Geocoder()geocoder.geocode({'address': cityName}, function(results, status) {if (status === google.maps.GeocoderStatus.OK) {let point = results[0].geometry.location// results数组里有很多有用的信息，包括坐标和返回的标准位置信息map.setCenter(point)map.setZoom(zoom)} else {console.warn('Address resolution error!!!')}})},

信息窗

  // 创建信息窗createInfoWindow() {let infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -40),maxWidth: 345,disableAutoPan: true // 打开时禁用自动平移})return infoWindow},// 打开信息窗openInfoWindow(map, infoWd, point) {infoWd.setPosition(point)infoWd.open(map)},// 关闭信息窗closeInfoWindow(map, infoWd) {infoWd && infoWd.close()},

覆盖物

  // 创建实时路况图层createTraffic() {return new google.maps.TrafficLayer()},// 加载markerwithlabel文件getMarkerWithLabel(googleMaps) {// 在npm上查询到markerwithlabelMarkerWithLabel = require('./js/markerwithlabel')(googleMaps)},// 创建markercreateMarker(args) {const { point, iconPath, isLabelMarker = false } = {...args}let marker// 默认是没有label的marker，如需要有lable的marker配置传入的参数isLabelMarker为true即可if (isLabelMarker) {marker = new MarkerWithLabel({position: point,icon: iconPath,raiseOnDrag: true,labelContent: '', // label的内容labelAnchor: new google.maps.Point(-25, 32),labelClass: 'google-labels', // the CSS class for the labellabelStyle: {'color': '#666','background-color': '#fff'},labelInBackground: false})// 给marker添加静态方法，用于设置label的内容、样式marker.setText = function (labelTxt) {marker.labelContent = labelTxt}marker.setStyle = function (styleOpts) {marker.labelStyle = {...marker.labelStyle, ...styleOpts}}} else {marker = new google.maps.Marker({icon: iconPath,position: point})}return marker},

圆形/矩形/多边形/折线

  // 绘制圆createCircle(point, radius) {let circle = new google.maps.Circle({center: point, // 圆心位置radius: radius, // 半径fillColor: '#1989fa', // 圆形填充颜色strokeWeight: 2, // 圆形边线的宽度strokeColor: '#1989fa', // 圆形边线颜色fillOpacity: 0.3 // 圆形填充的透明度// strokeOpacity: 0.3 // 圆形边线的透明度})return circle},// 绘制矩形createRectangle(pointObj) {let rectangle = new google.maps.Rectangle({bounds: pointObj,editable: false // 设置是否可编辑})return rectangle},// 绘制多边形createPolygon(pointArr) {let polygon = new google.maps.Polygon({path: pointArr,fillColor: '#1989fa', // 圆形填充颜色strokeWeight: 2, // 圆形边线的宽度strokeColor: '#1989fa', // 圆形边线颜色fillOpacity: 0.3 // 圆形填充的透明度})return polygon},// 绘制折线createPolyline(pointArr) {let polyline = new google.maps.Polyline({path: pointArr,geodesic: true,strokeColor: '#B89AE5',strokeWeight: 4,strokeOpacity: 1})return polyline},

鼠标绘制工具

drawingManager(map) {// https://developers.google.com/maps/documentation/javascript/drawinglayerlet styleOptions = {strokeColor: '#1989fa', // 边线颜色。fillColor: '#6130CA', // 填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 2, // 边线的宽度，以像素为单位。// strokeOpacity: 0.8,     // 边线透明度，取值范围0 - 1。fillOpacity: 0.2, // 填充的透明度，取值范围0 - 1。strokeStyle: 'solid', // 边线的样式，solid或dashed。clickable: false, // 是否可点击editable: false // 是否可编辑}let drawingManager = new google.maps.drawing.DrawingManager({map: map,// drawingMode: google.maps.drawing.OverlayType.MARKER, // 绘制模式 CIRCLE MARKER POLYGON POLYLINE RECTANGLEdrawingControl: false, // 绘图控件的启用drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER,drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']},rectangleOptions: styleOptions, // 矩形的样式circleOptions: styleOptions, // 圆形的样式polygonOptions: styleOptions, // 多边形的样式polylineOptions: styleOptions // 线的样式})return drawingManager
}

计算类

  // 判断点是否在可视区域内pointInVisibleArea(map, point) {let flag = falselet gpsamap = pointlet bs = map.getBounds() // 获取可视区域let bssw = bs.getSouthWest() // 可视区域左下角let bsne = bs.getNorthEast() // 可视区域右上角let gpsamap_lon = gpsamap.lng()let gpsamap_lat = gpsamap.lat()if ((bssw.lng() <= gpsamap_lon && gpsamap_lon <= bsne.lng()) && (bssw.lat() <= gpsamap_lat && gpsamap_lat <= bsne.lat())) {flag = true}return flag},// 获取两点之间的距离getDistance(startPoint, endPoint) {return google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)},// 获取多边形的面积getComputeArea (pointArr) {return google.maps.geometry.spherical.computeArea(pointArr)},// 根据坐标点自动缩放setViewArea(map, bounds) {map.fitBounds(bounds)},

处理谷歌地图marker旋转

/*
* 功能：使用canvas旋转图标，并生成路径
* 参数：options（Object）
* 用途：处理谷歌地图marker旋转
* */
const setRotation = (options) => {return new Promise((resolve, reject) => {let w = options.width || 40let h = options.height || 40let canvas = document.createElement('canvas')canvas.width = wcanvas.height = hlet ctx = canvas.getContext('2d')let angle = options.deg ? options.deg * Math.PI / 180 : 0let centerX = w / 2let centerY = h / 2let dataURL = ''let img = new Image()img.src = options.urlimg.onload = function() {ctx.clearRect(0, 0, w, h)ctx.save()ctx.translate(centerX, centerY)ctx.rotate(angle)ctx.translate(-centerX, -centerY)ctx.drawImage(img, centerX/2, 0)ctx.restore()dataURL = canvas.toDataURL('image/png')resolve({size: options.size,origin: options.origin,url: dataURL})}})
}

谷歌地图的API应用相关推荐

谷歌地图JavaScript API第3版地理编码服务
地理编码服务概观地理编码请求地理编码响应地理编码结果地址组件类型状态代码反向地理编码视口偏置区码偏置概观地理编码地址(如"1600剧场百汇,山景,CA")转换 ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
GoogleMap——谷歌地图Api的使用
最近公司想要在国外也使用地图功能,而我们国内使用的是高德地图,国外客户需要用谷歌地图,所以去了解了一下谷歌地图的使用,这里记录一下. 准备工作首先你得有一个谷歌账号,然后得用一点小魔法,去谷歌地图官 ...
谷歌地图开发：地理编码和反地理编码
谷歌地图Geocoding说明:内容主要来自谷歌官网的文档,谷歌地图android api地理和反地理编码反应迟钝内容有时不准确,这里使用的googlemap的webapi接口.嗯,需要vpn这个不多 ...
C#版谷歌地图下载器设计与实现
关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...
[转载]谷歌地图下载
关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...
谷歌地图API位置请求_Google Maps API
谷歌地图API位置请求 Google maps api 以xml格式传回请求的地址:http://maps.google.com/maps/api/geocode/xml?latlng=39.910 ...
python 谷歌地图api_《Python网络编程》学习笔记--使用谷歌地理编码API获取一个JSON文档...
Foundations of Python Network Programing,Third Edition <python网络编程>,本书中的代码可在Github上搜索fopnp下载本 ...
html5谷歌地图,谷歌地图API和HTML 5
我是新来的Stackoverflow,所以要善良.谷歌地图API和HTML 5 我一直在使用谷歌地图api和一些其他的东西来制作游戏的项目.这个想法是使用地理定位数据来清除地图上的雾(当你开始时地图充 ...
谷歌地图api的使用一
一.注册账号使用谷歌地图api,需要注册一个谷歌账号,并创建一个你的项目,在项目中开通你所需要的api. 谷歌地图api网址:https://cloud.google.com/maps-platfo ...

谷歌地图的API应用

基础设置

信息窗

覆盖物

圆形/矩形/多边形/折线

鼠标绘制工具

计算类

处理谷歌地图marker旋转

谷歌地图的API应用相关推荐

最新文章

热门文章