Google Map API V3开发(1)

Google Map API V3开发(2)

Google Map API V3开发(3)

Google Map API V3开发(4)

Google Map API V3开发(5)

Google Map API V3开发(6) 代码

11 

?  AdSense Library

?  绘图库

?  几何图形库

?  Panoramio 图层(库)

?  地方信息库

?  天气和云况图层(库)

几何图形库

Google Maps JavaScript API V3 几何图形库提供了一些实用程序函数,以便计算地球表面的几何数据。该库包含以下三个命名空间:

spherical,其中包含球面几何图形实用程序,可用于通过纬度和经度计算角度、距离和面积。

encoding,其中包含一些实用程序,可用于根据编码折线算法对折线路径进行编码和解码。

poly,其中包含一些实用程序函数,用于有关多边形和折线的计算。

要计算该距离,请调用 computeDistanceBetween(),并向其传递两个 LatLng 对象。

在有多个位置的情况下,您可改为使用 computeLength() 来计算给定路径的长度。

距离结果以米为单位表示。

要计算多边形区域的面积(以平方米为单位),请调用 computeArea(),并传递 LatLng 对象数组以定义闭合区域。

?    距离计算

//根据经纬度计算距离

private double rad(double d)

{

return d * Math.PI / 180.0;

}

public double getDistance(double lat1, double lng1, double lat2, double lng2)

{

double radLat1 = rad(lat1);

double radLat2 = rad(lat2);

double a = radLat1 - radLat2;

double b = rad(lng1) - rad(lng2);

double s = 2 * Math.Asin(Math.Sqrt(Math.Pow(Math.Sin(a / 2), 2) + Math.Cos(radLat1) * Math.Cos(radLat2) *

Math.Pow(Math.Sin(b / 2), 2)));

s = s * 6378137;

s = Math.Round(s * 10000);

s = s / 10000;

return s;//计算单位:公里

}

地方信息库

?  地方搜索请求

var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

service = new google.maps.places.PlacesService(map);
  service.search(request, callback);

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

?  文字搜索请求

var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);

?  地方详情请求

地方信息服务不仅可以提供某区域内的地方信息列表,还可以返回关于特定地方的详细信息。当地方搜索响应中返回某个地方后,其 reference 属性可用于请求关于该地方的更多详情,例如其完整地址、电话号码用户评分和评论等。

var request = {
  reference: 'CnRkAAAAGnBVNFDeQoOQHzgdOpOqJNV7K9-c5IQrWFUYD9TNhUmz5-aHhfqyKH0zmAcUlkqVCrpaKcV8ZjGQKzB6GXxtzUYcP-muHafGsmW-1CwjTPBCmK43AZpAwW0FRtQDQADj3H2bzwwHVIXlQAiccm7r4xIQmjt_Oqm2FejWpBxLWs3L_RoUbharABi5FMnKnzmRL2TGju6UA4k'
};

reference,包含可用于日后查询“详情”服务的令牌。该令牌可能与向“详情”服务发送的请求中所使用的引用不同。建议您定期更新为地方信息存储的引用。尽管该令牌可唯一地标识地方,但反之则不然:一个地方可能拥有多个有效的引用令牌。

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

?  地方信息自动填充

“地方自动填充”功能会附到您网页上的文本字段中,并监控用户在该字段中输入的字符。在用户输入文字的同时,自动填充会采用下拉选择列表的形式向应用返回地方预测。

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

?  获取地方信息

当用户从附加到文本字段的预测中选择了一个地方后,该服务就会触发 place_changed 事件。地方信息服务还会返回 PlaceResult 对象,您可以通过对 Autocomplete 对象调用 getPlace() 来访问该对象。

google.maps.event.addListener(autocomplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);
});

Google Map API V3开发(5)的更多相关文章

  1. 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 ...

  2. 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 ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. Google map API V3

    本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念,如果需要更加详细的信息,请直接阅读Google提供的关于map的文档. google map api v3文 ...

  7. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  8. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. 如何使用Google Map API开发Android地图应用

    两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...

随机推荐

  1. 05.virsh命令的常用操作(kvm)

    注:以下命令均可在virsh的man手册页中找到   KVM虚拟机管理常用命令(domain):   virsh命令参数 功能 用法举例 list 查看已经存在的domain信息(可以带参数) vir ...

  2. spring cron表达式

    其他参考资料 http://www.blogjava.net/hao446tian/archive/2012/02/13/369872.html http://blog.sina.com.cn/s/b ...

  3. java笔记

    ANT概述:http://www.blogjava.net/amigoxie/archive/2007/11/09/159413.html http://baitai.iteye.com/blog/7 ...

  4. 谈谈Java中的ThreadLocal

    什么是ThreadLocal ThreadLocal一般称为线程本地变量,它是一种特殊的线程绑定机制,将变量与线程绑定在一起,为每一个线程维护一个独立的变量副本.通过ThreadLocal可以将对象的 ...

  5. UI自动化,你值得拥有

    去年春节联欢晚会,为了那张“敬业福”,全家都卯足了劲儿“咻一咻”,连节目都顾不上看了.当时我就想,要是能自动化该多好,不停点击屏幕,屏幕不疼手还疼呢,何况还不好分心,生怕错过了“敬业福”.玩“咻一咻” ...

  6. POJ 2955 Brackets --最大括号匹配,区间DP经典题

    题意:给一段左右小.中括号串,求出这一串中最多有多少匹配的括号. 解法:此问题具有最优子结构,dp[i][j]表示i~j中最多匹配的括号,显然如果i,j是匹配的,那么dp[i][j] = dp[i+1 ...

  7. CF380C. Sereja and Brackets[线段树 区间合并]

    C. Sereja and Brackets time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. Java集合之泛型的使用

    Java集合之泛型的使用 泛型提供了一种轻便灵活的数据操作,数据的安全性相对提高. 泛型提供了对列表元素的约束条件,比如ArrayList有序链表,可存储任意类型的元素. 此处构建一个ArrayLis ...

  9. Eclipse使用svn文章列表

    http://www.cnblogs.com/duanxz/p/3334660.html http://www.cnblogs.com/duanxz/p/3334660.html http://130 ...

  10. three.js添加文字

    添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...