1. Map Creation
This section describes how to create a simple web-based map using the HUAWEI Map Kit API for JavaScript.
1. Create an HTML file and declare the following content in the file header so that the file is supported in most browsers:
Code:
<!DOCTYPE html>
2. Add the style tag pair in the head tag pair to set the map container dimensions.
Code:
<head>
<meta charset="UTF-8">
<style>
#map {
height: 800px;
width: 80%;
margin: 0 auto;
}
</style>
</head>
3. Provide the HUAWEI Map Kit API file. The key must be transcoded using the URL.
Code:
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY"></script>
4. Create map container elements in the body.
Code:
<body>
<div id="map"></div>
</body>
Create a script for initializing the map. The following sample code is to create a map with Paris as the center and a zoom level of 8:
Code:
<script>
function initMap() {
var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 8;
mapOptions.language='ENG';
var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
}
</script>
5. View the created map.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Map Attribute
You can modify the attributes of a map, such as the map center, zoom coefficient, and map heading. The following sample code is to modify the map center:
Code:
<tr>
<td>Latitude:</td>
<td><input id="latInput" type="text" value="48.95"/></td>
</tr>
<tr>
<td>Longitude:</td>
<td><input id="lngInput" type="text" value="2.35"/></td>
</tr>
Code:
var lat = Number(document.getElementById("latInput").value);
var lng = Number(document.getElementById("lngInput").value);
map.setCenter({lat: lat, lng: lng});
The following table describes the map attributes that can be customized.
Related
Hi,
i m using relative layout for displaying webview. when left marging is zero then it is working but marging set to 150 that time it is not working properly. this error occur in android jelly bean and kindle fire 2nd generation.
Following is the code:
package com.example.relativelayoutexample;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.ViewGroup;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.RelativeLayout;
public class MainActivity extends Activity {
RelativeLayout parent,child;
RelativeLayout.LayoutParams child_params,WebView_params;
WebView WB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
parent=new RelativeLayout(this);
RelativeLayout.LayoutParams helpPopupLayout_params=new RelativeLayout
.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.FILL_PARENT);
parent.setLayoutParams(helpPopupLayout_params);
parent.setPadding(0, 0, 0, 0);
parent.setBackgroundColor(Color.TRANSPARENT);
parent.setBackgroundColor(Color.RED);
child=new RelativeLayout(this);
child_params=new RelativeLayout.LayoutParams(700,600);
int leftMargin=150,topMargin=0,rightMargin=0;
child_params.leftMargin = leftMargin;
child_params.topMargin = topMargin;
child_params.rightMargin = rightMargin;
child.setLayoutParams(child_params);
parent.addView(child,child_params);
WebView_params=new RelativeLayout
.LayoutParams(850,600);
WebView_params.setMargins(0, 0, 0, 0);
WB = new WebView(this);
WebSettings webSettings = WB.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
webSettings.setUseWideViewPort(true);
WB.loadUrl("http://192.168.100.11:8017/test/rajeshTest/htmls/test.html");//from server
child.addView(WB,WebView_params);
addContentView(parent, helpPopupLayout_params);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
HTML File
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="user-scalable=yes,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Untitled Document</title>
<body>
<video id="bubbles" width="400" height="300" controls="controls" src="http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/0640_vod.m3u8">
<!--<iframe src="http://www.w3schools.com/cssref/pr_class_visibility.asp" width="100%" height="100%"></iframe>-->
</video>
</body>
</html>
leftmargin=0
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
leftmargin=150
Thank you,
Rajesh patil
+919766540216
Does a quick app provide the API for obtaining the digest value of a file? For example, the API for obtaining the SHA256 or MD5 value of a file.
Such an API is not provided in Quick App Specification, but you can obtain the digest value of a file using the third-party library crypto-js.
1. Check whether the third-party library dependency file package.json exists in the quick app project directory. If not, go to NPM > Start Npm Library to start the third-party dependency library in Huawei Quick App IDE. Then, the package.json file is generated.
2. Go to NPM > Npm Install to install the dependency.
3. Switch to the TERMINAL tab page in the IDE console and access the root directory of the quick app project. Run the npm i -S crypto-js command to install the crypto-js library.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1. After the installation is complete, the crypto-js dependency is automatically added to the package.json file.
2. The sample code for calculating the digest value of a file in a quick app is as follows:
import sha256 from 'crypto-js/sha256';
import MD5 from 'crypto-js/md5';
genSha256: function (e) {
const msg = this.testdata;
this.sha256value = sha256(msg);
},
genMD5: function () {
const msg = this.testdata;
this.md5value = MD5(msg);
},
Such an API is not provided in Quick App Specification, but you can obtain the digest value of a file using the third-party library crypto-js.
1. Check whether the third-party library dependency file package.json exists in the quick app project directory. If not, go to NPM > Start Npm Library to start the third-party dependency library in Huawei Quick App IDE. Then, the package.json file is generated.
2. Go to NPM > Npm Install to install the dependency.
3. Switch to the TERMINAL tab page in the IDE console and access the root directory of the quick app project. Run the npm i -S crypto-js command to install the crypto-js library.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
4. After the installation is complete, the crypto-js dependency is automatically added to the package.json file.
5. The sample code for calculating the digest value of a file in a quick app is as follows:
HTML:
import sha256 from 'crypto-js/sha256';
import MD5 from 'crypto-js/md5';
genSha256: function (e) {
const msg = this.testdata;
this.sha256value = sha256(msg);
},
genMD5: function () {
const msg = this.testdata;
this.md5value = MD5(msg);
},
For more details, please refer to:
development document of crypto.js: https://www.npmjs.com/package/crypto-js
Question:
How to use LayaAir IDE to split the package of a quick game and load subpackages?
Guide:
Splitting the package of a Huawei quick game and loading its subpackages help reduce the traffic and time required for app download. By doing so, you can choose to load or download specific subpackages, instead of the whole package at a time.
Procedure:
1. Release a subpackage in LayaAir IDE.
To split a package, select Set the subcontract during project release, as shown in the following figure.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Then, click the plus sign (+) below. The following window is displayed. Set the subpackage name and the corresponding folder.
2. Configure subpackage information in the manifest file.
You also need to set parameters for the subpackages in the manifest.json file. The sample code is as follows:
Note: If you split a resource package manually, the values of resource should end with a slash (/). In addition, a game.js file must exist in the directory. (Skip this step if you let LayaAir IDE split the package for you.)
XML:
subpackages:[
{
"name":"subpackageName1",// Subpackage name.
"resource":"subpackagePath1"// Corresponding subpackage directory.
},
{
"name":"subpackageName2", // Subpackage name.
"resource":"subpackagePath2"// Corresponding subpackage directory.
}
]
3. Apply specific subpackages.
The sample code for using specific subpackages is as follows:
JavaScript:
var task = hbs.loadSubpackage({
subpackage:'subpackageName1',
success : function () {
console.log("loadSubpackage success" );
},
fail:function(){
console.log("loadSubpackage fail");
},
complete:function() {
console.log("loadSubpackage complete");
}
});
task.onprogress(
callback(res) {
console.log("onProgress" + JSON.stringify(res));
}
);
PHP — Signature Verification for HUAWEI IAP
Background
If you integrate the HMS SDK 3.x, and after a successful purchase, you can obtain the purchase data InAppPurchaseData and its signature data from the PurchaseResultInfo object. You need to use the public key allocated by AppGallery Connect to verify the signature.
For details, check this document:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/dev-guide-0000001050130254#EN-US_TOPIC_0000001050130254__section183174113342
Code Development
I wrote the sample code to verify the obtained purchase data, its signature and the public key for your reference. Hope it can help you with problem locating.
Sample code:
PHP:
<?php
// Actual payment callback result. Copy the original data without any processing.
// Here, I replaced some personal information with xxxx.
$content = '{"autoRenewing":false,"orderId":"201912250949586652ebf220c1.10xxxx75","packageName":"com.example.xxxxxxexample_netease.huawei","applicationId":10xxxx75,"kind":0,"productId":"3","productName":"test33333","purchaseTime":1577238608000,"purchaseTimeMillis":1577238608000,"purchaseState":0,"developerPayload":"09815772385983110000000191996123","purchaseToken":"0000016f3abf3a78a4ef7b217523ea5a346825ab632c152b864c2e5251433c9d599c5986ab8c89b1.1.10xxxx75","consumptionState":0,"acknowledged":0,"currency":"CNY","price":100,"country":"CN","payOrderId":"Aed0f1fbd9929f803d9d23b523b14575","payType":"4"}';
// The sign value must be the original value in the callback. Do not urlencode or urldecode the value.
$sign = 'IuCnJI3bCDr92uomUbxamp6VeC8vN+o3GTtB7aVwTGpkk9QgeR9KdUjDya1tJXKX8HZgTTLpj7v4A1lP8xrOq3+knykn32Tup6STnn4qpee8J3sS9kjpIHmhIbh3QfnsHksCaT4ib9BurIWnH7yEtNlwqmOOibJw8FgFXofrfPsDwjuCy4/X9rlbimjmyAiFZLXCTNQoGollqUVEjqabhjh/a+VY89A6Z02F2bJkes39a7lQMer42egha86w65L3UYYSLOyxQPIfIZ1BG5yirZN4JgcD17CMk+vQvtVDXhC+e4xN//txWlG/qIgviZbmhLFGjA/gfP0o8LpY7booiA==';
// The payment public key type needs to be RSA. A link break is added to every 64 characters in the intermediate content.
$pubKey = '-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq7iOD9qLMxMCEsY+l+IE
6kdI9HKHQoDG29ebPZFD+U1pdDewmkEcQzv/k0NmE9oeNIcxUqhg7ZwRrQ0g9xje
BCkiLTg4DOygOPOcZykuKZXDv/9aFn6FR5BVCrrOzmeR+/aEYcZZp86iWX+W4BdJ
L41i8qYonVRD6sDNuidAdg0UkNMPVRiHd5EYBgRHpPma7oeRVqfX4Iq/rL4DFOpu
uLiaLKmWSMOCLnIH+EXjjw3ttJOrB4Rq2fq6KrORgc8JMq2TPf/kK6r8NW9eWRWa
zmFvAZ8bUA7Idu4W8Z4SENwEO+ZeyWQx5I/piYEmBvmn3dy2l2bP3cZMUBVACkAE
jwIDAQAB
-----END PUBLIC KEY-----';
$openssl_public_key = @openssl_get_publickey($pubKey);
// Whether to use the SHA-256 algorithm depends on the value of signType in the callback result. Add the following code when signType is set to RSA256. In other situations, the signature algorithm needs to be SHA1.
$ok = @openssl_verify($content, base64_decode($sign), $openssl_public_key,'SHA256');
@openssl_free_key($openssl_public_key);
$result = "";
if($ok)
{
$result = "0";// success
}
else
{
$result = "1";// failure
}
$res = "{ \"result\": $result} ";
echo $res;
?>
Running the Code
Search for an online code runner that supports PHP. For example:
https://tool.lu/en_US/coderunner/
If the value 0 is returned, everything is normal.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}