【问题标题】:jQuery UI Map Current Position Marker with AccuracyjQuery UI 准确地映射当前位置标记
【发布时间】:2013-07-17 19:29:15
【问题描述】:

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

如果是这样,我怎样才能做到这一点

【问题讨论】:

    标签: android cordova jquery-ui-map


    【解决方案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');
    }
    

    【讨论】:

      猜你喜欢
      • 2012-05-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-21
      • 1970-01-01
      • 2016-03-07
      相关资源
      最近更新 更多