Google Map 初步使用

使用谷歌地图之前需要注册一个google邮箱，然后翻墙去获得秘钥

1、Html与jQuery项目里面使用Google map

<!DOCTYPE html>
<html><head><style>#map {height: 400px;  width: 100%;  }</style></head><body><h3>My Google Maps Demo</h3><!--地图显示的位置--><div id="map"></div><script>function initMap() {var uluru = {lat: 22.539706, lng: 114.1144403};      //经纬度//zoom 表示地图的放大倍数var map = new google.maps.Map(document.getElementById('map'), {zoom: 18, center: uluru});//在地图上显示红色定位标记var marker = new google.maps.Marker({position: uluru, map: map});}</script><!--填写Google地图秘钥--><script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback&callback=initMap"></script></body>
</html>

运行上面的代码就可以看到地图

在实际的开发中还会需要用到弹框或者点击事件等操作

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">html, body { height: 100%; margin: 0; padding: 0; }#map { height: 500px; width: 400px;}</style><title>google map api demo</title>
</head>
<body>
<div id="map"></div><script>var map;var geocoder;var local;var myCenter;var contentString = '<div id="content">' +'<div>' +'</div>' +'<h1>自定义标签</h1>' +'<div id="bodyContent">' +'<p class = "mapStyle">我的百度 <a href="www.baidu.com">href="www.baidu.com" +'</div>' +'</div>';function initMap() {map = new google.maps.Map(document.getElementById('map'), {zoom: 18,center: new google.maps.LatLng(51.508742, -0.120850),});geocoder = new google.maps.Geocoder();var address="香港铜锣湾新宁道八号中国太平大厦19字楼";geocoder.geocode({'address':address},function(results,status){if(status==google.maps.GeocoderStatus.OK){map.setCenter(results[0].geometry.location);local = results[0].geometry.location;var marker=new google.maps.Marker({position:local,map:map,title:address});marker.setMap(map);google.maps.event.addListener(marker, 'click', function(event) {//点击跳转window.location.href = "http://maps.google.com/?q=九龙尖沙咀汉口道4-6号骐生商业中心11楼"})var infowindow = new google.maps.InfoWindow({content:contentString});infowindow.open(map,marker);}});}
</script>
<!--填写Google地图秘钥-->
<script src="http://ditu.google.cn/maps/api/js?key=？&callback=initMap"></script>
</body>
</html>

效果展示

值得注意的地方：http://ditu.google.cn，国内用户的可以访问，官方提供的https://maps.googleapis.com，在国内无法访问。但是国外可以访问http://ditu.google.cn，所以推荐使用http://ditu.google.cn

假如需要打开google map 导航，那么可以使用下面这个方法

function openApp() {window.location.href = "https://www.google.com/maps/dir/?api=1&origin="+开始地址+"&destination="+到达地址+"&travelmode=driving";}

Google Map 初步使用相关推荐

google map的简单二次开发
Google Maps API是Google自己推出编程API,可以让全世界对Google Map有兴趣的程序设计师自行开发基于Google Maps的服务,建立自己的地图网站. 简单的讲就是g ...
开发基于 Google Map 的 Android 应用
开发基于 Google Map 的 Android 应用张谦, 软件工程师, IBM 吴校军, 高级软件工程师, IBM 苏琳, 软件工程师, IBM 简介: 随着移动互联网应用的迅速发展,利 ...
主流电子地图API比较 google map api, mapabc ,yahoo地图
主流电子地图API比较 Google Maps API : Google Maps API 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中.API ...
Android特色开发之Google MAP
本文节选于机械工业出版社推出的<Android应用开发揭秘>一书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开发 ...
关于Google Map API V2 版本的定位与导航
近来,在关注安卓手机上的GoogleMap应用的开发,但是目前官方API版本网页版已经升级到V3版,而对于Android的支持也已经升级到V2版本,虽然Google说继续对V1版提供服务,但是不再提供 ...
分享两篇Google Map API的介绍
这两篇文章也不知道我是什么时候下载下来的,一直丢在桌面上没有看,但终于在年后无聊就看了一下,结果让我心潮澎湃,一起哈成了"都让Google做了我们还做什么?(WebMap方向)"一 ...
Google Map App 问题集锦
用此帖记录做Google Map过程中遇到的问题. 一.因为在Manifest.xml文件没有写入<service>,所以导致启动不了Service,但是我明明写了啊.后来发现是自己为了版 ...
如何在Android手机上进行Google Map的开发。
1.题记提起谷歌Map相信大家都不会陌生,那进入我们今天的话题,如何在Android手机上进行Google Map的开发. 2.Map应用程序的开发 2.1 准备工作 2.1.1 申请Android ...
Google Map API 的基础使用
因为公司业务由国内市场到国际市场,有一些国际性业务的项目需要用到Google Map.项目完成后,把一些常用的方法写出来,供大家参考. 一.google地图基础显示 (1)引用google map j ...

Google Map 初步使用

Google Map 初步使用相关推荐

最新文章

热门文章