zoukankan      html  css  js  c++  java
  • Google Maps API 初级2

    转自:http://hi.baidu.com/xfm_zhr/blog/item/7b963d085ac356d663d98648.html

    8.       GMarker对象

    用于标记地图中的地理位置。指示位置,显示信息都必须依赖与此对象。声明语法:

    New GMarker(point, opts);

    Point:地标标记的地理位置,GLatLng对象。

    Opts:用于自定义的GMarker对象,可省略。

    示例代码:

    //在此把GLatLng()对象赋值给变量geoPoint0,方便多次使用

            var geoPoint0= new GLatLng(39.92, 116.46);

            map.setCenter(geoPoint0, 2);

           

            //创建GMarker对象

            var marker0 = new GMarker(geoPoint0);

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

            map.addOverlay(marker0);

    自定义GMarker对象

    即使用opts参数。一般认为是GmarkerOptions类。实际上是JS中的无名类,可随着API的升级而变化。

    //JS无名类

    {

           Property1:value1,

           Property2,value2,

           ……

    }

    典型的自定义GMarker对象示例代码:

            var marker1 = new GMarker(geoPoint1,//创建自定义的GMarker

                                    {icon: myIcon,

                                     title: "把鼠标移上来,看看有什么"});

    GMarker.openInfoWindowHtml(content,opts)

    显示GinfoWindow信息。

    Content:HTML字符串。

    Opts:GinfoWindowOptions对象,可省略。同样是无名类。

    GMarker.openInfoWindow(content,opts)

    显示GinfoWindow信息。

    Content:Dom对象。

    Opts:GinfoWindowOptions对象,可省略。同样是无名类。

    GMarker.openInfoWindowTabsHtml(tabs, opts)

    显示多标签的信息窗口。

    Tabs:标签信息窗口数组,其中GinfoWindowTab对象使用HTML字符串创建。

    Opts:GinfoWindwoOptions对象。可省略。

    典型代码:

    //创建GInfoWindowTab数组

            var tabs = [new GInfoWindowTab("Tab1", "<div style='400px'>This is tab1</div>"),

                    new GInfoWindowTab("Tab2", "<div style='400px'>This is tab2</div>"),

                    new GInfoWindowTab("Tab3", "<div style='400px'>This is tab3</div>")];

    marker.openInfoWindowTabsHtml(tabs);

    GMarker.openInfoWindowTabs(tabs , opts)

    显示多标签窗口。

    Tabs: 标签信息窗口数组,其中GinfoWindowTab对象使用DOM对象创建。

    Opts:GinfoWindwoOptions对象。可省略。

    9.       GIcon对象

    描述GoogleMaps上面图标的对象。

    典型代码:

        //创建一个自定义的GIcon

        var myIcon= new GIcon();

        //前景图片

        myIcon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";

        //阴影图片

        myIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

        //前景图片大小,长x宽

        myIcon.iconSize = new GSize(12, 20);

        //阴影图片大小,长x宽

        myIcon.shadowSize = new GSize(12, 20);   

        //以下两个属性很难解释,读者可自行调整其数值以便理解其意义

        // myIcon锚定点相对于myIcon图片左上角的像素距离

        myIcon.iconAnchor = new GPoint(6, 10);

        //信息窗口相对于myIcon图片左上角的像素距离

        //关于信息窗口会在以后介绍

        myIcon.infoWindowAnchor = new GPoint(5, 1);

  • 相关阅读:
    37个绝对不容错过的HTML5教程和资源
    Google的自动驾驶汽车无事故成功完成30万英里的驾驶路程
    一个基于jQuery Mobile的移动设备实时幻灯javascript类库 taciónJS
    推荐免费黑色UI工具包下载
    分享一些前端开发人员必备的工具,脚本和资源
    使用HTML5画布实现的超棒javascript动画仪表板:gauge.js
    Google(谷歌)将打算在搜索结果中展示Gmail内容
    免费资源下载:30个用户界面工具栏图标设计
    一张超诡异的HTML图片“松鼠” 是图片同时也是web页面
    带给你设计灵感的30个超棒的暗色系网站设计
  • 原文地址:https://www.cnblogs.com/wangpei/p/1626957.html
Copyright © 2011-2022 走看看