jQuery UI Map具有准确性的当前位置标记

时间:2013-07-17 19:29:16

标签: android cordova jquery-ui-map

在使用jQuery UI Map的PhoneGap应用程序中,是否可以将当前位置设置为蓝色半径,其周围的蓝色半径与Android中的原生Google Maps应用程序一样准确?

如果是这样,我怎样才能实现

1 个答案:

答案 0 :(得分:1)

通过创建圆形覆盖图找到一个解决方法,其中包含位置对象

内的精度值

以下是完整代码(不要忘记添加对此文件的引用jquery.ui.map.overlays.js)

function locSuccess(position) {

//Set the current position as a Google Maps object
var newPoint = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

//Get the marker with the current position
var myPos = $('#map_canvas').gmap('get', 'markers')['myPos'];

//If there is no marker (first time position)
if(!myPos) {
    //Create a new marker
    $('#map_canvas').gmap('addMarker', {
        'id':'myPos',
        'position':newPoint,
        'icon' : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    });
    //Create the accuracy circle 
    $('#map_canvas').gmap('addShape', 'Circle', { 'strokeColor': "#86A9F4", 'strokeOpacity': 0.85, 'strokeWeight': 2, 'fillColor': "#C2D0F1", 'fillOpacity': 0.25, 'center': newPoint, 'radius': position.coords.accuracy });
} else {
    //If there is already a marker, update the position
    myPos.setPosition(newPoint); 
    //Update the circle radius and position (I only have 1 Circle, but this code should be improved)
    var circlePos = $('#map_canvas').gmap('get', 'overlays > Circle')[0];
    circlePos.setCenter(newPoint);
    circlePos.setRadius(position.coords.accuracy);
}

    $('#map_canvas').gmap('refresh');
}