How Web development uses the high-D map API (a) browser targeting

Last Update:2018-07-07 Source: Internet

Author: User

Tags sessionstorage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Say two words:

In addition to the sections I wrote myself, the other parts are available on the Gold open platform (click outside the link).
The content I have compiled is based on practical projects and hopefully more targeted and streamlined.

Preparatory work:

First, register the developer account to become the open platform developer
After logging in, go to "Create new app" on the "app management" page
Add key,"service platform for your app" select "web (JSAPI) "

After getting the key, introduce the Gold API and UI component library and related CSS files on the page

<link rel= "stylesheet" href= "Http://cache.amap.com/lbs/static/main1119.css"/>

<script src= "Http://cache.amap.com/lbs/static/es5.min.js" ></script>

<script src= "Http://webapi.amap.com/maps?v=1.4.3&key=3853mark's key doesn't tell you 138eacc13d55806d&plugin= Amap.placesearch,amap.advancedinfowindow "></script>

<script src= "//webapi.amap.com/ui/1.0/main.js?v=1.0.11" ></script>

Displays the HTML and JS used by the underlying map

<body>
<div id= "Container" ></div>
</body>

<script type= "Text/javascript" >
    var map = new Amap.map (' container ', {
        Resizeenable:true,
        Zoom:11,
        Center: [116.397428, 39.90923]//default Map center by latitude
    });

</script>

Introduction of Location-using JS file

<script type= "Text/javascript" src= "Https://cache.amap.com/lbs/static/addToolbar.js" ></script>

The JS used by the browser to locate

/**
* Created by Mark on 2018/5/3.
*/
Positioning
Map.plugin (' Amap.geolocation ', function () {
geolocation = new Amap.geolocation ({
enablehighaccuracy:true,//whether to use high precision positioning, default: True
timeout:10000,//stop positioning after 10 seconds, default: Infinity
maximumage:0,//Location result Cache 0 MS, default: 0
Convert:true,//auto-offset coordinates, the coordinates after the offset is the gold coordinate, default: True
Showbutton:true,//Display positioning button, default: True
Buttonposition: ' lb ',//Position button docking position, default: ' lb ', lower left corner
Buttonoffset:new Amap.pixel (10, 20),///Position button offset with Set docking position, default: Pixel (10, 20)
Showmarker:true,//location display point marker after successful positioning, default: True
Showcircle:true,//After successful positioning, the positioning accuracy range is represented by a circle, by default: True
Pantolocation:true,//location to locate after successful positioning as the center point of the map, default: True
Zoomtoaccuracy:true//Positioning after successful adjustment of the map field of view so that the positioning and accuracy range visible in the field of view, default: False
});
Map.addcontrol (geolocation);
Geolocation.getcurrentposition ();
AMap.event.addListener (geolocation, ' complete ', oncomplete);//Return to location information
AMap.event.addListener (geolocation, ' Error ', onError); Return location error message
});

Resolve positioning Results
function OnComplete (data) {
if (data.status = = 1) {
Console.log ("positioning success");
$ ("#addressInput"). Val (data.formattedaddress);
Sessionstorage.setitem ("Dingwei-lng", Data.position.getLng ());
Sessionstorage.setitem ("Dingwei-lat", Data.position.getLat ());
}
var str = [];
Str.push (' Longitude: ' + data.position.getLng ());
Str.push (' Latitude: ' + data.position.getLat ());
Str.push (' Is it offset: ' + (data.isconverted? ' Yes ': ' no ');
Console.log (Str.join (' <br> '));
}
function OnError () {
var str = [];
Str.push (' failed to locate ');
Console.log (Str.join (' <br> '));
}

So far, the use of the high-D map to achieve browser positioning has been completed.
But ... ^_^

/***************************************
As Chrome, IOS10, etc. no longer support browser location requests for non-secure domains, to ensure location success and accuracy, upgrade your site to HTTPS as soon as possible.
***************************************/

How Web development uses the high-D map API (a) browser targeting

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More