描述
我目前正在为我们的客户使用Google Maps V3,他们要求我们实施一个绘图工具,允许他们创建连接的线流并计算距离.但是,Google Maps V3图库管理器库似乎非常有限,它允许我们捕获折线的点击事件.
我们的守则
google.maps.event.addListener(map, 'click', function(event){
//TODO: Store lat/long of click for distance calculation later
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
//TODO: Display the total distance of the line
});
Run Code Online (Sandbox Code Playgroud)
目标
google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
//TODO: Store lat/long of line for distance calculation and display updated distance.
});
Run Code Online (Sandbox Code Playgroud)
如您所见,我们希望在用户创建折线时捕获纬度/经度,并在创建每条线时显示距离,而不是在整条折线完成后显示距离.
此外,我知道我们可以通过创建自定义处理程序并使用地图的点击方法做一些魔术并在纬度/长度之间手动绘制线条来模仿这一点,但Google Maps API没有针对其绘图管理器的点击方法似乎很奇怪.
澄清
最终目标是具有功能,因此在绘制折线时,我们可以动态显示折线的总长度.IE我首先绘制一条线,出现一个显示"Total Line is X"的部分,我点击第二个点创建第二行,文本更新为"x"+"y",我点击第三个并更新到"x"+"y"+"z"等.这就是为什么我们希望有一个事件来处理"lineDrawn"或"polylineClick"来存储这些纬度/长度,我们可以计算动态创建的线的长度没有用户停止绘制线条以查看总长度.
编辑:更新了我们目标中的 addListener 以使用drawingManager,而不是map.
编辑:添加澄清部分.
javascript google-maps graph-drawing google-maps-api-3 google-maps-markers