请参考下面下面的代码:[code]
Google Maps JavaScript API Example: Editable Polylines body { font-family: Arial, sans serif; font-size: 11px; }#hand_b {
width: 31px;
height: 31px;
background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}
#placemark_b {
width: 31px;
height: 31px;
background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#placemark_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}
#line_b {
width: 31px;
height: 31px;
background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}
#shape_b {
width: 31px;
height: 31px;
background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
}
#shape_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}
<table>
<tr style="vertical-align: top">
<td style="width: 15em">
<table>
<tr>
<td><div id="hand_b" onclick="stopEditing()" /></td>
<td><div id="placemark_b" onclick="placeMarker()" /></td>
<td><div id="line_b" onclick="startLine()" /></td>
<td><div id="shape_b" onclick="startShape()" /></td>
</tr>
</table> <input type="hidden" id="featuredetails" rows=2> </input>
<p>To draw on the map, click on one of the buttons and then click on the map. Double-click to stop drawing a line or shape. Click on an element to
change color. To edit a line or shape, mouse over it and drag the points. Click on a point to delete it.</p>
<table id="featuretable">
<tbody id="featuretbody"></tbody>
</table>
</td>
<td>
<!-- The frame used to measure the screen size -->
<div id="frame"></div>
<div id="map" style="width: 300px; height: 300px"></div>
</td>
</tr>
</table>
[/code]程序运行结果如下图:


