Question

我想使用鼠标悬停或移动谷歌地图等内容。如何绘制我想要的形状而不是几何形状。我想要它，当点击鼠标时，它应该绘制（非线性线），当再次点击鼠标时，绘图应该结束并且应该显示形状有界的闭合区域。可能吗？也许坐标？

Answer 1

我没有Google地图的示例，但这是我为Bing地图创建的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Event mouse down</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
      var map, isDrawing, line;  

      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'YOUR_BING_MAPS_KEY'});

        Microsoft.Maps.Events.addHandler(map, 'mousedown', startDrawing);
        Microsoft.Maps.Events.addHandler(map, 'mouseup', stopDrawing);
        Microsoft.Maps.Events.addHandler(map, 'mousemove', mouseMoved);
      }

      function startDrawing(e)
      {
        try{        
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());
            var loc = e.target.tryPixelToLocation(point);

            line = new Microsoft.Maps.Polyline([loc, loc]);

            map.entities.push(line);

            isDrawing = true;
            map.setOptions({disablePanning: true, disableZooming: true});
        }catch(x){}
      }

      function mouseMoved(e)
      {
        if(isDrawing){
            try{
                var point = new Microsoft.Maps.Point(e.getX(), e.getY());
                var loc = e.target.tryPixelToLocation(point);
                var locs = line.getLocations();
                locs.push(loc);
                line.setLocations(locs);
            }catch(x){}
        }
      }

      function stopDrawing()
      {
        isDrawing = false;
        map.setOptions({disablePanning: false, disableZooming: false});
      }
      </script>
   </head>
   <body onload="getMap();">
      <div id='myMap' style="position:relative; width:1000px; height:800px;"></div>
   </body>
</html>

如何在谷歌地图上绘制任意形状？

1 个答案: