`

Google Map and Map Search 学习[转载]

 
阅读更多

谈起google map,只是众多google API中的一支,在网络上也随处可以找到很多关于google map的介绍,本文主要目的把自己对google map的认识做一小结,本文需要一定的开发google map的基础,如果是新手话我建议去google map官方一步步学习其开发过程http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps

主要包括google map的实现的基本方法和一些扩展功能。

1.在HTML中加入引用文件,key=abcdef是google map需要的key,本机测试可以用abcdef,发布在服务器时必须自己去google申请一个key.

<script src='http://maps.google.com/maps?hl=en&file=api&v=2&key=abcdef&allow_bidi=false'type="text/javascript"></script> 
<script type="text/javascript" src='http://ditu.google.com/maps?file=api&v=2&key=abcdef&hl=en'></script> 
<script type="text/javascript" src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=abcdef&hl=en'></script> 
<script type="text/javascript" src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"></script> 

 
在body中加入一个显示地图的div
<div id="googleMap" >Loading...</div>

2.在JS文件中实现加载地图
var mapElem = document.getElementById("googleMap");//获取初始化地图的位置
        map = new GMap2(mapElem);
        map.enableScrollWheelZoom();
        geocoder = new GClientGeocoder();//加入缩放图标
        var customUI = map.getDefaultUI();
        customUI.maptypes.hybrid = false;
        map.setUI(customUI);

3.给实例化好的地图添加事件
GEvent.addListener(map, "Event", function(oldLevel, newLevel) {
          //do something
     });

Event:click、dblclick、singlerightclick、movestart、move、moveend、zoomend、addoverlay、drag、load还有好多,可以参考Google 地图 API 参考。

4.实现拖拽标志过程中显示当前标志的经纬度,在创建标志的时候
function createMarker(markPoint) {
            var marker = new GMarker(markPoint, { draggable: true });
            GEvent.addListener(marker, "dragend", function(latlng) {
   var e_lat = latlng.lat(); //拖放后纬度
                var e_lng = latlng.lng(); //拖放后经度
                $(".LgtInput").val(e_lat); //赋值给前台的label
                $(".LitInput").val(e_lng);
            });
            GEvent.addListener(marker, "drag", function(latlng) {
                var e_lat = latlng.lat(); //拖放后纬度
                var e_lng = latlng.lng(); //拖放后经度
                $(".LgtInput").val(e_lat);
                $(".LitInput").val(e_lng);

            });
            return marker;
        }


5.在地图上画出两点之间的行车路线,参数:实例化的地图,出发点,目的地
function setDirection(map,fromAddr,toAddr)

{
var gdir = new GDirections(map);
var geocoder = new GClientGeocoder();
geocoder.getLocations(fromAddr,
function(json){
if (!json)
{
alert("解析\""+address+"\"错误");
}
else{
var addressRoute ="from:"+address+"@"+json.Placemark[0].Point.coordinates[1]

+","+json.Placemark[0].Point.coordinates[0]

+" to:"+toAddr+"@";
gdir.load(addressRoute,{travelMode:G_TRAVEL_MODE_DRIVING});
}
});
}


6.使用google local search,虽然google map API提供了地图搜索的插件,但是搜索框是google样式的,作为产品当然是不允许的,所以自己实现输入框和搜索按钮,用JS实现调用google lacol search的功能。

$(".button").click(function() {//给自己实现的按钮添加事件响应
     if ($(".input").val()) {//从输入框得出搜索内容
gLocalSearch.setCenterPoint(map.getCenter());
gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);//索引结果的个数,最少为4个,最大为8个
gLocalSearch.setSearchCompleteCallback(this, function() {
if (gLocalSearch.results) { //遍历搜索结果
   for (var i = 0; i < gLocalSearch.results.length; i++) {
    var title = gLocalSearch.results[i].title.replace(/\<[\/]?b\>/ig, "");
var itemHtml = "<li><span title='" + title + "'><a herf='#' itemIdx=" + i + ">" + localTitle + "</a></span><span title='" + gLocalSearch.results[i].streetAddress + "'>" + localAddr + "</span><span >";

         if (gLocalSearch.results[i].phoneNumbers)
       itemHtml += gLocalSearch.results[i].phoneNumbers[0].number;
                itemHtml+="</span><em>"+ String.fromCharCode("A".charCodeAt(0) + i) + "</em><b itemid='" + i + "'></b></li>";
//搜索结果的名称,地址,地话等信息打印
alert(itemHtml);



});
       gLocalSearch.execute($(".input").val());//执行搜索操作

        }
    });

 

分享到:
评论

相关推荐

    GoogleMap+LocalSearch

    GoogleMap+LocalSearch获取查找的地址,经纬度

    GoogleMap与BingMap接口分析

    ### GoogleMap与BingMap接口分析 #### 一、GoogleMap API详解 ##### 1.1 前言 在地图开发领域,Google Maps API 是一个广泛使用的工具集,为开发者提供了丰富的功能来构建交互式地图应用。这些API不仅支持基本的...

    amap_search_fluttify-master_flutter_map_

    在本文中,我们将深入探讨如何在Flutter应用中集成并使用高德地图插件`amap_search_fluttify-master`,以及它如何为开发者提供强大的地图功能。Flutter是一种跨平台的开发框架,允许开发者使用单一代码库构建iOS和...

    Google AJAX Search API

    The Map Search Control is a simple to use application of the Google AJAX Search API that is designed to let you easily add a searchable map to your pages, sites, and blogs. The control on the right ...

    Google Map Api和GOOGLE Search Api整合实现代码

    在本文中,我们将深入探讨如何将Google Map API与Google Search API进行整合,以便在地图上显示基于地理位置的搜索结果。这个整合实现的核心是一个名为`KMapSearch`的JavaScript类,它利用面向对象的设计来简化这一...

    用Ajax开发GoogleMap行车路线查询应用

    ### 使用Ajax开发GoogleMap行车路线查询应用:深入解析与实践 #### 背景与技术概览 在Web 2.0时代,Web应用的开发方式经历了革新性的转变,Ajax技术成为了主流,它极大地提升了用户体验,使实时交互式应用成为可能...

    Google Map开发房产地图实例

    ### Google Map开发房产地图实例详解 #### 一、概述 本文档主要介绍如何利用Google Maps JavaScript API V3 和 Google Local Search API 来开发一个房产地图应用。通过详细步骤的讲解和示例代码的展示,帮助读者...

    google map api 实例

    google map api 实例 可以实现 地址解析、单击反向地址解析并提示、Google Search Bar,等功能

    Android-位置搜索智能提示框利用了GoogleMap的Api

    "Android-位置搜索智能提示框利用了GoogleMap的Api"这个项目正是为了优化用户在搜索位置时的交互体验。Google Map API是一个强大的工具,它允许开发者将地图功能集成到自己的应用程序中,包括定位、路线规划、地理...

    C#调用Google Map搜索服务程序

    通过这样的C#源码示例,初学者可以学习如何与Web服务交互、处理JSON数据以及在实际项目中应用Google Maps API。这不仅有助于理解C#编程,还能提升对地理信息系统的理解。不过,要记住,Google Maps API有使用限制,...

    unity在线地图Online Maps

    Other web services: AMap Search, Bing Maps Elevation API, Bing Maps Location API, HERE Routing API, Open Route Service Directions, Open Route Service Geocoding, Open Street Map Nominatim, Open Street...

    谷歌三大论文(GFS,big Table,map reduce)

    它是谷歌内部许多关键服务(如Google Search、Gmail和Google Maps)的基础。 - 表格结构:数据组织成表格形式,由行键、列族和列标识符构成。 - 分布式架构:数据分布在多个节点上,每个节点处理一部分行。 - ...

    google maps api PHP版本

    3. **地标搜索(Place Search)**:如果你需要在地图上显示特定类型的地点,如餐馆、咖啡馆等,可以使用 Place API 进行搜索。 4. **路径规划(Directions)**:为用户提供从一个位置到另一个位置的详细路线,包括...

    GoogleMap-React.js:Google Map API,Foursquare API

    在"GoogleMap-React.js-master"这个项目中,我们可以预期看到以下内容: 1. **源代码结构**:包含React组件、样式文件、配置文件等。 2. **主要组件**:可能有一个`MapComponent`负责显示地图,一个`SearchBar`组件...

    google-map:谷歌地图 Jquery

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); }); ``` 这里我们设置了地图的中心点、缩放级别和地图类型。 然后,我们可以添加标记和信息窗口。假设你有一个包含地点信息的JSON...

    gfs+BigTable+map reduce 三合一.zip

    它被广泛应用于Google的各种服务,如Google Search、Google Analytics和Google Maps等。BigTable的关键特性包括行式存储、多版本并发控制、以及基于Chubby锁服务的分布式一致性。 MapReduce是一种编程模型,用于...

    novoed-search:使用 OpenStreetMap 和 Google 地理编码服务和搜索界面提供地址规范化的概念证明

    通过整合两种不同的地理编码服务,即开源的 OpenStreetMap 和商业的 Google Maps API,novoed-search 能够提供更全面、准确的地址解析能力。地址规范化是将用户输入的非标准或不完整地址转换为一致、可定位的标准...

    地图服务器

    1996年MapQuest和Google Local Search的推出标志着商业地图服务的开始。在同一年,MapServer出现了第一批用户。MapServer在1998年变成了开源项目。2000年开放的GPS以及2001年出现的PostGIS都是重要的地理信息系统...

    google三篇论文翻译.zip

    Bigtable的高并发读写能力,使其成为谷歌众多服务如Google Search、Google Analytics等背后的关键支撑。 这三篇论文共同构建了谷歌大数据处理的基石,它们的理念和设计思路被广泛应用于现代云计算和大数据平台,如...

Global site tag (gtag.js) - Google Analytics