In this article, the author uses the Nokia Maps Image API in QML to obtain the location, and introduces the Nokia Maps Image API to develop a map application with simple QML code under the conditions of a network environment. In fact, the Maps Image API used in QML is also available in S40 Web apps, and is used in the same way. Another author also introduced the development method using Geolocation API in the introduction to Geolocation API. The development of this API is supported in Nokia WebTool 1.5 and later versions.
This article will introduce the Maps API for JavaScript provided by Nokia Location Platform. The interface provided by it enables us to implement a map application by using some simple function calls in S40 Web App development. Which of the above methods for development depends on the developer's habits and preferences. Next we will use a Map routine to describe the use of some of the APIs.
Implementation
Development Environment: Nokia Web Tools 1.5 first registers as a Nokia Developer and registers for your application. This process is not complex. The registration window is automatically displayed when you open relevant documents.
Create a Basic web app project with style project named testMap. To use the interface in Nokia Location Platfrom, You need to introduce the js library in the head:
- <script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8"> </script>
In this example, the map is displayed on the full screen, so the definition in the body is as follows:
- <body>
- <div id="mapContainer" style="width:240px; height:320px;"></div>
- </body>
Define the style of the body and mapContainer in css:
<body>
<div id="mapContainer" style="width:240px; height:320px;">
</div>
</body>
Through the previous steps, we have made a layout on the screen. Next we will use the DisPlay interface in the JS library to DisPlay a basic map on the screen:
<Script type = "text/javascript">
// Set up is the credentials to use the API:
Nokia. Settings. set ("appId", "scVPyrvUFDokWQurWyRa"); // Id of the application allocated by the system after registration
Nokia. Settings. set ("authenticationToken", "MMgcc66XlTB3srHc2D1yUQ ");
Var map = new nokia. maps. map. Display (
Document. getElementById ("mapContainer "),{
Components :[
New nokia. maps. map. component. Behavior ()],
// Map magnification
'Zoomlevel': 15,
// Central coordinate of the map, longitude and latitude of Beijing
'Center': [39.90, 116.38]
});
</Script>
Preview the effect on the simulator and you can see a simple map:
A map must have functions such as Zoom-in and zoom-in, and mode switching. Therefore, we add support for these functions in the Display method:
...
components:[
...
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar()
]
You can see that the zoom-in and zoom-out buttons are added to the map at this time, and the map view and satellite view are switched:
We can also add Marker to the map:
...
Var marker = new nokia. maps. map. StandardMarker ([39.90, 116.38], {
Text: "Hi! ", // Marker tag
Draggable: true // drag
});
Map. objects. add (marker );
Map. objects. add (new nokia. maps. map. Circle (
// Center of the circle
[39.90, 116.38],
// The radius is 400 meters.
400,
{
Color: "# 823f ",
FillColor: "#2387 ",
Width: 2
}
));
Final Effect
Use Case download: Media: Testmap. wgt
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
