Javascript google maps api多段线绘制不正确
我在谷歌地图上绘制多段线时遇到问题 地图会重复自身,因此当我在(0,-175)到(向东移动)(0,175)处绘制一条多段线时,它会在两点之间绘制一条多段线,但会向西绘制,因此多段线并非如预期的那样从左向右,它实际上会穿过180度经度并生成一条短多段线。这让我认为多段线是用两点之间的最短路径来绘制的,但我认为只有当测地线设置为真,我甚至没有将它设置为真,所以默认情况下它应该为假Javascript google maps api多段线绘制不正确,javascript,google-maps,Javascript,Google Maps,我在谷歌地图上绘制多段线时遇到问题 地图会重复自身,因此当我在(0,-175)到(向东移动)(0,175)处绘制一条多段线时,它会在两点之间绘制一条多段线,但会向西绘制,因此多段线并非如预期的那样从左向右,它实际上会穿过180度经度并生成一条短多段线。这让我认为多段线是用两点之间的最短路径来绘制的,但我认为只有当测地线设置为真,我甚至没有将它设置为真,所以默认情况下它应该为假 所以我的问题是如何解决这个问题?在多段线的中间添加一个点 代码段(蓝线为原始路径,更新线为红色,蓝色标记位于附加点)
所以我的问题是如何解决这个问题?在多段线的中间添加一个点 代码段(蓝线为原始路径,更新线为红色,蓝色标记位于附加点):
var-map=null;
var界限=null;
var infowindow=new google.maps.infowindow({
尺寸:新谷歌。地图。尺寸(150,50)
});
函数初始化(){
变量myOptions={
缩放:10,
中心:新google.maps.LatLng(-33.9151.2),
mapTypeControl:true,
mapTypeControlOptions:{
样式:google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制:对,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map(document.getElementById(“map_canvas”),
肌肽);
bounds=新的google.maps.LatLngBounds();
google.maps.event.addListener(映射,'click',函数(){
infowindow.close();
});
var startPoint=newgoogle.maps.LatLng(40.0175.0);
扩展(起始点);
var endPoint=new google.maps.LatLng(42.00547,-122.61535);
扩展(端点);
var normalPolyline=新建google.maps.Polyline({
路径:[起点,终点],
strokeColor:#0000FF“,
笔划不透明度:0.5,
冲程重量:2,
地图:地图
});
createMarker(startPoint,“开始:”+startPoint.toUrlValue(6)+“
-”,“开始”);
createMarker(端点,结束:+endPoint.toUrlValue(6)+“
-”,“结束”);
var geodesicPoly=新的google.maps.Polyline({
路径:[起点,终点],
strokeColor:#00FF00“,
笔划不透明度:0.5,
冲程重量:2,
测地线:正确,
地图:地图
});
google.maps.event.addListener(映射'projection_changed',函数(){
//加载投影后初始化的第二部分
var normalCenterPoint=normalPolyline.GetPointAtDistance(google.maps.geometry.spherical.computedDistanceBeween(startPoint,endPoint)/2);
createMarker(法线中心点,“法线多段线的中心
”+法线中心点。toUrlValue(6)+“
-”,“中间”,”http://maps.google.com/mapfiles/ms/icons/blue.png");
var normalPolylineCenter=新建google.maps.Polyline({
路径:[起点、法线中心点、终点],
strokeColor:#FF0000“,
笔划不透明度:0.5,
冲程重量:2,
地图:地图
});
映射边界(bounds);
});
映射边界(bounds);
}
函数createMarker(板条、html、标题、图标){
var contentString=html;
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
图标:图标,
标题:标题,,
zIndex:Math.round(latlng.lat()*-100000)在多段线的中间添加一个点
代码段(蓝线为原始路径,更新线为红色,蓝色标记位于附加点):
var-map=null;
var界限=null;
var infowindow=new google.maps.infowindow({
尺寸:新谷歌。地图。尺寸(150,50)
});
函数初始化(){
变量myOptions={
缩放:10,
中心:新google.maps.LatLng(-33.9151.2),
mapTypeControl:true,
mapTypeControlOptions:{
样式:google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制:对,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map(document.getElementById(“map_canvas”),
肌肽);
bounds=新的google.maps.LatLngBounds();
google.maps.event.addListener(映射,'click',函数(){
infowindow.close();
});
var startPoint=newgoogle.maps.LatLng(40.0175.0);
扩展(起始点);
var endPoint=new google.maps.LatLng(42.00547,-122.61535);
扩展(端点);
var normalPolyline=新建google.maps.Polyline({
路径:[起点,终点],
strokeColor:#0000FF“,
笔划不透明度:0.5,
冲程重量:2,
地图:地图
});
createMarker(startPoint,“开始:”+startPoint.toUrlValue(6)+“
-”,“开始”);
createMarker(端点,结束:+endPoint.toUrlValue(6)+“
-”,“结束”);
var geodesicPoly=新的google.maps.Polyline({
路径:[起点,终点],
strokeColor:#00FF00“,
笔划不透明度:0.5,
冲程重量:2,
测地线:正确,
地图:地图
});
google.maps.event.addListener(映射'projection_changed',函数(){
//加载投影后初始化的第二部分
var normalCenterPoint=normalPolyline.GetPointAtDistance(google.maps.geometry.spherical.computedDistanceBeween(startPoint,endPoint)/2);
createMarker(法线中心点,“法线多段线的中心
”+法线中心点。toUrlValue(6)+“
-”,“中间”,”http://maps.google.com/mapfiles/ms/icons/blue.png");
var normalPolylineCenter=新建google.maps.Polyline({
路径:[起点、法线中心点、终点],
strokeColor:#FF0000“,
笔划不透明度:0.5,
冲程重量:2,
地图:地图
});
映射边界(bounds);
});
映射边界(bounds);
}
函数createMarker(板条、html、标题、图标){
var contentString=html;
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
图标:图标,
标题:标题,,
津德克斯:数学。圆(latlng.lat()*-100000)哇,我都没想到。非常感谢!哇,我都没想到。非常感谢!