zoukankan html css js c++ java

☀【移动】Google Maps JavaScript API v3

Google Maps JavaScript API v3
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn

GPSspg
http://www.gpsspg.com/maps.htm

<!DOCTYPE html>
<html>
  <head>
    <title>Simple 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: 'hangzhou',
                url: 'http://s.baomihua.com/phone/home.aspx#hangzhou',
                longitude: 30.27211440480,
                latitude: 120.15266418460 
            },
            {
                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: 5,
                center: new google.maps.LatLng(31.2081033213, 121.4758300781)
            }

            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>

查看全文

相关阅读:
MySQL(一)
HTML基础
 python函数基础
 常用的模块
 面向对象进阶
 定制自己的数据类型
 Shell篇之AWK
MATLAB如何实现傅里叶变换FFT？有何物理意义？
傅里叶分析
 2018年度关键词

原文地址：https://www.cnblogs.com/jzm17173/p/3453663.html