Use the Map API on your Ubuntu phone to display maps and dynamically display markers

In today's article, we'll show you how to use the map API to demonstrate how to display our coordinate information and how to mark our location on a map. I can show the providers (provider) of the plugin supported in our phone through this simple application. At the same time, we can also list all the maptype that are currently supported and show our results by selecting them.

1) Show all of our plugin service Providers

We can use the API interface of plugin:

    Plugin {
        id:plugin

        //Set The default one
        component.oncompleted: {
            name = Availableserviceproviders[0]
        }
    }

To get all the plugin that we currently support. The providers currently displayed on our MX4 mobile phone:


As shown in the above figure, we can find the "Nokia" and "OSM" two service providers. The current situation in China is "Nokia" is not available (this may be due to license reasons). In foreign countries, you should be able to use the Nokia here map.
2) How to annotate the map
Simply, we can use Mapcircle:

mapcircle {
    center:me.position.coordinate
    radius:units.gu (3)
    color: "Red"
}

In our map we use a full to mark the points we are interested in. Here, "center" is used to represent the center coordinate position of the circle. We can mapquickitem to use any item to mark our points of interest. In our routines, we used the following methods:

                    Mapquickitem {id:mylocation Sourceitem:item { Width:units.gu (6) Height:info.height Lab
                                El {Id:info anchors.centerIn:parent Anchors.verticalcenteroffset:-units.gu (2) Text: "(" + me.position.coordinate . longitude.tofixed (2) + "," + me.position.coordinate.latitude.toFixed (2) + ")" Color: "Blu E "} Rectangle {Width:units.gu
                                (2) Height:width RADIUS:WIDTH/2
                        Color: "Red" X:PARENT.WIDTH/2 Y:PARENT.HEIGHT/2    }
                        }
 

We used a dot and a label that could display the coordinates.


We can dynamically produce the QML component we need in the code and annotate our location information:

           Mousearea {anchors.fill:parent onpressed: {
                                if (setmarks.checked ===false) {mouse.accepted = False
                            Return } console.log ("Mouse:" + MouseX + "" + Mousey) var coord = map.
                            Tocoordinate (Qt.point (MouseX, Mousey)) Console.log ("Creating the Component") var component = Qt.createcomponent ("mapmarkitem.qml") Console.log ("Creating the It
                            Em ") var item = Component.createobject (map, {Coordinate:coord})  Console.log ("Adding the item") Map.addmapitem (item)//Var circle = Qt.createqmlobject (' Import qtlocation 5.3; mapcircle {} ', map)//CIRcle.center = coord//Circle.radius = Units.gu (4)//Circle.color =

                            ' Green '//Circle.border.width = 3//Map.addmapitem (circle)
                        Mouse.accepted = true;
 }
                    }

Above, we create a Mapcirle control dynamically by Qt.createqmlobject. We pass the map. Addmapitem to add in. When we click on the map, we add the annotations to the map:


We can get location information for any one location. This information is not in China's mobile phone map:)
3) How to zoom in/out/move the map with gesture manipulation

By default, we can use gestures to do zoom and pan our maps directly. We can also define our own gesture to initiate or disable the manipulation of this gesture:

                    Gesture {
                        enabled:!setmarks.checked
                        activeGestures:MapGestureArea.ZoomGesture | Mapgesturearea.pangesture

                        onpanstarted:  {
                            console.log ("onpanstarted")
                        }

                        onpanfinished: {
                            Console.log ("onpanfinished")
                        }

                        onpinchstarted: {
                            console.log ("onpinchstarted")
                        }

                        Onpinchfinished: {
                            console.log ("onpinchfinished")
                        }

                        onpinchupdated: {
                            Console.log (" Onpinchupdated ")
                            Console.log (" point1: "+" ("+ pinch.point1.x + pinch.point1.y +") ")
                        }
                    }

When our enabled is set to False, we can do any zoom or pan.

4) How to get all the Maptype

We can view the satellite, night, topographic map and other information by setting the map's maptype. We can list all the Maptype by using the following API:

            Leadingactionbar {
                Id:leadbar
                actions: {
                    var supported = Map.supportedmaptypes;
                    Console.log ("Count:" + supported.length)
                    var acts = []
                    console.log ("Going to add the types") for
                    (var i = 0; i < supported.length; i++) {
                        var item = supported[i]

                        console.log ("Map type name:" + item.name)
                        console.log ("Map style:" + ITEM.S Tyle)
                        console.log ("type des:" + item.description)
                        var action = creataction (Leadbar, "info", item)
                        Acts.push (Action)
                    }

                    return Acts
                }
            }

Here, we use "map." Supportedmaptypes "To list all supported map forms. In the end, in our application:





5) How to get the location information of the current position

We can get our current location information via the Positionsource interface:

    Positionsource {
        id:me
        active:true
        updateinterval:1000
        preferredpositioningmethods: Positionsource.allpositioningmethods
        onpositionchanged: {
            console.log ("Lat:" + Position.coordinate.latitude + "Longitude:" +
                        position.coordinate.longitude);
            Console.log (position.coordinate)
            console.log ("Mapzoom level:" + map.zoomlevel)
        }

        Onsourceerrorchanged: {
            console.log ("Source error:" + sourceerror);
        }
    }

We can set the updateinterval to get the frequency of the position.
The source code of the whole project is: Https://github.com/liu-xiao-guo/gps