Google Map Api 的简单应用之方法属性

最新推荐文章于 2024-04-28 17:05:59 发布
最新推荐文章于 2024-04-28 17:05:59 发布
阅读量902 收藏
点赞数
分类专栏： JavaScript 文章标签： google api xmlhttprequest function html random

Google Map Api文档,免费Google地图API使用说明

上一篇 / 下一篇  2008-07-27 22:16:45

查看( 670 ) / 评论( 2 ) / 评分( 0 / 0 )

事件监视

GEvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenterLatLng();
var latLngStr = '(' + center.y + ', ' + center.x + ')';
document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

显示信息浮窗

这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode("Hello world"));

地图标注

本范例通过创建10个随机的标注和折线来说明地图标注的用法.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Add 10 random markers in the map viewport using the default icon
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = new GMarker(point);
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 map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.addOverlay(new GMarker(point));
}
});

在标记上显示信息浮窗

在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number) {
var marker = new GMarker(point);

// Show this marker's index in the info window when it is clicked
var html = "Marker #<b>" + number + "</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 < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = createMarker(point, i + 1);
map.addOverlay(marker);
}

创建图标

创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.

// 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 GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("You clicked me!");
});
}

// Place the icons randomly 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 < 10; i++) {
createMarker(new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random()));
}

使用图标类

多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.

// 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);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the letter corresponding to
// the given index
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 <b>" + 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 < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = createMarker(point, i);
map.addOverlay(marker);
}

在地图上使用XML和异步RPC ("AJAX")

在这个范例中，我们下载一个静态文件("data.xml")，这个XML文件中包含一系列经/纬坐标，当下载完成后，读取这个XML文件并为每一个坐标在地图上创建一个标记.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// 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", "data.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.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 = new GMarker(point);
map.addOverlay(marker);
}
}
}
request.send(null);

API 概要

GMap类

GMap的每一个实例表现为页面上的一个地图，可以创建这个类的多个实例 每个地图被包含在一个container之中，比如一个DIV标签，除非明确指定，地图将使用相应container的大小.

GMap类提供了操作地图点(中心和缩放度)和添加删除标记(比如GMarker和GPolyline实例)和方法. 同时也提供了一个打开"信息浮窗"的方法，地图上同时只能有一个信息浮窗.

更多信息请参看GMap类参考

事件

利用事件监视器，你可以在程序中加入动态的内容，每个实例提供一些指定的事件，你的程序可以利用静态方法GEvent.addListener或GEvent.bind监视这些事件. 例如，以下代码片断在每次用户点击地图的时候显示一个警告:

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
alert("You clicked the map");
});

GEvent.addListener使用一个函数作为第三个参数，这个函数作为事件处理器，在事件被触发时运行. 如果想绑定一个对象的方法到事件，可以使用GEvent.bind.例如：

function MyApplication() {
this.counter = 0;
this.map = new GMap(document.getElementById("map"));
GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick() {
this.counter++;
alert("You have clicked the map " + this.counter +
this.counter == 1 ?" time.":" times.");
}

var application = new MyApplication();

信息浮窗

Map类有一个信息浮窗，可以在地图上以浮动窗口模式在地图上显示HTML内容.

基本的浮动窗口方法是openInfoWindow，这个方法以一个点和一个HTML节点作为参数，这个HTML节点被添加到信息浮窗容器里面，并显示在相应点处.

openInfoWindowHtml差不多，但是它使用HTML字符串作为参数.openInfoWindowXslt则利用XML节点和XSLT文档的URL地址来生成信息浮窗内容，如果该XSLT文档还没有被下载，则会自动异步下载此文件.

如果需要在标记上显示信息浮窗，你可以传递第三个参数(可选)给出窗口顶端和给定点位置的像素差. 比如你的标记高度是10px,你可以使用GSize(0,-10)作第三个参数.

GMarker类还提供了openInfoWindow方法用来处理像素值内容，所以不用担心在程序中计算像素的问题.

标注

标注是一些绑定到地理坐标的对象，当移动、缩放地图或切换模式(比如从地图到卫星图)时，标注也会跟着变化.

Maps API提供两种标注:标记(地图上的图标)和折线(根据地理位置绘制的折线)

图标和标记

TheGMarker构造函数使用一个图标和一个点作为参数，并提供一些类似"点击"的事件，看这个创建标记的例子

创建标记最困难的地方是指定图标，复杂在于一个图标需要几个不同的图片构成.

每一个图标至少都有一个前景图片和一个阴影图片，阴影必须是前景图的45度视角的形状，并且左下角和前景图的左下角重叠，还必须是24-bit PNG灰度图片，才能刚好使图标看起来像站在地图上一样.

TheGIcon需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片，一下是指定一个图标的最基本的代码：

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

TheGIcon类提供有超过7个的属性必须设置以保证图标在浏览器上的兼容性和功能. 比如imageMap属性指定图标不透明部分的形状，如果你没有设置这个属性，在Firefox/Mozilla浏览器上，整个图标(包括透明部分)都能被点击. 看这个GIcon类参考了解更多信息

折线

GPolyline构造函数使用一组地理点最为参数，你也能指定颜色、线宽和透明度 颜色采用老的HTML样式，比如"#ff0000".GPolyline不支持直接使用颜色名字. 例如以下代码会创建一个10像素宽的红色线段：

var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
new GPoint(-122.1519, 37.4519)],
"#ff0000", 10);
map.addOverlay(polyline);

在IE浏览器中，我们用VML来绘制折线，而在其他的浏览器之中，我们使用Google服务器上的图片，并在地图变化时重新刷新图片.

控件

addControl用来添加控件，Maps API可以让你在地图上使用如下控件：

    • GLargeMapControl在Google Map中使用的大缩放/定位控件
    • GSmallMapControl在Google Map中使用的小缩放/定位控件
    • GSmallZoomControl一个小的缩放控件(不能定位)，用在小窗口中显示驾驶方向
      • GMapTypeControl地图类型切换控件(如：地图和卫星图)

例如，要在地图上添加一个缩放/定位控件，你可以在地图初始化时使用如下代码：

map.addControl(new GLargeMapControl());

这样，控件就会被添加到地图的左上角

XML和RPC

Google Maps API提供了一个创建XmlHttpRequest对象的方法，当前可以在IE, Firefox, and Safari上运行正常，如下：

var request = GXmlHttp.create();
request.open('GET', "myfile.txt", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
request.send(null);

你还可以使用静态方法GXml.parse来解析一个XML文档，使用XML字符串作为参数，这个方法对所有的浏览器兼容. 如果本地浏览器不支持XML解析，则会采用一个基于JavaScript的解析器，可是不能保证这个解析器一定能正常的解析.

注意Google Maps API不需要使用XML或XmlHttpRequest因为这是一个纯JavaScript/DHTML的API.
Pure0_0Water
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google map API提供的服务体验演示代码-一个大学API实例
12-26
并且通过两个地图应用的实际开发，总结了Google Maps API 中，设置地图属性，添加地标和信息窗口，获取鼠标点击位置的经纬度以及在地图上添加简单图形等几个常用的功能，并且讨论了在开发中遇到的实际问题及解决方法...
Google Map 属性与方法
鸟飞鱼跃
08-29 4090
<br />地图状态地图状态<br /> <br />方法返回值说明isLoaded()布尔值如果地图已经被setCenter()初始化，则返回true.getCenter()GLatLng返回地图中心点的地图坐标.getBounds()GLatLngBounds返回地图视口范围的矩形区域的地理坐标.getBoundsZoomLevel(bounds)数字返回显示指定的区域需要的最适合的地图缩放等级.该缩放等级是根据当前的地图类型计算出来的，如果还没有指定地图类型,将使用地图类型数组之中的第一项.getSi
google map Api接口整理
GarfieldEr007的专栏
04-17 5659
Google Map Api接口整理 一：基本知识：  1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注意一下两点：     1.如果使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。     2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别注册不同的密钥 2.页面引用javasc
Google Map Api 谷歌地图接口整理
xiaobai_2511的博客
05-10 2202
Google Map Api 谷歌地图接口整理 一：基本知识：  1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：     1.假如使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。     2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别注册不同的密钥 2.页面引用J
google Map API实现地址解析
热门推荐
落叶飘香
03-13 1万+
google Map API实现地址解析 Google map API的地址解析服务目前是不收费的，可以将详细的地址转化成经纬度。   var geocoder;   function initialize() {     geocoder = new google.maps.Geocoder();   }   function codeAd
Google_Map_API谷歌地图.ppt
04-15
谷歌地图应用说明 Michael-Tian 基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 参考资料 Demo
Computacao_Movel:专门用于“移动计算”课程的“地图和本地化集成”研讨会的存储库
04-29
GoogleMaps Demo ，一个独立的应用程序，将所有以前的版本整合在一起并进行了进一步的开发，展示了使用GoogleMaps API V2可以实现的大部分功能。 入门 所有使用GoogleMaps API V2的应用程序都需要一个注册的密钥，...
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
01-30
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
mmm-Carburez:寻找最近的加油站的Android应用程序
06-23
II - 按照以下步骤访问 Google API，从而访问 Google Map。 导入位于 android sdk 中的“google-play-services_lib”项目。 <path> / extras / google / google_play_services / libproject / google-play-services...
用html画一个四叶草
liulang68的博客
04-20 1703
以上是部分代码，需要请看主页加联系方式。
在html中使用数学公式latex
bigcrab的博客
04-27 463
来自 https://katex.org/docs/autorender 可以自动渲染。
vue echarts折线图 折线堆积图和折线面积图
Z18834071903的博客
04-26 337
vue echarts折线图 折线堆积图和折线面积图
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1237
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
前端HTML如何不删除div标签将div标签隐藏
载_酒i
04-27 295
不会影响文档的布局，而其他方法可能会。如果您需要保持原始布局不变，最好使用元素，您可以使用 CSS 的。在 HTML 中，要隐藏。
前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。
最新发布
nibabaoo的博客
04-28 334
HTML中的标签，浏览器的原生弹框。
如何我现在是本地的文件路径不是http，用html如何打开
s_sos0的博客
04-27 378
如何我现在是本地的文件路径不是http，用html如何打开
vue页面中怎么显示多个空格-从普通空格到非断行空格与v-html的使用
qq_42816270的博客
04-27 516
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。产生的原因是因为在浏览器进行解析的时候， 会将多个空格合并成分成一个空格。可能跟使用vue2有关吧，上述的演示的代码使用的是vue3。
前端科举八股文-HTML篇
星海拾遗
04-23 1483
http 是超文本传输协议,它是一个浏览器和服务器之间必须遵守的一个标准. 它是一个无状态的应用层协议所谓的无状态就是协议对于事物处理没有缓存, 在一次请求和返回数据的过程中不会缓存任何信息. 也就是说对于第二次请求获取同样的数据也需要重新发起请求,重新获取数据.由于js是单线程的特性，在执行一些高开销或者搞延迟的任务时容易造成页面渲染阻塞，webworker是一种独立于主线程的之外的独立运行js线程。可以单独去执行一些高开销的任务然后将结果传回主线程。
java 通过经纬度获取海拔高度 高德地图api
05-26
其中，sendGetRequest是发送HTTP请求的方法，elevation是API返回结果中表示海拔高度的属性。 需要注意的是，高德地图Web服务API是收费的，每天有免费的调用次数限制，超过限制后需要付费购买。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值