GoogleMap离线API绘制折线问题
2017-11-30 21:58
176 查看
由于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/
例如官方文档#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/
相关文章推荐
- python 实现双纵轴(y)轴图像的绘制(中文label),解决只显示一个折线label的问题
- C#绘制成比例缩放的折线图
- MFC下双缓冲解决高速绘制刷新闪烁问题+多媒体定时器
- svg 绘制曲线动态进度条 避免canvas锯齿问题
- iOS 绘制漂亮的折线图
- Android UI性能优化实战 识别绘制中的性能问题
- Visifire图表控件对有大差异数据的图标绘制问题
- IOS绘制动画颜色渐变折线条
- 一个光标绘制问题的解决过程
- Android自定义组件系列【9】——Canvas绘制折线图
- C# 绘制统计图(柱状图, 折线图, 扇形图)
- VS2010 使用TeeChart画图控件 - 之二 - 绘制图形(折线图,柱状图)
- Android UI性能优化实战 识别绘制中的性能问题
- C# 绘制统计图(折线,柱状图,饼图)
- Android绘制line chart的过程(折线图)
- 【Android开源框架】使用andbase开发框架实现绘制折线图
- ASP.NET绘制折线图---(2)获取数据
- C# 绘制统计图(柱状图, 折线图, 扇形图)
- iOS 百度地图绘制折线
- cocos2dx2.1版本中使用CCTextureAtlas drawQuads绘制问题