`
- 浏览:
186473 次
- 性别:
- 来自:
北京
-
代码
- <!---->
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <title>Google Maps JavaScript API Exampletitle>
- <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZrWbwv15xcW6o6Rz2I9OBT8BhQlyUVBQhI7yb8dqdkP7sHdrRTkgtKBUMAsHSYcx-k3lrwvWHbe9w"
- type="text/javascript">script>
- <script type="text/javascript">
-
- function load() {
- if (GBrowserIsCompatible()) {
-
- // Create a base icon for all of our markers that specifies the shadow, icon
- // dimensions, etc.
- var baseIcon = new GIcon();
- baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
- baseIcon.iconSize = new GSize(20, 34);
- baseIcon.shadowSize = new GSize(37, 34);
- baseIcon.iconAnchor = new GPoint(9, 34);
- baseIcon.infoWindowAnchor = new GPoint(9, 2);
- baseIcon.infoShadowAnchor = new GPoint(18, 25);
-
-
- // Create our "tiny" marker icon
- var icon = new GIcon();
- icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
- icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
- icon.iconSize = new GSize(12, 20);
- icon.shadowSize = new GSize(22, 20);
- icon.iconAnchor = new GPoint(6, 20);
- icon.infoWindowAnchor = new GPoint(5, 1);
-
-
- // Center the map on Palo Alto
- var map = new GMap(document.getElementById("map"));
- // map.addControl(new GSmallMapControl());
- map.addControl(new GLargeMapControl());
- //map.addControl(new GSmallZoomControl());
- map.addControl(new GMapTypeControl());
- map.centerAndZoom(new GPoint(106.083984375,36.94989178681327),13);
-
-
- // Download the data in data.xml and load it on the map. The format we
- // expect is:
- // <markers>
- // <marker lat="37.441" lng="122.141"/>
- // <marker lat="37.322" lng="121.213"/>
- // markers>
- var request = GXmlHttp.create();
- request.open("GET", "http://www.step1.cn/GoogleAPI/map/data.xml", true);
- request.onreadystatechange = function() {
- if (request.readyState == 4) {
- var xmlDoc = request.responseXML;
- var markers = xmlDoc.getElementsByTagName("marker");
- for (var i = 0; i < markers.length; i++) {
- var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
- parseFloat(markers[i].getAttribute("lat")));
- var marker = createMarker(point,i);
- map.addOverlay(marker);
- }
- }
- }
- request.send(null);
-
-
- // Creates a marker whose info window displays the given number
- function createMarker(point, index) {
- // Create a lettered icon for this point using our icon class from above
- var letter = String.fromCharCode("A".charCodeAt(0) + index);
- var icon = new GIcon(baseIcon);
- icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
- var marker = new GMarker(point, icon);
-
- // Show this marker's index in the info window when it is clicked
- var html = "Marker " + letter + "b>";
- GEvent.addListener(marker, "click", function() {
- marker.openInfoWindowHtml(html);
- });
-
- return marker;
- }
-
- // Add 10 random markers in the map viewport
- var bounds = map.getBoundsLatLng();
- var width = bounds.maxX - bounds.minX;
- var height = bounds.maxY - bounds.minY;
- for (var i = 0; i < 1; i++) {
- var point = new GPoint(bounds.minX + width * Math.random(),
- bounds.minY + height * Math.random());
- var marker = createMarker(point, i + 1);
- map.addOverlay(marker);
- }
-
-
- // Add a polyline with 4 random points. Sort the points by longitude so that
- // the line does not intersect itself.
- var points = [];
- for (var i = 0; i < 5; i++) {
- points.push(new GPoint(bounds.minX + width * Math.random(),
- bounds.minY + height * Math.random()));
- }
- points.sort(function(p1, p2) { return p1.x - p2.x; });
- map.addOverlay(new GPolyline(points));
-
- var polyline = new GPolyline([new GPoint(116.1419, 37.4419),
- new GPoint(122.1519, 40.4519)],
- "#ff0000", 10);
- map.addOverlay(polyline);
-
- }//end if
-
-
- } //end load()
-
- script>
- head>
- <body onload="load()" onunload="GUnload()">
- <div id="message">div>
- <div id="map" style="width: 750px; height: 550px">div>
- body>
- html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
本示例探讨了如何在VB.NET应用中不依赖Google Maps API直接加载地图。这通常是为了避免API调用限制、减少对网络资源的依赖或者进行离线地图展示。以下是一些关键知识点和实现步骤: 1. **HTML嵌入方法**: 不使用...
本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及应用。 首先,要使用 Google Map API,你需要在 Google Cloud Platform 上创建一个项目,并启用 Maps JavaScript API。获取 API 密钥是关键...
### GOOGLE MAP API 示例知识点解析 #### 一、Google Maps JavaScript API 概述 Google Maps JavaScript API 是一个功能强大的工具包,允许开发者将交互式的地图嵌入到网页中。通过使用这个API,开发者可以轻松地...
利用google map 进行地址的查询,是入门的示例性代码。
谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、...
### Google Maps API:绘制折线图示例解析 #### 一、引言 在Web开发领域,特别是地理信息系统(GIS)应用中,Google Maps API是一个非常强大的工具,它允许开发者在网页上集成交互式地图。其中,绘制路径或折线是...
3. "AmHKGoogleMap" - 这可能是某个特定的Google Map示例项目或者是一个包含自定义功能的地图模块。它可能展示了如何自定义地图的行为、样式,或者实现了特定的地理位置功能,比如搜索、导航等。 总的来说,这个...
这个标题暗示我们将会讨论一个基于GoogleMap API开发的示例应用。一个demo通常包含基本和常见的功能,旨在展示API的能力,帮助开发者了解如何开始自己的项目。在这个案例中,这个demo可能包含了地图加载、定位、路线...
**WPF Google Map V3 示例详解** 在Windows Presentation Foundation(WPF)开发中,集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3,实现...
在提供的"jsmapv3示例"文件中,可能包含了以上这些功能的代码示例,你可以通过学习和研究这些示例,更好地理解和掌握Google Maps JavaScript API V3的用法。记得在实际项目中,根据需求进行适当的调整和优化,以实现...
2. 示例代码:可能包含JavaScript或HTML/CSS文件,展示了如何使用Google Map API加载这些离线地图切片,并在用户界面中展示。 3. 数据管理:可能有一个数据库或文件系统用于存储地图元数据,如地理位置、缩放级别等...
- `googlelinli.html`:可能是一个包含GoogleMap API实际应用的HTML页面示例,可以从中学习如何在网页中集成地图。 - `20090602_GOOGLE地图应用.pdf`:这可能是一份关于Google Map API应用的教程或案例集,详细讲解...
Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式,用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图,管理地图图层,控制图层的可见性,...
首先,`googleMap根据经纬度获取地理位置`这个标题涉及到的核心技术是Google Maps Geocoding服务。Geocoding是将地址或坐标(经纬度)转换为地理坐标的过程,反之亦然。在Google Maps API中,我们可以使用Geocoding ...
VB 调用GoogelMap示例 VB控制GoogelMap实现加载地图、控制偏移、添加删除标记点等。 思路: VB调用WebBrowser控件加载本地页面打开GoogelMap。 再调用所打开页面的javascript脚本函数实现定位和添加标注等功能...
googlemap 反向地址解析示例,即由坐标解析出街道门牌号地址。
- 示例代码:展示如何使用GoogleMap控件的HTML和JavaScript文件。 - 文档:关于API接口和控件使用的指南。 - 图标资源:用于标记和其他视觉元素的图像文件。 ### 注意事项 - 使用Google Maps API可能产生费用,...
Google Map API最新版本(V3)代码示例源码和教程,包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见:...
public void onMapReady(GoogleMap googleMap) { // 在这里,你可以对地图进行各种定制,如添加标记、路径等 GoogleMap map = googleMap; map.getUiSettings().setZoomControlsEnabled(true); map....