由于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/