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) 代码


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

   <title>Google Maps API V3 Demo</title>

    <script type="text/javascript" src='http://maps.googleapis.com/maps/api/js?v=3&sensor=true&language=hk'></script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places,weather&sensor=true"></script>

    <script type="text/javascript">

          var map;

          var autocomplete;

          var styles = [];

          var directionsDisplay;

          var elevator;

          function initialize() {

            var myOptions = {

                zoom: 13,

                center: new google.maps.LatLng(22.1623, 113.5552),

                mapTypeId: google.maps.MapTypeId.ROADMAP,

                scaleControl: true,

                scaleControlOptions: {

                    position: google.maps.ControlPosition.LEFT_BOTTOM

                }

            }

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

            directionsDisplay = new google.maps.DirectionsRenderer();

            directionsDisplay.setMap(map);

            styles = map.styles;

            var input = document.getElementById('wordSearch');

            var options = {

              //types: ['bank'],

            };

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

            //高程

            elevator = new google.maps.ElevationService();

            google.maps.event.addListener(map, 'click', getElevation);

        }

        function AddMarker() {

            var myPoint = new google.maps.LatLng(22.1623, 113.5552);

            createMarker(myPoint, "I'm a marker.", 0)

            var contentString = "<div><div style='font-size:18px;font-weight:bold'><a href='' target='_blank'>Macau Galaxy</a></div><div></div><div>I'm a marker.</div><img src='Images/back.jpg'/></div>";

            myPoint = new google.maps.LatLng(22.148392, 113.554451);

            createMarker(myPoint, contentString, 1)

        }

        //在地图上描点

        function createMarker(point, html, index) {

            var letter = String.fromCharCode("A".charCodeAt(0) + index);

            var icon = "http://ditu.google.com/mapfiles/marker" + letter + ".png";

            var shape = {

                coord: [1, 1, 1, 20, 18, 20, 18, 1],

                type: 'poly'

            };

            var marker = new google.maps.Marker({

                position: point,

                map: map,

                icon: icon,

                shape: shape,

                title: "",

                zIndex: index

            });

            if (index = 0) {

                setClickEvent(map, marker, html, index);

            }

            else {

                setClickEvent2(map, marker, html, index);

            }

            markersArray.push(marker);

        }

        var lastinfowindow = null;

        var markersArray = [];

        function setClickEvent2(map, marker, html, index) {

            var infowindow = new google.maps.InfoWindow({

                content: html,

                maxWidth: 500,

                zIndex: index

            });

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

                infowindow.open(map, marker);

                if (lastinfowindow && lastinfowindow != infowindow) {

                    lastinfowindow.close();

                }

                lastinfowindow = infowindow;

            });

        }

        function setClickEvent(map, marker, html, index) {

            var infowindow = new google.maps.InfoWindow({

                content: "<div>" + html + "</div>",

                maxWidth: 160,

                zIndex: index

            });

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

                infowindow.open(map, marker);

                if (lastinfowindow && lastinfowindow != infowindow) {

                    lastinfowindow.close();

                }

                lastinfowindow = infowindow;

            });

        }

        function MoveMarker() {

            markersArray[0].setPosition(new google.maps.LatLng(22.1633, 113.5642));

            markersArray[1].setPosition(new google.maps.LatLng(22.149392, 113.556451));

        }

        function HideMarker() {

             var btn = document.getElementById("HideMarker");

              if (btn.value == "隐藏 Marker") {

                  btn.value = "显示 Marker";

                  for (var i = 0; i < markersArray.length; i++) {

                      markersArray[i].setMap(null);

                  }

              }

              else if (btn.value == "显示 Marker") {

                  btn.value = "隐藏 Marker";

                  for (var i = 0; i < markersArray.length; i++) {

                      markersArray[i].setMap(map);

                  }

              }

        }

        function RemoveMarker() {

            for (var i = 0; i < markersArray.length; i++) {

                   markersArray[i].setMap(null);

              }

              markersArray.length = 0;

          }

          function checkIfPanMap(point) {

              if (map.getBounds().contains(point)) {

              }

              else {

                  map.panTo(point);

              }

          }

        function showLocation() {

            var addressInput = document.getElementById('address').value;

            if (addressInput != "") {

            var geocoder = new google.maps.Geocoder();

                geocoder.geocode({ address: addressInput,

                    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(22.10, 113.52), new google.maps.LatLng(22.22, 113.62)),

                    //region: "MO/MAC"

                }, function geoResults(results, status) {

                    if (status == google.maps.GeocoderStatus.OK) {

                        RemoveMarker();

                        var lat, lng, point, marker;

                        for (var i = 0; i < results.length; i++) {

                            if (i < 26) { //26个字母,找到26个即可

                                point = results[i].geometry.location;

                                if (i == 0) {

                                    checkIfPanMap(point);

                                }

                                createMarker(point, results[i].formatted_address, i);

                            }

                        }

                    }

                    else {

                        alert("Can not find the Address " + addressInput + ":" + status);

                    }

                })

        }

        else {

            alert("Please enter the Address to Search!");

            }

        }

        function getLocation(){

            var point = map.getCenter();

            var geocoder = new google.maps.Geocoder();

              geocoder.geocode({location:point},function geoResults(results, status){

              //这里处理结果和上面一模一样

              if (status == google.maps.GeocoderStatus.OK) {

                var addressName = results[0].formatted_address;

                if (addressName == "") {

                        alert("Can not locate the Address!");

                    }

                    else {

                        var address = document.getElementById('getAddress');

                        address.value = addressName;

                    }

                }

                else{

                      alert("Can not locate the Address:" + status);

                }

              });

        }

        function CreatePolyline(){

          var pathCoordinates = [

            new google.maps.LatLng(22.143561, 113.552596),

            new google.maps.LatLng(22.142318, 113.5523),

            new google.maps.LatLng(22.142336, 113.552181),

            new google.maps.LatLng(22.15008, 113.550756)

          ];

            var lineSymbol = {

              path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW

            };

          var flightPath = new google.maps.Polyline({

            path: pathCoordinates,

            strokeColor: "#FF0000",

            strokeOpacity: 1.0,

            icons: [{

                icon: lineSymbol,

                offset: '100%'

              }],

            strokeWeight: 2,

            //editable: true

          });

          flightPath.setMap(map);

        }

        function CreatePolygon(){

            var PolygonCoords = [

            new google.maps.LatLng(22.181864, 113.540058),

            new google.maps.LatLng(22.180997, 113.538578),

            new google.maps.LatLng(22.18073, 113.536852),

            new google.maps.LatLng(22.186214, 113.537424)

          ];

          // Construct the polygon

          // Note that we don't specify an array or arrays, but instead just

          // a simple array of LatLngs in the paths property

          Polygon = new google.maps.Polygon({

            paths: PolygonCoords,

            strokeColor: "#FF0000",

            strokeOpacity: 0.8,

            strokeWeight: 2,

            fillColor: "#FF0000",

            fillOpacity: 0.35

          });

          Polygon.setMap(map);

        }
function CreateCircle(){ var CircleOptions = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map, center: new google.maps.LatLng(22.1623, 113.5552), radius: 500 }; Circle = new google.maps.Circle(CircleOptions); } function wordSearch(){ var request = { location: map.getCenter(), radius: '5000', query: document.getElementById('wordSearch').value }; var service = new google.maps.places.PlacesService(map); service.textSearch(request, callback); } function addressSearch(){ var address = map.getCenter(); var request = { location: address, radius: '2000', types: [document.getElementById('addressSearch').value] }; var service = new google.maps.places.PlacesService(map); service.search(request, callback); } function callback(results, status) { //alert(status); if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(place.geometry.location, place.name, i); } } } function calDis(){ //from 澳门大学 to 澳门银河 var dis = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(22.1623, 113.5552), new google.maps.LatLng(22.148392, 113.554451)); document.getElementById('distance').value = dis; } function calLen(){ var pathCoordinates = [ new google.maps.LatLng(22.143561, 113.552596), new google.maps.LatLng(22.142318, 113.5523), new google.maps.LatLng(22.142336, 113.552181), new google.maps.LatLng(22.15008, 113.550756) ]; var len = google.maps.geometry.spherical.computeLength(pathCoordinates); document.getElementById('distance').value = len; } function calArea(){ var PolygonCoords = [ new google.maps.LatLng(22.181864, 113.540058), new google.maps.LatLng(22.180997, 113.538578), new google.maps.LatLng(22.18073, 113.536852), new google.maps.LatLng(22.186214, 113.537424) ]; var area = google.maps.geometry.spherical.computeArea(PolygonCoords); document.getElementById('distance').value = area; } function setStyles(){ var newstyle = [ { stylers: [ { hue: "#00ffe6" }, { saturation: -20 } ] },{ featureType: "road", elementType: "geometry", stylers: [ { lightness: 100 }, { visibility: "simplified" } ] },{ featureType: "road", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; map.setOptions({styles: newstyle}); } function restoreStyles(){ map.setOptions({styles: styles}); } var weatherLayer; var cloudLayer; function addLayer(){ weatherLayer = new google.maps.weather.WeatherLayer({ temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS //FAHRENHEIT 华氏 }); weatherLayer.setMap(map); cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(map); } function removeLayer(){ weatherLayer.setMap(null); weatherLayer = null; cloudLayer.setMap(null); cloudLayer = null; } function calcRoute() { var selectedMode = document.getElementById("mode").value; var university = new google.maps.LatLng(22.1623, 113.5552); var galaxy = new google.maps.LatLng(22.148392, 113.554451); var request = { origin: university, destination: galaxy, // Note that Javascript allows us to access the constant // using square brackets and a string value as its // "property." travelMode: google.maps.TravelMode[selectedMode] }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } function getElevation(event) { var locations = []; // Retrieve the clicked location and push it on the array var clickedLocation = event.latLng; locations.push(clickedLocation); // Create a LocationElevationRequest object using the array's one value var positionalRequest = { 'locations': locations } // Initiate the location request elevator.getElevationForLocations(positionalRequest, function(results, status) { if (status == google.maps.ElevationStatus.OK) { // Retrieve the first result if (results[0]) { // Open an info window indicating the elevation at the clicked position var infowindow = new google.maps.InfoWindow(); infowindow.setContent('高程: ' + results[0].elevation + ' 米'); infowindow.setPosition(clickedLocation); infowindow.open(map); } else { alert('No results found'); } } else { alert('Elevation service failed due to: ' + status); } }); } </script> </head> <body onload="initialize()"> <input type="button" value = "添加 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="AddMarker()"/> <input type="button" value = "移动 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="MoveMarker()"/> <input type="button" id = "HideMarker" value = "隐藏 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="HideMarker()"/> <input type="button" value = "删除 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="RemoveMarker()"/> <input type="button" value = "画折线" style="width:100px;height:33px;vertical-align:middle;" onclick="CreatePolyline()"/> <input type="button" value = "画多边形图形" style="width:100px;height:33px;vertical-align:middle;" onclick="CreatePolygon()"/> <input type="button" value = "画圆" style="width:100px;height:33px;vertical-align:middle;" onclick="CreateCircle()"/> <div style="height: 4px"></div> <input id="address" type="textbox" value = "澳门大学" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/> <input type="button" style="width:63px;height:33px;background-image: url(images/search.jpg);vertical-align:middle;" onclick="showLocation()" /> <input id="getAddress" type="textbox" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "获取地址" onclick="getLocation()" /> <div style="height: 4px"></div> <input id="addressSearch" type="textbox" value = "bank" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "地址搜索" onclick="addressSearch()" /> <input id="wordSearch" type="textbox" value = "银行" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "文字搜索" onclick="wordSearch()" /> <div style="height: 4px"></div> <input id="distance" type="textbox" style="font-size: 18px;vertical-align:middle; width:40%;padding: 3px 3px 3px 3px;"/> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算距离" onclick="calDis()" /> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算长度" onclick="calLen()" /> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算面积" onclick="calArea()" /> <div style="height: 4px"></div> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "设置样式" onclick="setStyles()" /> <input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "恢复样式" onclick="restoreStyles()" /> <input type="button" style="width:90px;height:33px;vertical-align:middle;" value = "添加天气图层" onclick="addLayer()" /> <input type="button" style="width:90px;height:33px;vertical-align:middle;" value = "移除天气图层" onclick="removeLayer()" /> <div style="height: 4px"></div> <strong>出行方式: </strong> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> <option value="TRANSIT">Transit</option> </select> <div style="height: 4px"></div> <div id="map_canvas" style="width: 100%; height: 80%;"></div> </body> </html>

Google Map API V3开发(6) 代码的更多相关文章

  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开发(5)

    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. Tomcat中更改网站根目录

    Tomcat的默认目录是指向webapps下的root目录,输入http://localhost:8080,会打开root目录下的页面.我想让localhost指向我自己的目录.比如webapps/m ...

  2. OpenStack中Keystone的基本概念理解

    原文http://www.kankanews.com/ICkengine/archives/10788.shtml Keystone简介 Keystone(OpenStack Identity Ser ...

  3. openstack命令备忘录

    原文http://my.oschina.net/u/138210/blog/142661 查看rabbitmq 队列 rabbitmqctl list_queues 查看keystone的用户 key ...

  4. 乌版图 read-only file system

    今天在启动虚拟机的时候,运行命令svn up的时候,提示lock,并且read-only file system,这个....我是小白啊,怎么办?前辈在专心写代码,不好打扰,果断找度娘啊 于是乎,折腾 ...

  5. Window下python2.7+Apache+mod_wsgi+Django服务器配置

    前言:试着使用python搭建一个网页,分别在windows下和linux下,本篇文章主要讲解Window下python+Apache+mod_wsgi+Django服务器配置过程中遇见的问题和解决方 ...

  6. Neutron 理解(10):虚拟专用网(VPN)虚拟化 [How Neutron implements VPN Virtualization]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  7. Label控件如何根据字符串自定义大小

    一.. this.label_Msg.AutoSize = false;  //设置label空件不能自动大小 二.. 用代码控制label控件的大小 1.根据字符串.label的宽度 计算字符串的面 ...

  8. C语言中结构体赋值问题的讨论

    今天帮师姐调一个程序的BUG,师姐的程序中有个结构体直接赋值的语句,在我印象中结构体好像是不能直接赋值的,正如数组不能直接赋值那样,我怀疑这个地方有问题,但最后证明并不是这个问题.那么就总结一下C语言 ...

  9. px,em,rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

  10. maven中央仓库访问速度太慢的解决办法

    方法一:修改settings.xml eclipse中集成的maven的settings.xml文件,找了半年也没找到,我们放弃eclipse中的maven,下一个最新的maven,并在eclipse ...