谷歌地图的部分功能使用笔记

首先引入谷歌地图

下面的引入是国内的地址

<script src="http://maps.google.cn/maps/api/js?key=这里是你的key&sensor=FALSE&libraries=geometry,places"></script>

初始化一个地图

var map;
var myCenter = {lat: 39.9, lng: 116.4}; // 经纬度 北京{lat:31.21268217259167,lng:121.3944947719574}
        /*这里初始化 地图数据*/
        var mapOptions = {
            // 地图中心点  通过坐标（纬度，经度）在地图上创建一个中心点
            center: myCenter,
            // 缩放级数 zoom: 0 显示了整个地球地图的完全缩放。
            zoom: 7,
            // 地图初始类型
            /*google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
             google.maps.MapTypeId.ROADMAP：显示普通的街道地图
             google.maps.MapTypeId.SATELLITE：显示卫星图像
             google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图*/
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("myMap")
                , mapOptions);

绘制点、标记、多边形、圆不做代码演示，参考官方文档，很详细。

…

模拟数据显示对应数据在地图上

    var markerArr = [];
    var infowindowArr = [];
    function show() {
        var data = [
            {lat: 39.9, lng: 116.4,content:'<span style="color:red;">北京</span><img src="http://placehold.it/100x230">'},// 北京
            {lat: 39.12, lng: 117.2,content:'<span style="color:red;">天津</span>'},// 天津
            {lat: 39.52, lng: 116.7,content:'<span style="color:red;">廊坊</span>'}// 廊坊
        ];

        for (var i = 0,len = data.length || 0; i < len; i++) {
            var obj = data[i];
            var pos = new google.maps.LatLng(obj.lat,obj.lng);
            var marker = new google.maps.Marker({
                position: pos,
                map:map
            });
            markerArr.push(marker);
            var infowindow = new google.maps.InfoWindow({
                //maxWidth:110, // 最大宽(像素)
                content:obj.content
            });
            infowindowArr.push(infowindow);
            addMessge(marker,infowindow);
        }
    }

    function addMessge(marker,infowindow){
        marker.addListener('click', function() {
            infowindow.open(map,marker);
        });
    }

计算两个地点之间的距离

需要调用place接口，所以需要在引入链接中加入&libraries=places，同时要在开发者控制台将googleAPI对应的服务打开。

如下代码以廊坊和天津两个点 演示了计算过程：

        var params = new Object();
        params.origin = '39.52,116.7'; // 廊坊
        params.destination = '39.12,117.2'; // 天津
        $.ajax({
            type: "POST",
            data: params,
            url: '{U("Map/directions_api")}',
            success: function (data) {
                var pointsLineStr = data.routes[0].overview_polyline.points;
                var distance = data.routes[0].legs[0].distance.text; // 距离
                var duration = data.routes[0].legs[0].duration.text; // 耗时
                // 获取对应的路径点，绘制路径线路
                var points = google.maps.geometry.encoding.decodePath(pointsLineStr);
                var pathLine = new google.maps.Polyline({
                    path: points,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 5
                });
                pathLine.setMap(map);
            }
        });

此处原本按照官方api，只需要调用

https://maps.google.cn/maps/api/directions/json?origin=起点&destination=终点&key=你的key

就可以返回对应数据，不过我尝试通过jquery的getJSON跨域调用后，返回的json数据解析会报错，所以选择了在后台发送请求调用数据，然后返回页面解析。