GoogleApi之Googlemaps代码资源-CSDN文库

共137个文件

html：62个

php：44个

js：6个

google

maps

3星 · 超过75%的资源需积分: 9 49 浏览量 2011-11-18 20:04:12 上传评论收藏 288KB RAR 举报

在IT行业中，Google Maps API是一个极其重要的工具，它允许开发者集成地图功能到自己的网站或应用程序中，提供导航、定位、地理编码、路线规划等多种服务。本篇将详细讲解基于JavaScript的Google Maps API的使用，以及如何通过提供的示例代码进行实践。 `Google Maps JavaScript API`是Google Maps的核心部分，它允许我们用JavaScript编写交互式的地图。在使用前，你需要在Google Cloud Console上创建一个项目并获取API密钥，这是访问API的基础。 1. **地图初始化**：要显示一个基本的地图，你需要创建一个新的`google.maps.Map`对象，并将其附加到HTML元素上。以下是一个简单的例子： ```javascript function initMap() { var mapDiv = document.getElementById('map'); var map = new google.maps.Map(mapDiv, { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } ``` 这个函数会在id为'map'的元素上创建一个中心点在(-34.397, 150.644)、缩放级别为8的地图。 2. **添加标记（Markers）**：标记可以用来表示特定的位置。创建一个标记，你需要使用`google.maps.Marker`对象： ```javascript var marker = new google.maps.Marker({ position: map.getCenter(), map: map, title: 'Hello World!' }); ``` 这将在地图的中心位置放置一个带有"Hello World!"提示的标记。 3. **信息窗口（Info Windows）**：信息窗口可以用来展示与标记相关的信息。它们可以通过`google.maps.InfoWindow`对象创建： ```javascript var infowindow = new google.maps.InfoWindow({ content: 'Some Content' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` 当用户点击标记时，会弹出包含'Some Content'的窗口。 4. **地理编码（Geocoding）**：通过Google Maps API，你可以将地址转换为经纬度坐标，反之亦然。例如，使用`geocoder.geocode()`方法： ```javascript var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: '某地址'}, function(results, status) { if (status === 'OK') { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); ``` 5. **路径和线路**：如果你需要显示多点之间的路线，可以使用`google.maps.Polyline`对象： ```javascript var path = [ {lat: -34.397, lng: 150.644}, {lat: -33.920, lng: 151.259} ]; var line = new google.maps.Polyline({ path: path, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); line.setMap(map); ``` 这将在地图上绘制一条从第一个坐标到第二个坐标的红色线段。 6. **事件监听**： Google Maps API提供了丰富的事件系统，可以监听用户的交互行为。例如，监听地图的拖动事件： ```javascript google.maps.event.addListener(map, 'dragend', function() { console.log('地图被拖动了'); }); ``` 7. **自定义样式**：你可以通过`styles`参数自定义地图的视觉样式。例如，改变水体颜色： ```javascript var mapOptions = { styles: [{ stylers: [{hue: '#00ffe6'}] }] }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); ``` 通过这些基础操作，你可以创建各种复杂的应用，如地图导航、位置搜索、交通状况显示等。在实际开发中，记得合理使用API调用限制，并根据需要优化加载速度，以提供流畅的用户体验。以上就是关于Google Maps JavaScript API的基本使用方法，具体的示例代码会更详细地展示如何实现这些功能。通过阅读和学习提供的压缩包中的代码，你将能够更好地理解和应用这些技术。

资源推荐

资源详情

资源评论

收起资源包目录

Google Api之Google maps代码（137个子文件）

stylesheet.css 5KB

banner.css 393B

Thumbs.db 5KB

timeoutfix.diff 607B

magnifier.gif 1KB

shadow.gif 807B

PHPMailer.html 48KB

elementindex_PHPMailer.html 35KB

elementindex.html 35KB

SMTP.html 27KB

2.html 7KB

1.html 5KB

index.html 5KB

1.html 4KB

extending.html 4KB

1.html 4KB

1.html 3KB

faq.html 3KB

2.html 3KB

1.html 3KB

1.html 2KB

2.html 2KB

1.html 2KB

_class_smtp_php.html 2KB

2.html 2KB

1.html 2KB

2.html 2KB

_class_phpmailer_php.html 2KB

1.html 2KB

2.html 2KB

1.html 2KB

2.html 2KB

1.html 2KB

1.html 1KB

3.html 1KB

1.html 1KB

weather.html 1KB

li_PHPMailer.html 1KB

1.html 1KB

2.html 1KB

errors.html 1KB

1.html 1KB

2.html 970B

1.html 970B

index.html 954B

packages.html 922B

classtrees_PHPMailer.html 864B

help.html 458B

blank.html 416B

favicon.ico 5KB

geoip.inc 21KB

geoipcity.inc 6KB

geoipseeker.jpg 5KB

background3.jpg 998B

background2.jpg 919B

background1.jpg 854B

gmapbook.zh-cn.js 26KB

gzoom_uncompressed.js 14KB

gzoom.js 8KB

yweather.js 5KB

tlabel.2.05.js 2KB

tphoto.2.05.js 2KB

LICENSE 26KB

geoipregionvars.php 84KB

class.phpmailer.php 46KB

class.smtp.php 34KB

phpmailer_test.php 18KB

class.mysqldb.php 17KB

ui.php 15KB

phpunit.php 11KB

list.php 6KB

sendpassword.php 5KB

post.php 3KB

search.php 3KB

index.php 2KB

class.securesession.php 2KB

functions.php 2KB

phpmailer.lang-it.php 1KB

共 137 条

+--------------------------------------------------------+ | GMapbook - A Guestbook base on Google Map API | | Support : http://blog.codexpress.cn | | Author : kukukuan (kukukuan@163.com) | | Copyright (c) 2006 | +--------------------------------------------------------+ 用户协议 1. 您可以任意使用、修改本程序供自己使用，但未经许可不得公开、重发布或传播该留言本代码或基于该留言本代码的产品。通过学习本代码设计出的非留言本程序不在此列。 2. 本代码不提供升级服务。您可以向作者发送EMail或留言讨论，作者将在精力允许的情况下进行解答，但无法保证给出满意答复。在使用本源码前请确认您已阅读并承诺遵守以上协议，否则请勿继续。使用方法 1. include/config.inc.php为配置文件，使用前请按注释提示编辑 2. 将install.sql导入数据库（默认插入第一个用户admin，密码abc）注意事项 1. 所有操作为了减少流量，只返回Error Number，相应含义见ui.php 2. 请勿在localhost或局域网内调试，本地IP将导致无法取得正确的地理位置文件列表 GMAPBOOK │ api.zh-cn.js 中文Google Maps API，不是最新版，仅作参考 │ background1.jpg 验证码背景 │ background2.jpg 验证码背景 │ background3.jpg 验证码背景 │ delete.php 删除留言 │ favicon.ico 网站图标 │ gmapbook.zh-cn.js 核心功能（压缩） │ help.html 未完成的帮助 │ index.php 首页 │ list.php XML格式留言的列表（含分页等功能，需要PHP5以上版本XMLDOM支持，当然如果改成直接用echo输出，则可用于较低的PHP版本） │ login.php 验证登陆 │ logout.php 登出 │ post.php 提交留言 │ reply.php 回复留言 │ sendpassword.php 发送密码（注册和取回密码） │ ui.php 用于设置界面的Javascript，部分数据从数据库中取出 │ updatepassword.php 更改密码 │ updatesettings.php 更新设置（不完善） │ verify.php 验证码（简单） │ └─include │ class.mysqldb.php mysql类 │ class.securesession.php session类 │ config.inc.php 配置文件，需编辑 │ include.inc.php 包含文件 │ └─phpmailer 以下为邮件发送类（经本人修改过的PHPMailer，完美支持GMail，使用方法上和原始PHPMailer无区别） │ ChangeLog.txt │ class.phpmailer.php │ class.smtp.php │ LICENSE │ README │ ├─docs │ extending.html │ faq.html │ timeoutfix.diff │ ├─language │ phpmailer.lang-br.php │ phpmailer.lang-ca.php │ phpmailer.lang-cz.php │ phpmailer.lang-de.php │ phpmailer.lang-dk.php │ phpmailer.lang-en.php │ phpmailer.lang-es.php │ phpmailer.lang-fi.php │ phpmailer.lang-fo.php │ phpmailer.lang-fr.php │ phpmailer.lang-hu.php │ phpmailer.lang-it.php │ phpmailer.lang-ja.php │ phpmailer.lang-nl.php │ phpmailer.lang-no.php │ phpmailer.lang-pl.php │ phpmailer.lang-ro.php │ phpmailer.lang-ru.php │ phpmailer.lang-se.php │ phpmailer.lang-tr.php │ ├─phpdoc │ │ blank.html │ │ classtrees_PHPMailer.html │ │ elementindex.html │ │ elementindex_PHPMailer.html │ │ errors.html │ │ index.html │ │ li_PHPMailer.html │ │ packages.html │ │ │ ├─media │ │ banner.css │ │ stylesheet.css │ │ │ └─PHPMailer │ PHPMailer.html │ SMTP.html │ _class_phpmailer_php.html │ _class_smtp_php.html │ └─test phpmailer_test.php phpunit.php test.png

评论收藏

内容反馈