专栏首页Elton的技术分享博客Google MAP API 初步尝试

Google MAP API 初步尝试

今天看了一下午Google的API,发现还挺简单的。稍微懂点Javascript就可以了。 写了个小例子

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(31.22, 121.48), 13);
        geocoder = new GClientGeocoder();

        showAddress("上海市淮海中路300号");
      }
    }

    function createMarker(point,msg) {
    	var marker = new GMarker(point);
  		var message = msg;
  		GEvent.addListener(marker, "click", function() {
    		var myHtml = msg;
    		map.openInfoWindowHtml(point, myHtml);
  		});
  		return marker;
	}

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("不能解析: " + address);
            } else {
              map.setCenter(point, 15);
              var marker = createMarker(point,address);
              map.addOverlay(marker);
            }
          }
        );
      }
    }

...


	
      
        
        
      
      
    

...
</pre>
**第一个script是来加载Google Map的库**




http://ditu.google.cn/maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“abcdefg”。

请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。

## 设置地图 DOM 元素


要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。

在上述示例中,我们定义名为“map_canvas”的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。

## GMap2 - 基本对象
var map = new GMap2(document.getElementById("map_canvas"));

GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)我们使用 JavaScript new 操作符创建此类的一个新实例。

当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是 div 元素)作为地图的容器。HTML 节点是 JavaScript document 对象的子对象,而且我们通过 document.getElementById() 方法获得该元素的引用。

## 初始化地图
map.setCenter(new GLatLng(31.22, 121.48), 13);

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

setCenter()的第二个参数表示放大级别,从0到20,0是最小,20是最大。

## 加载地图
</pre>
当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上,我们仅在 HTML 页面的  元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。

onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。

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

## 地址解析
GClientGeocoder类用来解析地址到经纬度,需要先创建这个类的实例
geocoder = new GClientGeocoder();


然后调用getLatLng(address:String, callback:function)方法来在地图上定位。

getLatLng(address:String, callback:function) 向 Google 服务器发送请求,对指定的地址进行地址解析。如果地址已成功定位,则用 GLatLng 点调用用户指定的回调函数。否则,向回调函数提供一个 null 点。如果地址不明确,则仅向回调函数传递最匹配的点。

geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("不能解析: " + address);
            } else {
              map.setCenter(point, 15);
              var marker = createMarker(point,address);
              map.addOverlay(marker);
            }
          }
        );


GMarker类用来生成标记,就是地图中的那个红点,它可以有一个信息窗口,通过openInfoWindow方法来打开。
var marker = new GMarker(point);


通过调用GMap2类的addOverlay(overlay:GOverlay) 方法,给地图添加一个叠加层,用来显示上面定义的标记。

通过GEvent类的addListener方法,为标记添加鼠标点击事件的监听,当在标记上按下鼠标的时候,显示信息窗口。
GEvent.addListener(marker, "click", function() {
    		var myHtml = msg;
    		map.openInfoWindowHtml(point, myHtml);
  		});


可以在这里查看效果

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.prosight.me/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Google Map api国内正常使用该如何配置(2021最新)

    最近有客户要求给他们网站做地图方面的功能,由于某些原因,网站必须使用google map,而且希望用到geocoding。大家知道google map api调...

    仙士可
  • MySQL 5.1.35 安装Innodb报unknown variable innodb_data_home_dir错误

    就报了usr/local/mysql/libexec/mysqld: unknown variable ‘innodb_data_home_dir=/usr/l...

    EltonZheng
  • EJB3入门(4)实体Bean

    实体Bean就是跟数据库中某个表对应的一个类。 类的每个实例对应数据库的一行记录。如果用过hibernate的人一定很熟悉这个概念。这个就是所谓的ORM模型。J...

    EltonZheng
  • 案例分享-libc STL 造成的疑似“内存泄漏”

    我的程序根据我的计算,内存使用只需要30MB左右。但是观察发现,程序的内存不断上涨。

    程序员小王
  • HTML5的Geolocation API

    Geolocation API用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是...

    meteoric
  • 谷歌家用迷你音箱的初步研究(Computers and Society)

    许多使用人工智能(AI)的音箱最近已经进入消费市场。从Amazon Echo开始,许多公司开始生产自己的智慧音箱技术。由于技术的限制,大多数音箱都有类似的功能,...

    李欣颖6837176
  • 手把手 | 亲测好用!Google发布了一个新的Tensorflow物体识别API

    大数据文摘
  • 推荐几个堪称教科书级别的 Android 音视频入门项目

    目前,市面上关于音视频学习的相关书籍并不多,而且即使看了书籍学了理论,最终还是要回归到代码上来。

    音视频开发进阶
  • 初识mapbox GL

    最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox...

    lzugis
  • Baidu与Google地图API初探

    前天周六,有个好友过来玩,他说想在他的网站中加入地图导航模块,但不知道选择哪个第三方Map API

    阳光岛主
  • 如何快速分析大型系统架构?

    PS:这里所针对的情况是,没有现有架构图的情况。如果已经有现成的架构,那么它的步骤应该是不一样的。依我之间的经验来看,它应该是这样的:

    Phodal
  • 用vue实现简易的音乐webApp

    1、前言 学了半个月的vue,做这个小项目也做了半个月;数据是实时抓取自QQ音乐的api接口,主要的功能实现是对网页版的qq音乐功能来做参考。 2、关于项目

    Ewall
  • Baidu与Google地图API初探

    前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API

    全栈程序员站长
  • Go语言微服务框架 - 6.用Google风格的API接口打通MySQL操作

    接下来,我们就尝试着实现通过RPC请求操作MySQL数据库,打通整个链路,真正地让这个平台实现可用。

    junedayday
  • 教程 | 如何使用TensorFlow API构建视频物体识别系统

    选自Medium 机器之心编译 参与:李泽南 在谷歌 TensorFlow API 推出后,构建属于自己的图像识别系统似乎变成了一件轻松的任务。本文作者利用谷歌...

    机器之心
  • 如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

    邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

    谢鸢
  • Salesforce学习 GoogleMaps(一)【VisualforcePage】

    今天简单做一下如何利用salesforce使用【GoogleMaps】,首先登陆到【Google Cloud Platform】,连接如下:https://co...

    repick
  • HttpClient Timeout设置

    本教程主要讨论Apache HttpClient 4框架的timeout设置。如果想学习HttpClient的其他方面,请参考HttpClient教程。

    九州暮云
  • [Swagger] Swagger Codegen 高效开发客户端对接服务端代码

    需要注意的是,自动生成的是客户端代码,请求/swagger-resource/user/info时,可以通过自动生成的代理类UserResourceContro...

    架构探险之道

扫码关注腾讯云开发者

领取腾讯云代金券