Google Map ApI 的一个简单的应用

最新推荐文章于 2019-12-25 23:30:57 发布

spaceman

最新推荐文章于 2019-12-25 23:30:57 发布

阅读量1.6k

点赞数

文章标签： google api javascript function div input

本文链接：https://blog.csdn.net/mypurse/article/details/6511249

版权

Google地图API是一种通过JavaScript将Google地图嵌入到您的网页的API。它提供了很多处理地图的功能和向地图添加内容的服务，让您能够在您的网站上创建功能全面的地图应用。

一个地图API密钥只对一个“目录”或域有效（你必须有Google 帐户才能获得地图API密钥，并且API密钥会和你的Google账户联系）。

一个完整的例子（通过调用 Google Map Api ，输入经纬度数查找目标地理位置）：

<!DOCTYPE html PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Google Static Map Test</title>

var map;

var myMarker;

function load() {

map = new GMap2(document.getElementById("map"));

if (GBrowserIsCompatible()) {

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

var myLatLng = new GLatLng(25.0476, 121.517);

map.setCenter(myLatLng, 13);

myMarker = new GMarker( myLatLng );

map.addOverlay( myMarker );

}

function Gsubmit() {

var ew = document.getElementById("east").value;

var ns = document.getElementById("north").value;

var myLatLng = new GLatLng(ns,ew);

map.panTo(new GLatLng(ns,ew));

myMarker.setLatLng( myLatLng );

var myGeocoder = new GClientGeocoder();

myGeocoder.getLocations(myLatLng, function(addresses) {

if(addresses.Status.code != 200) {

alert("此坐标没有找到对应的地址 " + myLatLng.toUrlValue());

}

else {

var result = addresses.Placemark[0];

myMarker.openInfoWindowHtml( result.address );

document.getElementById('address').value = result.address;

}

});

}

</script>

</head>

</table>

</body>

</html>

在浏览器中输入：http://localhost:8080/mps/testGoogleMap.html

效果图：

new GlatLng（39.917, 116.397）括号中的参数值代表的是 目标的维度，和经度。

在Google地图API中，GLatLng对象提供了此类机制。可以构造一个GLatLng对象，按照制图学的惯例{经度，纬度}的顺序传递参数：注意：将“地址”转变为地理点的过程称为“地址解析”

纬度和经度使用逗号分隔的文本字符串内的数字定义，可精确到 6 位小数。例如，“40.714728,-73.998672”是有效的地址解析值。小数点 6 位之后的部分将忽略

纬度和经度值必须对应于地球表面的有效位置。纬度可以是 -90 到 90 之间的任何值，经度可以是 -180 到 180 之间的任何值。如果指定了无效的纬度或经度值，则您的请求将作为错误请求被拒绝。

panTo方法把地图的中心移动到一个指定点。如果指定点在地图的可见区域内，地图中心会平滑地平移到指定点，否则地图中心会直接跳到那个点。（一般用于目标位置的查询）

map.panTo(new GLatLng(37.4569, -122.1569))

地图上添加控件

可以用addControl方法在地图上添加控件。在这个例子里，我们加入GSmallMapControl和GMapTypeControl控件，这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换

代码示例：var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

效果图：

从body标签的load事件初始化地图对象

使用Script 标签包含Google地图API

地图DOM元素

map = new GMap2(document.getElementById("map"));

效果图创建名为map的div层包含地图原素

var map = new GMap2(document.getElementById("map"));

Gmap2类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）

当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器，通过document.getElementById()方法获得该元素的引用。

构造函数	说明
GMap2(container, opts?)	在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数

请注意因为JavaScript是松散型语言，我们可以不填写构造函数的任何可选参数。

初始化地图

map.setCenter(new GLatLng(39.9493, 116.3975),13);//没有这一句不会显示地图来的

注意map.setCenter（）的最后一个参数13表示的是地图加载的的时候缩放大小！

通过Gmap2构造函数创建地图后，我们需要再做一件事：将其初始化。初始化通过地图的setCenter()方法完成。SetCenter()方法要求有GlatLng坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。

<body onload="intialize()" onunload="GUnload()">

GUnload()函数是用来防止内存泄漏的实用工具函数。

window.setTimeout(function(){

map.panTo(new GLatLng(39.927, 116.407));

},2000);

上面这个方法是在等待两秒钟，然后平移到新中心点

//创建GMarker对象

myMarker = new GMarker( myLatLng );

//在地图上为marker0添加涂层，显示marker0

map.addOverlay( myMarker );

1．创建基本的GMarker()对象

GMarker()对象使用new关键字进行创建，其语法格式如下所示。

 
 1.           
 
 new GMarker(myLatLng, opts)

GMarker()地标是Google地图中用于标记地理位置的对象。在实际应用中，GMarker()地标也是所有对象中最常用的一个，第一个参数myLatLng为地标标记的地理位置，该参数为GLatLng()对象，和GMap2.setCenter()的第一个参数一样。第二个参数opts可省略

spaceman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Google Map ApI 的 一个简单的应用

地图上添加控件

Google Map ApI 的一个简单的应用