android – PhoneGap中的Google Maps API v3：移动后标记无法正确绘制

我一直在Android上使用PhoneGap开发Google Maps API 3应用程序.它应跟踪用户位置并使用标记和周围的圆圈标记位置.我一直在Android 2.3上开发它,它工作正常.然后我升级到Android 4.x的手机,它仍然运行良好,我想.

上周,当我移动标记时,我开始注意到它做了一些奇怪的事情.它似乎创建了一个重复的标记,而不是只是移动它.与圆圈相同.有时如果我改变缩放,那么复制品似乎就会消失.但是,它偶尔会画出一些奇怪的切线.见下图.

这是我在手机上收到Android 4.1更新版本后不久.不确定是否相关,我找不到任何有关问题的信息.

我将地图和phonegap代码减少到不到100行,它仍然在做.我很确定它与phonegap没有关系,但我将其升级到2.2无论如何确定,但它没有帮助.移动标记和圆圈时,有谁可以告诉我是否做错了什么？请注意,我在下面删除了我的Google Maps API密钥.

谢谢,
埃里克

<!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 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,
        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.setCenter(myLocation);

    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">
    <div id="map_canvas" style="width: 100%;height:80%"></div>
    <a href='#' onclick="GenerateFakeMovement();" style="padding-top:5px">MAKE FAKE MOVEMENT</a>
</body>
</html>

解决方法:

我有同样的问题,尝试将optimized：false属性设置为标记：

new google.maps.Marker({
  map: map,
  optimized: false, 
  clickable: true
});

这应该解决它！

原文地址：https://codeday.me/bug/20190625/1287293.html

android – PhoneGap中的Google Maps API v3：移动后标记无法正确绘制

相关推荐