PhoneGap 中的 Google Maps API v3:移动后标记无法正确绘制 [英] Google Maps API v3 in PhoneGap: markers not drawing properly after move
问题描述
我一直在使用 PhoneGap 在 Android 上开发 Google Maps API 3 应用程序.它应该跟踪用户的位置并用一个标记和一个圆圈标记该位置.我一直在 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.
我将 map 和 phonegap 代码减少到不到 100 行,但它仍在这样做.我很确定它与 phonegap 无关,但无论如何我还是将其升级到 2.2 以确保,但它没有帮助.谁能告诉我在移动标记和圆圈时我是否做错了什么?请注意,我删除了下面的 Google Maps 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>
推荐答案
我遇到了同样的问题,尝试将 optimized: false
属性设置为标记:
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 中的 Google Maps API v3:移动后标记无法正确绘制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!