Google Map API 使用总结

Google Map API (一)：显示一个最基本的地图

1 实现一个地图：
<head>中引用：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Html里面合适的位置定义：

<div id="map"/>

javascript文件:

window.onload = myLoad;

function myLoad()

{

    lat = 23.14746;

    lng = 113.34175376;

    var myLatLng = new google.maps.LatLng(lat, lng);

    var myOptions = {

        zoom: 15,

        center: myLatLng,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);

}

说明：zoom参数是地图的范围，参数越小，地图的范围就越大
center是地图的中心点，通过经纬度定义
mapTypeId：是地图的类型。有四种map可选，MapTypeId.ROADMAP， MapTypeId.SATELLITE，
MapTypeId.HYBRID，MapTypeId.TERRAIN。

此时就可以显示中心点是（113，27）的地图了

Google Map API(二)：代码添加和删除marker标记

Google Map API :在地图通过代添加和删除mark标记

 lat = 23.14746;

  lng = 113.34175376;

  var myLatLng = new google.maps.LatLng(lat, lng);

  var myOptions = {

      zoom: 15,

      center: myLatLng,

      mapTypeId: google.maps.MapTypeId.TERRAIN

  };

  var map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions);

  var marker = new google.maps.Marker({

      position: myLatLng,

      title: "Hello World!"

  });

  marker.setMap(map);

或者直接这样定义一个marker：

 var marker = new google.maps.Marker({

      position: myLatLng,

      map: map,

      title: "Hello World!"

  });

去掉marker的操作是：

marker.setMap(null);

Google Map API (三)：给marker标记加上自定义内容

Google Map API Version3 中标记可以给marker加上任何自己的东西。
效果如下：

代码:
首先还是定义一个marker：

 lat = 23.14746;

  lng = 113.34175376;

  var myLatLng = new google.maps.LatLng(lat, lng);

  var myOptions = {

      zoom: 15,

      center: myLatLng,

      mapTypeId: google.maps.MapTypeId.TERRAIN

  };

  var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions);

  var marker = new google.maps.Marker({

      position: myLatLng,

      title: "Hello World!"

  });

  marker.setMap(map);

然后给marker标记添加点击事件和自定义内容：

var contentString = '<div id="content">' +'<div>' +

'</div>' +

'<h1>我的标签</h1>' +

'<div id="bodyContent">' +

'<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +

'</div>' +

'</div>';

var infowindow = new google.maps.InfoWindow({

    content: contentString

});

google.maps.event.addListener(marker, 'click', function () {

    infowindow.open(map, marker);

});

infowindow是google指定的现实内容的类，你用HTML代码初始化它就好了
mapStyle是自己定义的样式，在这里可以使用网页的css样式表

Google Map API (四)：地图控件的自定义

navigationControl：

mapTypeControl：

scaleControl：

具体定义的方式是：

lat = 23.14746;

lng = 113.34175376;

var myLatLng = new google.maps.LatLng(lat, lng);

var myOptions = {

    zoom: 15,

    center: myLatLng,

    disableDefaultUI: true,               //取消默认的试图

    navigationControl: true,              //true表示显示控件

    mapTypeControl: false,                //false表示不显示控件

    scaleControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);

通过这样的定义可以让控件显示或者不显示了。

空间也可以指定样式和位置，主要是通过修改Options实现：

  var myOptions = {

        zoom: 15,

        center: myLatLng,

        disableDefaultUI: true,

        navigationControl: false,

        mapTypeControl: true,

        mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT

 },

        scaleControl: true,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

mapTypeControlOptions就是设定样式来，style是样式，google.maps.ControlPosition.TOP_LEFT是位置：

导航控件（navigationControl）可显示为以下 style 选项之一：

google.maps.NavigationControlStyle.SMALL，用于显示迷你缩放控件，其中仅限＋和－按钮。此样式适用于移动设备。
google.maps.NavigationControlStyle.ZOOM_PAN，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。
google.maps.NavigationControlStyle.ANDROID，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。
google.maps.NavigationControlStyle.DEFAULT，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。

MapType 控件可显示为以下 style 选项之一：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。
google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。

可以定义的位置是：

TOP 表示控件应沿着地图顶部中心放置。
TOP_LEFT 表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。
TOP_RIGHT 表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。
BOTTOM 表示控件应沿着地图底部中心放置。
BOTTOM_LEFT 表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。
BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。
LEFT 表示控件应沿着地图左侧放置，位于使用 TOP_LEFT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
RIGHT 表示控件应沿着地图右侧放置，位于使用 TOP_RIGHT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。

Google Map API(五)：定义路线和点击事件

你可以在Google Map添加你想添加的线，并且为线添加点击事件。
效果如下：

JS代码：

window.onload = myLoad;

var poly;          //折线

var infoWindowPoly;          //折线显示的窗口

var map;           //地图

function myLoad() {

    lat = 23.14746;              //位置固定，你也可以通过其他方法得到坐标

    lng = 113.34175376;

    var myLatLng = new google.maps.LatLng(lat, lng);            //初始化一个坐标位置

    var myOptions = {

        zoom: 15,                   //缩放，数值越大地图显示的内容越具体

        center: myLatLng,              //地图中心点

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementByIdx_x_x_x_x("map"), myOptions);        //根据option初始化地图

    var flightPlanCoordinates = [                        //添加一条线

    new google.maps.LatLng(23.14746, 113.34175376),

    new google.maps.LatLng(23.144, 113.345),

    new google.maps.LatLng(23.149, 113.349),

  ];

    poly = new google.maps.Polyline({                 //定义线的样式

        path: flightPlanCoordinates,

        strokeColor: "#FF0000",

        strokeOpacity: 1.0,

        strokeWeight: 8

    });

    poly.setMap(map);                 //把线添加到地图

    google.maps.event.addListener(poly, 'click', addLatLng);         //为线添加点击事件

    infoWindowPoly = new google.maps.InfoWindow();              //初始化线的弹出框

}

function addLatLng(event)

{

    var contentString = "<b>你点线啦</b><br />";

    contentString += "点击位置: <br />" + event.latLng.lat() + "," + 

event.latLng.lng() + "<br />";

    infoWindowPoly.setContent(contentString);

    infoWindowPoly.setPosition(event.latLng);

    infoWindowPoly.open(map);                 //点击线的时候显示线的弹出框

}

总结代码如下：

window.onload = myLoad;

var poly;          //折线

var infoWindowPoly;          //折线显示的窗口

var map;           //地图

function myLoad() {

    lat = 23.14746;              //位置固定，你也可以通过其他方法得到

    lng = 113.34175376;

    var myLatLng = new google.maps.LatLng(lat, lng);            //初始化一个坐标位置

    var myOptions = {

        zoom: 15,                   //缩放，数值越大地图显示的内容越具体

        center: myLatLng,              //地图中心点

        disableDefaultUI: true,              //不使用默认图标

        navigationControl: true,                 //显示导航条

        mapTypeControl: true,

        mapTypeControlOptions: {

         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,               //详细的设置可参考：http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html

         position: google.maps.ControlPosition.TOP_LEFT },

        scaleControl: true,

        mapTypeId: google.maps.MapTypeId.ROADMAP             //地图类型，一共四种：可参考http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html

    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);        //根据option初始化地图

    var marker = new google.maps.Marker({              //添加标记

        position: myLatLng,

        map: map,

        title: "Hello World!"

    });

    var contentString = '<div id="content">' +                 //点击标记后显示自定义的内容

    '<div>' +

    '</div>' +

    '<h1>我的标签</h1>' +

    '<div id="bodyContent">' +

    '<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +

    '</div>' +

    '</div>';

    var infowindow = new google.maps.InfoWindow({                //根据HTML初始化infowindow

        content: contentString

    });

    google.maps.event.addListener(marker, 'click', function () {      //添加点击事件

        infowindow.open(map, marker);

    });

    var image = 'flag.png';                                       //自定义marker的图标

    var myLatLng = new google.maps.LatLng(23.149, 113.349);

    var beachMarker = new google.maps.Marker({

        position: myLatLng,

        map: map,

        icon: image

    });

    google.maps.event.addListener(beachMarker, 'click', function () {      //添加点击事件

        infowindow.open(map,beachMarker );

    });

    var flightPlanCoordinates = [                        //添加一条线

    new google.maps.LatLng(23.14746, 113.34175376),

    new google.maps.LatLng(23.144, 113.345),

    new google.maps.LatLng(23.149, 113.349),

  ];

    poly = new google.maps.Polyline({                 //定义线的样式

        path: flightPlanCoordinates,

        strokeColor: "#FF0000",

        strokeOpacity: 1.0,

        strokeWeight: 8

    });

    poly.setMap(map);                 //把线添加到地图

    google.maps.event.addListener(poly, 'click', addLatLng);         //为线添加点击事件

    infoWindowPoly = new google.maps.InfoWindow();              //初始化线的弹出框

}

function addLatLng(event)

{

    var contentString = "<b>你点线啦</b><br />";

    contentString += "点击位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    // Replace our Info Window's content and position

    infoWindowPoly.setContent(contentString);

    infoWindowPoly.setPosition(event.latLng);

    infoWindowPoly.open(map);                 //点击线的时候显示线的弹出框

}

在项目中只是用到了简单的小部分，代码：

function initialize(lo,la,idbox) {

        var myOptions = {

          zoom: 12,

          center: new google.maps.LatLng(lo,la),

          mapTypeId: google.maps.MapTypeId.ROADMAP,

          mapTypeControl: false, //屏蔽卫星

         draggable: false, //禁止拖动

        };

        var map = new google.maps.Map(document.getElementById(idbox),

            myOptions);

        //machao 添加标记

        var myLatLng = new google.maps.LatLng(lo,la);

        var marker = new google.maps.Marker({

            position:myLatLng,map:map,title:"Acura"  //提示文字

        });

        var zoomLevel;

}

Google Map API 使用总结的更多相关文章

Google Map API Version3 ：代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图通过代添加和删除mark标 ...
Google Map API V3开发（1）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
Google Map API V3开发（2）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
Google Map API V3开发（3）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
Google Map API V3开发（4）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
Google Map API V3开发（5）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
Google Map API V3开发（6）代码
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
如何使用Google Map API开发Android地图应用
两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...
google map api v2的使用详细过程，图文并茂（原创）
上一篇中说到怎么获取key,下面来介绍怎么使用key来显示google地图步骤1:eclipse上打开android SDK Manager,安装google play services. 步骤2: ...

随机推荐

ArrayList、Vector、HashMap、HashTable、HashSet的默认初始容量、加载因子、扩容增量
这里要讨论这些常用的默认初始容量和扩容的原因是: 当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全 ...
关于领域驱动设计（DDD）仓储的思考
为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计一个类似DAL层的东东 ...
ASP.NET本质论第一章网站应用程序学习笔记3-对象化的Http
在.NET环境下,万物皆对象,在HttpRuntime收到请求之后,立即将通过HttpWorkerRequest传递的参数进行分析和分解,创建方便用于网站应用程序处理用的对象,其中主要涉及到两个对象类 ...
mongodb 基本指令学习
启动 : 1)创建一个文件夹存放mongodb的数据启动的时候指定这个文件夹为存储mongodb的存储路径我的目录是D:\data 2)启动mongodb服务进入安装mongodb的bin ...
[js开源组件开发]图片放大镜
图片放大镜一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...
一台电脑存放多个git账户的多个rsa秘钥
未命名.html div.oembedall-githubrepos{border:1px solid #DDD;border-radius:4px;list-style-type:none;marg ...
android ButterKnife 解决重复findViewById
简介: 程序员都是懒惰的,不想写一大堆像下面这样的代码 class ExampleActivity extends Activity { TextView title; TextView subtit ...
Android Studio 第一次新建Android Gradle项目超级慢的解决方案
大家有什么问题,欢迎问我! 注:Android Studio在第一次新建一个Gradle项目时需要下载Gradle,所以启动很慢(Gradle-bin大约三十几兆),所以我们应该事先帮他下载好. 首先 ...
第一个WCF的程序
第一个WCF的程序,按照书上的基本已经完成,就是创建配置文件那里卡住了,因为书上写的不太全,明天再进行深入调试,输入http://127.0.0.1:3721/calculatorservice/me ...
android基础开发之scrollview
scrollView 是android系统提供的一种特殊的展示view. 其实我们很早就遇到过scrollview的东东,比如listview. 而google官方文档也提出,不要混合使用scrol ...

Google Map API 使用总结

Google Map API 使用总结的更多相关文章

随机推荐

热门专题