zoukankan      html  css  js  c++  java

  • js调用Google地图[转]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
            <title></title>
                    <script type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
                    <script type="text/javascript">
                        var map;//GMap2的核心对象
                    var geocoder = null;//用来解析的
                    var markers = new Array();//用来存放GMarker

                        //查询点击事件
                    function showLocation() {
                        map.clearOverlays();
                        document.getElementById(    'divOutput').innerHTML = "搜索中...";
                            var address = document.getElementById('txtAddress').value;
                        geocoder.getLocations(address, cb_showLocation);    //搜索的核心方法
                    }
                        //回调事件，主要在界面上描点和右侧产生列表信息
                    function cb_showLocation(result) {
                            // 显示结果
                        if (result.Status.code == G_GEO_SUCCESS) 
                        {
                            document.getElementById(    "divOutput").innerHTML = "成功(" + result.Placemark.length + ")<br />";
                                var icon = new GIcon(G_DEFAULT_ICON);
                                var lat, lng, point, address, marker;
                                for (var i = 0; i < result.Placemark.length; i++) {
                                lat     = result.Placemark[i].Point.coordinates[1]; // lat
                                lng = result.Placemark[i].Point.coordinates[0]; // lng
                                address = result.Placemark[i].address; // 地址
                                point = new GLatLng(lat, lng);

                                    //marker = new GMarker(point, { title: i + 1 }); ;
                                //map.addOverlay(marker);
                                //(address+" <a href=javascript:go("+lat+","+lng+")>go</a><br />" );
                                document.getElementById("divOutput").innerHTML += ((i + 1) + " " + address + " <small>" + point.toString() + "</small><br />");
                                createMarker(icon, point, address, i);
                            }
                        }
                            else {
                            document.getElementById(    "divOutput").innerHTML = result.Status.code;
                        }
                    }
                        //在地图上描点
                    function createMarker(icon, point, html, index) {
                            var letter = String.fromCharCode("A".charCodeAt(0) + index);
                        icon.image     = "http://ditu.google.com/mapfiles/marker" + letter + ".png";
                            var marker = new GMarker(point, icon);
                        GEvent.addListener(marker,     "click", function() {
                            marker.openInfoWindowHtml(html);
                        });
                        markers.push(marker);
                        map.addOverlay(marker);
                    }
                        function init() {
                            //检查浏览器的兼容性.
                        if (GBrowserIsCompatible()) {
                            map     = new GMap2(document.getElementById("map_canvas"));
                                //设置地图的中心坐标.
                            var loc = new GLatLng(39.990168, 116.295304);
                            map.setCenter(loc,     5);
                                //创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
                            map.addControl(new GLargeMapControl());
                                //创建带有切换地图类型的按钮的控件。
                            map.addControl(new GMapTypeControl());
                                //设置地图支持滚轮
                            map.enableScrollWheelZoom();
                                //实例化一个地址解析
                            geocoder = new GClientGeocoder();
                        }
                    }
                    window.onload     = init;
                    window.onunload     = GUnload;
            </script>
    </head>
    <body>
                <!-- 地图画板 -->
                <input type="text" id="txtAddress" name="txtAddress" size="40" /><input type="button" value="查询" onclick="showLocation();" />
                <div id="map_canvas" style=" 600px; height: 500px ;float:left;"></div>
                <div id="divOutput" style="float:left;" ></div>
    </body>
    </html><html>
        <head>
        
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <link rel="stylesheet" type="text/css" href="style.css"></link>
                <title></title>
                <script    type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
                <script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
                <script type="text/javascript" src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"></script>
            
                <style type="text/css">
              @import url("http://www.google.com/uds/css/gsearch.css");
              @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
                #top ul li    {
                float    :left;
                padding    :3px 8px;
            
                    }
                #top     {
                width    :100%;
                border-bottom    :1px #666 solid;
                clear    :both;
                height    :20px;
                    }
                  #addHotelMap     {
                    border     : 1px solid #979797;
                    width     :79%;
                    height     : 500px;
                    float    :left;
                      }
                   #searchResult     {
                    border     : 1px solid #979797;
                    width     : 18%;
                    height     : 500px;
                    float    :left;
                    overflow    :scroll;
                    padding    :5px;
                      }
                  #searchResult div    {
                    padding    :5px 0;
                    color    :#333;
                      }
                  ul,li    {
                    margin    :0;
                    padding    :0;
                    list-style    :none;
                      }
                  body    {
                  color    :#999;
                  font-size    :12px;
                  height    :98%;
                      }
                  h1    {
                color    :#666;
                  padding    :0;
                  margin    :0;
                  font-size    :14px;
                  line-height    :22px;
                  height    :22px;
                      }
                 #schollContainer div.list    {
                     background    :url("scholl.png") no-repeat left;
                     padding-left    :20px;
                     }
                </style>
        
                <script type="text/javascript">
                    var map;
                    var hasMarker = false;
                    var markers = new Array();
                    var KMapSearch = window.KMapSearch = function(map_, opts_) 
                {
                        this.opts = { keyWord: opts_.keyWord || "", latlng: opts_.latlng || new GLatLng(31, 121), autoClear: opts_.autoClear || true, icon: opts_.icon || new GIcon(G_DEFAULT_ICON) };
                        this.map = map_;
                        this.gLocalSearch = new google.search.LocalSearch();
                        this.gLocalSearch.setCenterPoint(this.opts.latlng);
                        this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
                        this.gLocalSearch.setSearchCompleteCallback(this, myTips);
                }
                    //请除所有查询结果
                KMapSearch.prototype.clearAll = function() {
                        for (var i = 0; i < markers.length; i++) { this.map.removeOverlay(markers[i]); }
                    markers.length     = 0;
                }
                    //开始查询
                KMapSearch.prototype.execute = function(latLng) {
                        if (latLng) { this.gLocalSearch.setCenterPoint(latLng); }
                        this.gLocalSearch.execute(this.opts.keyWord);
                }
                    //取得查询结果，并以DIV的方式展示
                KMapSearch.prototype.getResult = function(result, i) {
                        var container = document.createElement("div");
                    container.className     = "list";
                        var myRadom = (new Date()).getTime().toString() + Math.floor(Math.random() * 10000);
                    container.id     = myRadom;
                    container.innerHTML     = i + "、" + result.title + "<br />地址：" + result.streetAddress;
                        //this.createMarker(new GLatLng(result.lat, result.lng), result.html, myRadom);
                    return container;
                }
    //载入
    function OnLoad() {
            if (GBrowserIsCompatible()) {
            map     = new GMap2(document.getElementById("map_canvas"));
            map.addControl(    new GLargeMapControl());
            map.addControl(    new GMenuMapTypeControl());
            map.addControl(    new GOverviewMapControl());
            map.enableScrollWheelZoom();
            map.setCenter(    new GLatLng(39.990168, 116.295304), 10);
                //添加右键单击事件
            GEvent.addListener(map, "singlerightclick", function(point) {
                    var initPt = map.fromContainerPixelToLatLng(point);
                map.clearOverlays();
                marker     = new GMarker(initPt, { draggable: true });
                    if (hasMarker) {
                    marker.setLatLng(initPt);
                    map.panTo(initPt);
                }
                    else {
                        //拖拽事件
                    GEvent.addListener(marker, "dragend", function() {
                        initPt     = marker.getLatLng();
                        map.panTo(initPt);
                        searchMap(initPt);
                    });
                    hasMarker     = true;
                }
                map.addOverlay(marker);
                searchMap(initPt);
            });
        }
    }
    //点击提示信息
    function myTips() {
            var content = "";
            var resultdiv = document.getElementById("map");
            for (j = 0; j < markers.length; j++) {
            map.removeOverlay(markers[j]);
        }
        markers.length     = 0;
            var results = this.gLocalSearch.results;
            var icon = new GIcon(G_DEFAULT_ICON);
            var savedResults = document.getElementById("schollContainer");
            if (this.gLocalSearch.results) 
        {
                if (this.opts.autoClear) {
                savedResults.innerHTML     = "";
            }
                for (var i = 0; i < results.length; i++) {
                content     = '<p>' + '名称:' + results[i].title + '<br />' + '地址:' + results[i].streetAddress + '<br />' + '坐标:' + results[i].lat + ',' + results[i].lng + '</p>';
                myCreateMarker(    new GPoint(results[i].lng, results[i].lat), icon, content, i);
                savedResults.appendChild(    this.getResult(this.gLocalSearch.results[i], i + 1));
            }
        }
    }
    //地图上标注
    function myCreateMarker(point, icon, html, index) {
            var letter = String.fromCharCode("A".charCodeAt(0) + index);
        icon.image     = "http://ditu.google.com/mapfiles/marker" + letter + ".png";
            var marker = new GMarker(point, icon);
        GEvent.addListener(marker,     "click", function() { marker.openInfoWindowHtml(html); });
        markers.push(marker);
        map.addOverlay(marker);
    }
    //在给定的坐标附近搜索指定的关键字
    function searchMap(initPt) {
            var myIcon = new GIcon(G_DEFAULT_ICON);
            var mapSearch = new KMapSearch(map, { latlng: initPt, icon: myIcon, keyWord: "驾校" });
        mapSearch.clearAll();
        mapSearch.execute();
    }
                window.onload     = OnLoad;
                window.onunload     = GUnload;
            </script>

            </head>
            <body>
                <!-- 地图画板 -->    
                <div id="map_canvas" style="640px; height:480px ;float:left;"></div>
                <div style="4px; height:480px ;float:left;"></div>
                <div id="searchResult">驾校：<div id="schollContainer"></div></div>
            </body>
    </html>
  • 相关阅读:
    JVM
    SpringDataES
    Lucene
    linux下如何实现mysql数据库每天自动备份定时备份
    java的finalize()函数
    Java代码优化（长期更新）
    HashMap实现原理及源码分析
    Java中的equals和hashCode方法详解
    java中JVM的原理
    Java程序员应该了解的10个设计原则
  • 原文地址：https://www.cnblogs.com/chenqingwei/p/1708088.html
Copyright © 2011-2022 走看看