基本信息
源码名称：google 地图使用例子
源码大小：5.37KB
文件格式：.php
开发语言：PHP
更新时间：2016-03-04
   源码介绍
因为引用的是google map的js，所以测试时 需FQ 你懂得。。


<!DOCTYPE html>
<html>
    <head>
        <title>GeoLocation</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                margin: 0;
                padding: 0;
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            var map;
            var poly;
            function initialize() {
            var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);
            var locations = [
            ['test1, accuracy: 150m', 31.1937077, 121.4158436, 100],
            ['test2, accuracy: 150m', 31.2937077, 121.4158436, 100],
            ['test3, accuracy: 150m', 31.0937077, 121.2158436, 100],
            ['test4, accuracy: 150m', 31.3937077, 120.4158436, 100],
            ['test5, accuracy: 150m', 31.1637077, 120.4858436, 100],
            ['test6, accuracy: 150m', 31.1037077, 121.5158436, 100]
            ];
            var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            // 线条设置
            var polyOptions = {
            strokeColor: '#00ff00',    // 颜色
            strokeOpacity: 1.0,    // 透明度
            strokeWeight: 4    // 宽度
            }
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);    // 装载
            /* 循环标出所有坐标 */
            /*for(var i=0; i<locations.length; i  ){
            var loc = [];
            loc.push(locations[i][1]);
            loc.push(locations[i][2]);
                var path = poly.getPath();    //获取线条的坐标
                path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标
            //生成标记图标
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(loc[0], loc[1]),
                map: map
                // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
            });
            }*/
            var marker, i, circle;
            var iwarray = [];
            var infoWindow;
            var latlngbounds = new google.maps.LatLngBounds();
            var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
            for (i = 0; i < locations.length; i  ) {
                var loc = [];
                loc.push(locations[i][1]);
                loc.push(locations[i][2]);
                    var path = poly.getPath();    //获取线条的坐标
                path.push(new google.maps.LatLng(loc[0], loc[1]));
                var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
                latlngbounds.extend(latlng);
            if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) {
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        icon: iconYellow
                    });
                    var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">'   locations[i][0]   '<font></strong><div>';
                } else {
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                    var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">'   locations[i][0]   '<font></strong><div>';
                }
                iwarray[i] = iw;
                google.maps.event.addListener(marker, 'mouseover', (function(marker,i){
                        return function(){
                            infoWindow = new google.maps.InfoWindow({
                                content: iwarray[i],
                                maxWidth: 200,
                                pixelOffset: new google.maps.Size(0, 0)
                            });
                            infoWindow.open(map, marker);
                        }
                    })(marker,i));
                google.maps.event.addListener(marker, 'mouseout', function() {
                    infoWindow.close();
                });
                circle = new google.maps.Circle({
                    map: map,
                    radius: locations[i][3],
                    fillColor: '#0000AA',
                    fillOpacity: 0.01,
                    strokeWeight: 1,
                    strokeColor: '#0000CC',
                    strokeOpacity: 0.8
                });
                circle.bindTo('center', marker, 'position');
            }
            map.fitBounds(latlngbounds);
            var listener = google.maps.event.addListenerOnce(map, "idle", function()
                {
                var zoomLevel = parseInt(map.getZoom());
                if (zoomLevel > 13)
                    map.setZoom(13);
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>