-2
私は、Googleマップ上の通りの一部を選択/削除/更新できる必要があります（写真のように）。Google Maps APIで通りの一部を選択できますか？
この選択されたパーツはサーバーに保存する必要があり、選択した距離のカウンターが必要です。
Google Maps APIでこの問題が起こる可能性はありますか？ GoogleマップのJavaScript APIを使用していると仮定すると
A
答えて
1
。
エンコーディングのためのコードは：
<!DOCTYPE html>
<html>
<head>
<title>Encoding methods</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
float: left;
}
#right-panel {
width: 46%;
float: left;
}
#encoded-polyline {
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<script>
\t \t var poly, map;
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 34.366, lng: -89.519}
});
// Add a listener for the click event
google.maps.event.addListener(map, 'click', function(event) {
addLatLngToPoly(event.latLng, poly);
});
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* Updates the encoding text area with the path's encoded values.
*/
function addLatLngToPoly(latLng) {
\t \t \t if(!poly){
\t \t \t \t poly = new google.maps.Polyline({
\t \t \t \t \t strokeColor: '#000000',
\t \t \t \t \t strokeOpacity: 1,
\t \t \t \t \t strokeWeight: 3,
\t \t \t \t \t map: map
\t \t \t \t \t });
\t \t \t }
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
\t \t \t if(path.length==2){
\t \t \t \t poly = new google.maps.Polyline({
\t \t \t \t \t strokeColor: '#000000',
\t \t \t \t \t strokeOpacity: 1,
\t \t \t \t \t strokeWeight: 3,
\t \t \t \t \t map: map
\t \t \t \t \t });
\t \t \t }
\t \t \t path = poly.getPath();
\t \t \t path.push(latLng);
// Update the text field to display the polyline encodings
var encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById('encoded-polyline').value = encodeString;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"
async defer></script>
</body>あなたは、データベース内のエンコードされた文字列を保存することができます。
同様に、あなたは、保存されたポリラインをデコードすることができます：それは場合に役立ちます
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<style type="text/css">
#map {width:670px;height:600px;}
</style>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(51.65905179951626, 7.3835928124999555);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var decodedPath = google.maps.geometry.encoding.decodePath('}[email protected]\\[email protected]@r{[email protected]@[email protected]@[email protected]}[email protected]_h|@r{Zad\\y|_D}[email protected]@[email protected]}llBpoZqa{@[email protected]~eBaaX}{[email protected]}[email protected]`dYs_NquNgbjAf{[email protected]|[email protected]@}[email protected]}[email protected]|[email protected]@r{ZhjFr}[email protected]}@[email protected]@');
var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");
var setRegion = new google.maps.Polyline({
path: decodedPath,
levels: decodedLevels,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
function decodeLevels(encodedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.length; ++i) {
var level = encodedLevelsString.charCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodedLevels;
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>はupvoteすることを忘れないでください！
関連する問題
- 1. Google Maps APIで「デフォルト」マーカーを自動的に選択
- 2. Maps APIをV3：Google MapsのAPI V3で
- 3. 一部のデバイスでGoogle Maps API Androidの場所が間違っています
- 4. Google Maps Android API V2がレイアウトの一部をブラックアウトする
- 5. Google Maps API Direction Service：選択したルートの距離を表示
- 6. Google Maps API - 単一のinfoWindowを開きます
- 7. Google Map API - プランの選択
- 8. GithubページでGoogle Maps APIを使用できますか？
- 9. ユーザーはGoogle Maps Android API v2でストリートビューをアップロードできますか？
- 10. Google Maps API、国全体のマーカーを設定できますか？
- 11. Google Maps API v2 - infoWindowの下部に大きな隙間があります
- 12. Google Maps APIでloadFromWaypointsの代替手段はありますか？
- 13. Java、Python、RubyでGoogle Maps APIにアクセスできますか？
- 14. 交通情報を提供するGoogle Maps API for iOSはありますか？
- 15. 条件付きでテーブルの一部を選択します。
- 16. Flash内のGoogle Maps APIにアクセスできますか？
- 17. Google Maps APIとGoogle Maps Engine？
- 18. Google Maps Data APIとGoogle Maps API
- 19. ハイパーリンクの範囲の一部を選択できません
- 20. 選択した列の一部をグループ化できません
- 21. Google Maps API V3 fromDivPixelToLatLngに一貫性がありません
- 22. Google MapsのStreetviewイベントGoogle Maps JavaScript API V3が見つかりません
- 23. 選択したGoogle PlayサービスAPIでクラスが見つかりません
- 24. Google Maps API Javascriptから座標を取得できません
- 25. Google Maps API：アドレス部分を明示的に修飾できるか
- 26. Google Maps APIボタンは、道路を通りの表示に変更します
- 27. Google Maps APIプレイスライブラリでNearbySearchを使用すると、Google Maps APIプレイスライブラリの
- 28. 一部の地域でZERO_RESULTSを返すGoogleタイムゾーンAPI
- 29. google api infoWindow google maps api
- 30. Apple MapsとGoogle Maps APIのパラメータは同じですか？
1つのポリラインではなく、多数の連結されていないポリラインを作成することは可能ですか？ –
コードスニペットを更新しました。これで2点間に多数の連結ポリラインを追加できるようになりました。テキストボックスに最後のポリラインの文字列が表示されます。それが役に立てば幸い！ – arnabkaycee