（これは、私が作成した他の投稿、PhoneGapのGoogle Maps API v3からの分割です：移動後にマーカーが正しく描画されません）。PhoneGapを使用してAndroidでGoogleMapsAPI3アプリケーションに取り組んでいます。ユーザーの場所を追跡し、その場所をマーカーとその周りの円でマークする必要があります。私はこれをAndroid2.3で開発していましたが、正常に機能していました。その後、Android 4.xを搭載した携帯電話にアップグレードしましたが、それでも問題なく動作していると思いました。
それから先週、マーカーとサークルを動かしたときに、Googleマップが奇妙なことをしていることに気づき始めました。単に移動するのではなく、重複したマーカーと円を作成するように見えます。他の投稿では、マーカーの問題については回答がありましたが、サークルについては回答がありませんでした。ズームを変更すると、重複した円が消えてしまうことがあります。しかしまた、それは時々上から奇妙な接線を描きます。下の画像を参照してください。
私は自分の携帯電話でバージョン4.1.1へのAndroidアップデートを受け取った直後にこれに気づき始めました。それが関連しているかどうかはわかりませんが、問題に関する情報が見つかりません。
マップとphonegapコードを非常に最小限のサンプルに減らしましたが、それでも実行しています。私はそれがphonegapとは関係がないと確信しています。確かに、とにかく電話ギャップを2.2にアップグレードしましたが、予想どおり、それは役に立ちませんでした。サークルを動かすときに何か間違ったことをしているのか誰かわかりますか？
私が試した解決策の1つは、円を移動する前に非表示にし、移動後にもう一度表示することでした。これで重複と接線の問題は解決したように見えましたが、マップがフラッシュされ、3秒ごとに移動すると非常に煩わしくなりました。したがって、それは許容できる解決策のようには思えません。テストコードは以下のとおりです。テストコードでGoogleMapsAPIキーを削除したことに注意してください。
また、正しく再描画する1つの方法は、円の一部が表示されないようにマップをドラッグすることであることも学びました。次に、円が表示されるようにドラッグして戻すと、1つの正しい円として再描画されます。
ありがとう、エリック
<!DOCTYPE HTML>
<html>
<head>
<title>Marker Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height: 100%}
body {height: 100%; margin:0; padding:0}
#map_canvas {height: 100%}
</style>
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&sensor=true"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// globals
var watchID = null;
var map = null;
var myLocationMarker = null;
var searchCircle = null;
// PhoneGap is ready
//
function onDeviceReady() {
startGPS();
}
function onUnLoad() {
console.log("clearing watch " + watchID);
navigator.geolocation.clearWatch(watchID);
}
function startGPS() {
console.log("In startGPS");
var refreshMilliseconds = 5000;
var options = { frequency: refreshMilliseconds, enableHighAccuracy: true};
watchID = navigator.geolocation.watchPosition(onGPSSuccess, onGPSError, options);
// create Google map
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
myLocationMarker = new google.maps.Marker({
title: 'This is me!',
zIndex: 90,
optimized: false,
map:map
});
searchCircle = new google.maps.Circle({
fillColor: '#c0e4dd',
strokeColor: '#f15f22',
fillOpacity: 0.5,
radius: 1500,
map:map
});
}
var onGPSSuccess = function(p) {
// get the new coordinates
var lat = p.coords.latitude;
var lng = p.coords.longitude;
console.log("watch ID " + watchID);
// now that we have the coordinates, we can move the marker and circle on the Google Map
MoveMarkerAndCircle(lat, lng);
};
var MoveMarkerAndCircle = function(lat, lng) {
var myLocation = new google.maps.LatLng(lat, lng);
myLocationMarker.setPosition(myLocation);
// searchCircle.setVisible(false);
searchCircle.setCenter(myLocation);
// searchCircle.setVisible(true);
map.setCenter(myLocation);
}
var onGPSError = function() {
console.log("GPS Error");
};
var GenerateFakeMovement = function() {
var currentPosition = myLocationMarker.getPosition();
var newLat = currentPosition.lat() + 0.01;
var newLng = currentPosition.lng() + 0.01;
MoveMarkerAndCircle(newLat, newLng);
}
</script>
</head>
<body style="height:100%;text-align:center" onunload="onUnLoad()">
<div id="map_canvas" style="width: 100%;height:80%"></div>
<a href='#' onclick="GenerateFakeMovement();" style="padding-top:5px">MAKE FAKE MOVEMENT</a>
</body>
</html>
