码迷，mamicode.com
首页 > Windows程序 > 详细

Google Map API V3开发（6） 代码

时间：2016-04-15 11:56:06      阅读：325      评论：0      收藏：0      [点我收藏+]

标签：

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

标签：

原文地址：http://www.cnblogs.com/jhlong/p/5394801.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！