Question

（这与我发布的其他帖子Google Maps API v3 in PhoneGap: markers not drawing properly after move分开了。我一直在Android上使用PhoneGap开发Google Maps API 3应用程序。它应跟踪用户位置并使用标记和周围的圆圈标记位置。我一直在Android 2.3上开发它，它工作正常。然后我升级到Android 4.x的手机，它仍然运行良好，我想。

然后上周，当我移动Marker and Circle时，我开始注意到谷歌地图做了一些奇怪的事情。它似乎创建了一个重复的Marker和Circle，而不仅仅是移动它们。在另一篇文章中，我得到了Marker问题的答案，但不是Circle。有时如果我改变缩放，那么复制的圆圈似乎就会消失。但是，它偶尔会从顶部画出一些奇怪的切线。见下图。

我在手机上收到Android 4.1更新后不久便开始注意到这一点。不确定是否相关，我找不到任何有关问题的信息。

我将地图和phonegap代码缩减为一个非常小的样本，它仍然在做。我很确定它与phonegap无关。我确实将我的手机屏幕升级到2.2，但正如预期的那样，它没有帮助。移动圆圈时，有谁可以告诉我是否做错了什么？

我试过的一个解决方案是在移动它之前隐藏圆圈，然后在移动它之后再次显示它。这似乎解决了重复和切线问题，但它使地图闪烁，当你每3秒移动一次时，这真的很烦人。所以这似乎不是一个可接受的解决方案。测试代码如下。请注意，我在测试代码中删除了我的Google Maps API密钥。

我还了解到，让它正确重绘的一种方法是拖动地图，以便任何圆圈的任何部分都不可见。然后，当我将其向后拖动以使圆圈可见时，它会重新绘制为一个正确的圆圈。

谢谢，Eric

<!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>

2 Circles tangent line broken circles

Answer 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="http://maps.googleapis.com/maps/api/js?v=3&sensor=true"></script>
<script type="text/javascript" charset="utf-8">
    var watchID = null;
    var map = null;
    var myLocationMarker = null;
    var searchCircle = null;
    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};

    if(watchID ==null)
    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");
};

function GenerateFakeMovement() {
 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" onload="onDeviceReady()" 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>

Answer 2

可能与您的问题无关，但如果您将圆圈绑定到标记，则无需手动设置圆圈位置。

 if (myMarker == undefined) {
      myMarker = new google.maps.Marker({
          position: mouseEvent.latLng,
          title: 'My Position',
          map: map,
          draggable: true
      });

      var circle = new google.maps.Circle({
          map: map,
          radius: 100000, // 100 km
          fillOpacity: 0.1,
          strokeOpacity: 0.5,
          strokeWeight: 1
      });

      circle.bindTo('center', myMarker, 'position'); //This will set the circle bound to the marker at center
}

所以你只需要更新标记的位置。希望这会有所帮助。

Answer 3

我希望通过将其作为“答案”发布来做正确的事情。我仍然有这个问题，但我已经缩小了我自己的例子，直到它显然只是Android 4.1.1上的Google Maps API v3的问题。缩小测试用例的代码如下，不再涉及PhoneGap。

我在网上发布了测试页面： http://kcwebprogrammers.com/MarkerTest-NoGps.html

如果您在Windows（Chrome或IE）或Android 2.3上使用互联网浏览器浏览，那么移动圆圈就可以了。如果您在Android 4.1.1上使用Internet浏览器浏览到同一页面，那么您将看到在移动圆圈后原始圆圈仍然可见，从而导致出现两个圆圈。所以I've posted the issue to the Google Maps issue list.

感谢上面的建议。如果有人认为我应该对这篇文章做任何不同的事情，请告诉我。

<!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="http://maps.googleapis.com/maps/api/js?key=AIzaSyDTGR9VjM2t5ixumkk_jHg155s0C1S5g3Y&sensor=true"></script>
<script type="text/javascript" charset="utf-8">

// globals
var watchID = null;
var map = null;
var myLocationMarker = null;
var searchCircle = null;
var myLocation = null;

function onLoad() {
    startGPS();
}

function onUnLoad() {
    console.log("clearing watch " + watchID);
}

function startGPS() {
    // simulate getting position from GPS
    myLocation = new google.maps.LatLng(39, -90);

    // create Google map
    var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center:myLocation
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.trigger(map, 'resize');

    myLocationMarker = new google.maps.Marker({
        title: 'This is me!',
        zIndex: 90,
        optimized: false,
        map:map,
        position: myLocation
    });     

    searchCircle = new google.maps.Circle({
        fillColor: '#c0e4dd',
        strokeColor: '#f15f22',
        fillOpacity: 0.5,
        radius: 1500,
        map:map,
        center:myLocation
    });
    // using bindTo instead does not fix the problem
//  searchCircle.bindTo('center', myLocationMarker, 'position'); //This will set the circle bound to the marker at center
}

var MoveMarkerAndCircle = function(lat, lng) {
    myLocation = new google.maps.LatLng(lat, lng);
    myLocationMarker.setPosition(myLocation);

    // set circle invisible before moving and visible after does fix redraw for 4.1.1
    // but causes some annoying flashing of the circle for 4.1.1 and everything else
//  searchCircle.setVisible(false);
    searchCircle.setCenter(myLocation);
//  searchCircle.setVisible(true);
}

var GenerateFakeMovement = function() {
    var currentPosition = myLocationMarker.getPosition();
    var newLat = currentPosition.lat() + 0.001;
    var newLng = currentPosition.lng() + 0.001;
    MoveMarkerAndCircle(newLat, newLng);
}
</script>
</head>
<body  style="height:100%;text-align:center" onunload="onUnLoad()" onload="startGPS()">
    <div id="map_canvas" style="width: 100%;height:90%"></div>
    <a href='#' onclick="GenerateFakeMovement();" style="padding-top:5px">MOVE MARKER AND CIRCLE</a>
</body>
</html>

PhoneGap中的Google Maps API v3：移动后复制并绘制切线

3 个答案: