GoogleMap离线API绘制折线问题

由于google map是无偏的，GPS模块读出的坐标可以直接对应到地图上，反过来也是。为了应用的方便，所以抓取了无偏的地图瓦片（天地图的无偏街道图及谷歌无偏卫星影像图，天地图的街道图虽然带水印，但是地面标注丰富，所以仍然抓的天地图的，而谷歌的卫星影像图最清晰，分辨率最高。），然后调用谷歌的离线地图API进行显示。但是地图控件可以正常显示，也可以实现指定点标注功能，但是始终无法绘制折线。参考谷歌开发文档，无论是绘制折线，多边形，还是加载kml图层，均无法实现。

例如官方文档#url##里给出的显示kml图层方法：

var ctaLayer = newgoogle.maps.KmlLayer({              
        url:'./ctac.kml',//‘file://nas/Csub/MapTile/tianditu_jpg/Google_JS/’'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
        map:map                                   
    });

或者:

var ctaLayer = newgoogle.maps.KmlLayer();
   ctaLayer.setUrl('=1&localhost/mapsite/Google_JS/ctac.kml');
    ctaLayer.setMap(map);
map.layers[19] =ctaLayer;

以及：

varsrc = 'ctac.kml';
        var kmlLayer = newgoogle.maps.KmlLayer(src, {
        suppressInfoWindows: true,
        preserveViewport: false,
       map: map
    });

无论是在线kml文件还是离线kml文件都无法加载。

而官方给出的绘制折线方法如下：

flightPlanCoordinates= [
        (39.87507033,117.1745868,10),
        (39.8460955,117.164584,10),
        (39.89504067,117.1446192,12),
        (39.8349455,117.1846222,10)
    ];
    var flightPath = new google.maps.Polyline({
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        path: flightPlanCoordinates,
    });
    flightPath.setMap(map);

而这么做始终报错，在newgoogle.maps.Polyline处。

纠结多日，期间从js源码（压缩后的额。。。。。。）看起，一度以为找到了方向，结果还是失败了，不过说实在，还是能确定是传入参数格式有错，就是不知道该怎么传。准备放弃谷歌地图API，看了看百度、腾讯、图吧、高德等等的API换用别家的，在看腾讯地图API的时候发现腾讯地图API和谷歌地图API惊人的相似，除了命名空间从google.maps变成了qq.maps，所以我决定大胆的尝试，仿照腾讯地图API调用方法去调用谷歌地图API。。。。。。结果还真成功了，绘制折线方法如下：

var flightPlanCoordinates = new Array();
var i=0;
flightPlanCoordinates.push(new google.maps.LatLng(113.2354,47.2365));
flightPlanCoordinates.push(newgoogle.maps.LatLng(112.6945,46.2658));
flightPlanCoordinates.push(newgoogle.maps.LatLng(115.2356,45.2368));
var flightPath = new google.maps.Polyline({
         path:flightPlanCoordinates,
         geodesic: true,
         strokeColor:'#FF0000',
         strokeOpacity: 1.0,
         strokeWeight: 2
});

可能是由于离线地图API是毕竟老的GoogleMap在线版地图API修改的，而后续谷歌地图API升级了构造折线不再需要一个坐标对象数组而只需要坐标数组（有待验证）。

原文链接：http://www.straka.cn/blog/googlemap_offlineapi_bugfix/

GoogleMap离线API绘制折线问题

猜你喜欢