分类: H5/JS/CSS

google地图调用方法

[ 2016-09-01 13:29:26 | 作者: admin ]
字号: 大 | 中 | 小
<!DOCTYPE html>
<html>
     <head>
         <title>Map</title>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
         <style>
                html, body, #map-canvas {
                     height: 100%;
                     margin: 0px;
                     padding: 0px
                }
         </style>
         <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
         <script>
                var map
                var latLngArray = [
                     {
                     name: 'huzhou',
                     url: '#huzhou',
                     longitude: 30.87107702729847,
                     latitude: 120.06208521176814
                     }/*,
                     {
                     name: 'shanghai',
                     url: 'http://s.baomihua.com/phone/home.aspx#shanghai',
                     longitude: 31.2274816320,
                     latitude: 121.4772033691
                     },
                     {
                     name: 'beijing',
                     url: 'http://s.baomihua.com/phone/home.aspx#beijing',
                     longitude: 39.8970943726,
                     latitude: 116.4056396484
                     }*/
                ]
                var markersArray = []

                function initialize() {
                     var mapOptions = {
                     zoom: 15,
                     center: new google.maps.LatLng( 30.87107702729847 , 120.06208521176814 )
                     }

                     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)

                     if (latLngArray) {
                     for (var i in latLngArray) {
                     addMarker(new google.maps.LatLng(latLngArray[i].longitude, latLngArray[i].latitude), latLngArray[i].url)
                     }
                     }

                     showOverlays()
                }

                function addMarker(location, url) {
                     var marker = new google.maps.Marker({
                     position: location,
                     map: map
                     })
                     markersArray.push(marker)
                }

                function showOverlays() {
                     if (markersArray) {
                     for (var i in markersArray) {
                     markersArray[i].setMap(map)
                     markersArray[i]._index = i
                     google.maps.event.addListener(markersArray[i], 'click', function() {
                     location.href = latLngArray[this._index].url
                     })
                     }
                     }
                }

                google.maps.event.addDomListener(window, 'load', initialize)
         </script>
</head>
<body>
         <div id="map-canvas"></div>
</body>
</html>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2339

这篇日志没有评论。

此日志不可发表评论。