Google Map API 的基础使用
因为公司业务由国内市场到国际市场,有一些国际性业务的项目需要用到Google Map。项目完成后,把一些常用的方法写出来,供大家参考。
一、google地图基础显示
(1)引用google map js资源
<!--国内可用-->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=*****"></script>
<!--国外可用-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=*****"></script>
tips:要正常使用google map 的各项功能,需要用google账号申请一个API key,反正我当时申请key时花费了不少时间,申请google邮箱账号时PC端不行,在移动端申请申请时又提示手机号码无效,各种坑。
(2)在html文件中定义一个盒子
<div id="googleMap"></div>
tips:如果要全屏展示地图,需要设置改盒子宽高都为100%。
(3)初始化地图
// 地图中心坐标var myCenter = {lat: '30.65735',lng: '104.0658'};var myLatLng = new google.maps.LatLng(myCenter.lat, myCenter.lng);var myOptions = {zoom: 15,center: myLatLng,mapTypeId: google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), myOptions);
效果如下图(左一)
二、自定义信息窗口、自定义图标以及自定义控件
// 自定义Marker标记点
var marker = new google.maps.Marker({position: myLatLng,icon: '../car.png', // 如果为空则显示默认的图标map: map
});// 自定义InfoWindow信息窗口
htmlWindow = "<div class='wrapBox'>\<div>IMEI: " + imei + "</div>\<div>Address:<span id='map-address'>" + pointToAddress(myCenter.lat, myCenter.lng) + "</span>" + info + "</div>\<div>Speed:" + speed + " km/h</div>\<div>Time:" + toDate(2018-12-17 16:12:50) + "</div>\</div>";var infowindow= new google.maps.InfoWindow({content: htmlWindow,disableAutoPan:true //设置为true时可禁用自动平移功能
});//打开信息窗体
infowindow.open(map, marker);//marker点事件,点击关闭信息窗体
marker.addListener('click', function() {infowindow.close();
});//监听X关闭按钮事件
google.maps.event.addListener(infowindow,"closeclick", function(){infowindow.close();
});
自定义标记和自定义信息窗口比较简单,效果如上图(中)。如果我们要改变地图默认的控件位置或需要自定义控件怎么办?接着往下看。
googl map默认开启的控件有:
mapTypeControl // 地图类型控件
zoomControl //地图缩小放大控件
streetViewControl //小黄人街景控件
fullscreenControl //全屏控件
默认没有开启的还有panControl、scaleControl、overviewMapControl、rotateControl:true等
// 关闭地图类型控件,打开缩小放大控件并设置其位置为坐下方
var myOptions2 = {zoom: 15,center: myLatLng,mapTypeControl: false,zoomControl: true,zoomControlOptions: {style:google.maps.ZoomControlStyle.SMALL,position:google.maps.ControlPosition.LEFT_BOTTOM}
};
其中,所有控件都有position属性,代表控件的位置,包括的选项有:OTTOM、BOTTOM_CENTER、BOTTOM_LEFT、BOTTOM_RIGHT、CENTER、LEFT、LEFT_BOTTOM、LEFT_CENTER、LEFT_TOP、RIGHT、RIGHT_BOTTOM、RIGHT_CENTER、RIGHT_TOP、TOP、TOP_CENTER、TOP_LEFT、TOP_RIGHT。记不住没有关系,你不妨console.log(google.maps.ControlPosition)试试。
而只有部分控件有style属性,而且各不相同。
// 自定义控件样式
function HomeControl(controlDiv, map) {controlDiv.style.padding = '5px';var controlUI = document.createElement('div');controlUI.style.backgroundColor = '#ffffff';controlUI.style.border='1px solid #cccccc';controlUI.style.cursor = 'pointer';controlUI.style.textAlign = 'center';controlUI.title = 'my title';controlDiv.appendChild(controlUI);var controlText = document.createElement('div');controlText.style.fontFamily='Arial,sans-serif';controlText.style.fontSize='14px';controlText.style.height = '50px';controlText.style.width = '50px';controlText.innerHTML = '<b><span>105</span><label>km/h</label><b>';controlUI.appendChild(controlText);// 自定义控件的点击事件:google.maps.event.addDomListener(controlUI, 'click', function() {alert('111');});
}// 自定义控件
function myControl() {var homeControlDiv = document.createElement('div');var homeControl = new HomeControl(homeControlDiv, map);homeControlDiv.index = 1;map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
}google.maps.event.addDomListener(window, 'load', myControl);
默认空间的位置调整和自定义控件完成,效果如上图(右一)。
三、地址解析
// 地址解析方法
function pointToAddress(lat, lng, backcall) {// 实例化Geocoder服务用于解析地址var geocoder = new google.maps.Geocoder();// 地理反解析过程// 请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度geocoder.geocode({ location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) {if (status == google.maps.GeocoderStatus.OK) {backcall(results[0].formatted_address);} else {console.log(":error " + status);}});
}// 在需要解析的地方调用方法
pointToAddress(myCenter.lat, myCenter.lng, function (address) {// 获得地址console.log(address);
});
我们看到地图上控件名称显示的是中文,如果用户手机系统是英文,地图也会自动切换为英文。暂时更新到这里,关于google map实现轨迹回放请前往博主的另外一篇文章。
Google Map API 的基础使用相关推荐
- Google Map API 开发基础--01
本章内容将针对如何使用Google Maps API中各个接口进行详细阐述,将采用实例加详解的方式,介绍Google Maps每个类的实际用途和一些WebGIS的开发技巧.在阅读完本章之后,我们希望开 ...
- Google Map 开发笔记——基础篇(Javascript )
Google Map 开发笔记--基础篇 说明: 一.使用入门: 1.在您需要显示地图的 html 页面嵌入这段 script 2.地图 DOM 元素 3.初始化地图 二.地图画点.线.面 1.标记( ...
- 主流电子地图API比较 google map api, mapabc ,yahoo地图
主流电子地图API比较 Google Maps API : Google Maps API 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中.API ...
- Google Map API v2的定位
昨天刚开始看LBS相关的东西,搜了下发现几个问题:一个是时效性的问题,很多发表时间还算近的 内容写的却是V1的,很容易让我们这些菜鸟走更多的弯路:另一个是知识面的,发现有太多太多相同的文章 都在写一个 ...
- 关于Google Map API V2 版本的定位与导航
近来,在关注安卓手机上的GoogleMap应用的开发,但是目前官方API版本网页版已经升级到V3版,而对于Android的支持也已经升级到V2版本,虽然Google说继续对V1版提供服务,但是不再提供 ...
- 分享两篇Google Map API的介绍
这两篇文章也不知道我是什么时候下载下来的,一直丢在桌面上没有看,但终于在年后无聊就看了一下,结果让我心潮澎湃,一起哈成了"都让Google做了我们还做什么?(WebMap方向)"一 ...
- Google Map API V3开发(5)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- google map Api接口整理
Google Map Api接口整理 一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注意一下两点: 1.如果使用 API 的页面还没有发布,只是在本地调试,可以 ...
- 【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地图(Use Google Map API On Your Bolg) *+申请一组 Google Maps API Key 在使用 Google Maps API 之前, ...
最新文章
- 网站建设需要抠好每一个细节
- Python:利用python语言绘制多个子图经典案例、代码实现之详细攻略
- STM32F4 HAL库开发 -- 再识
- python flask分页_flask 分页
- str转list_数据运算030篇字符串处理str_dec的局限
- ruby 查看csv文件_如何使用CSV和Ruby构建终端游戏
- 转载:ADO.NET Entity Framework 试水系列索引(2008/9/9更新,本系列结束)
- 【java】深入探讨 Java 类加载器
- centos7.5 su: 无法设置组: 不允许的操作(实测补充)(这是乱获取权限导致的,要注意权限问题)以及推荐文件操作
- java+swing+教科书,java+Swing+学生事务管理系统
- spring源码:@Configuration源码
- linux 中文件的操作
- 极光im php,利用php+curl调用极光IM第三方REST API方法经验
- 3.14 使用画笔工具给头发着色 [Ps教程]
- 军用设备环境试验方法高温振动试验标准
- 微信小程序地图坐标转换
- 计算机属性中没有端口,电脑设备管理器里没有显示COM2端口是什么原因
- 大数据经典案例与谬误
- mysql2000卸载_如何卸载mysql 图文教程教你完全卸载mysql数据库
- A股十大股东持股数据查询网站的数据库设计