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/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Google Map API V3是一种用于在Web应用程序中嵌入和操作Google地图的编程接口。它提供了一组丰富的功能和工具,可以帮助开发者在自己的网站或应用中实现地图和位置相关功能。 使用Google Map API V3,开发者可以轻松地在网页上显示一个互动的地图,包括地图图块、标记、信息窗口、图形和覆盖物等元素。开发者还可以通过调用API提供的方法,获取地图的坐标和视图信息,以及监听用户交互事件。 除了基本的地图显示功能外,Google Map API V3还提供了许多高级功能。例如,开发者可以使用地图的几何库进行位置计算和空间分析,可以实现地图上的地理编码和逆地理编码等操作。API还支持在地图绘制路径和多边形,并可以使用地图上的各种工具控制地图的交互和视图。 Google Map API V3还与其他Google服务集成得很好。例如,开发者可以通过API调用Google Places服务,实现根据关键字搜索地点和显示地点详细信息的功能。还可以使用API调用Google Street View服务,在地图上显示街景图像。 总而言之,Google Map API V3为开发者提供了一个强大而灵活的工具,可以方便地在自己的网站或应用中集成和操作Google地图,实现丰富的地图和位置相关功能。无论是创建一个简单的地图显示页面,还是实现复杂的地理应用,Google Map API V3都是一个很好的选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值