谷歌地图API V3在PhoneGap的：移动之后的标记不是绘制正确标记、正确、地图、不是

由网友(我愛她轟轟烈烈最瘋狂)分享简介：我一直工作在Android上谷歌地图API 3应用程序中使用PhoneGap的。它应该跟踪的用户的位置和标记与标记的位置和它周围的圆。我一直在开发这个在Android 2.3，这是工作的罚款。然后，我升级到了Android 4.x的手机，它仍然运作良好，我想。 I've been working on a Googl...

我一直工作在Android上谷歌地图API 3应用程序中使用PhoneGap的。它应该跟踪的用户的位置和标记与标记的位置和它周围的圆。我一直在开发这个在Android 2.3，这是工作的罚款。然后，我升级到了Android 4.x的手机，它仍然运作良好，我想。

I've been working on a Google Maps API 3 application on Android using PhoneGap. It should track the users location and mark the location with a marker and a circle around it. I had been developing this on Android 2.3 and it was working fine. I then upgraded to a phone with Android 4.x and it was still working well, I thought.

上周，我开始注意到它做一些奇怪的事情，当我移动的标记。这似乎只创建移动它的副本标志来代替。同样的，圆。有时候，如果我改变变焦则重复似乎消失。但同时，它偶尔会得出一些奇怪的切线。见下面的图片。

Last week I began noticing it doing some strange things when I move the markers. It would seem to create a duplicate marker instead of just moving it. Same with the circle. Sometimes if I change zoom then the duplicates seem to go away. But also, it occasionally draws some weird tangent line. See images below.

这是后不久，我收到了我的手机是Android更新4.1.1版本。不知道这是相关的，我无法找到一个问题的任何信息。

This was shortly after I received an Android update on my phone to version 4.1.1. Not sure if that's related, I can't find any info about a problem.

我减少了地图和PhoneGap的code小于100线，其仍然这样做。我是pretty的肯定这是不相关的PhoneGap的，但我认为升级到2.2反正可以肯定的，但它并没有帮助。谁能告诉我，如果我做错了移动标志和圆形的时候？请注意，我打消了我的谷歌地图API密钥下面。

I reduced the map and phonegap code to less than 100 lines and its still doing it. I'm pretty sure it isn't related to phonegap, but I upgraded that to 2.2 anyway to be sure, but it didn't help. Can anyone tell if I am doing something wrong when moving the marker and circle? Note that I removed my Google Maps API key below.

谢谢，埃里克

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

推荐答案

我有同样的问题，尝试设置优化：假属性标记：

I had the same issue, try to set the optimized: false property to the marker:

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

这应该修复它！

阅读全文

相关专题：标记；正确；地图；不是；PhoneGap ；API ；发布时间：2023-09-13 01:13:05