Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to introduce Amap into Mini Program. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Get the user Key of Amap

If you do not need to apply for key, you need to apply first. Enter the Gaode development platform lbs.amap.com/. There are detailed steps in "Development Guide"-> "get key". You can view the key we created in "console"-> "Application Management"-> "my Application". [recommended for related study: Mini Program Development tutorial]

We can encapsulate the key so that instead of looking for it every time, create a new config.js file under the lib folder

Var config = {key: "your key"} module.exports.config = config

Import Gaud's js and key into js and you can call Amap api.

Var amapFile = require ('.. /.. / lib/amap-wx.130.js'); / / Gaud jsvar config = require ('.. /.. / lib/config.js'); / / refer to our configuration file to get the current location

Create an instance of Amap and name it myAmapFun

Var key = config.config.key;var myAmapFun = new amapFile.AMapWX ({key: key})

Call the getRegeo method

MyAmapFun.getRegeo ({success: (data) = > {/ / Save location description information (longitude longitude, latitude latitude and location information) let textData = {}; textData.name = data [0] .name TextData.desc = data [0] .desc / / Save the acquired information to this.setData ({textData: textData, longitude: data [0] .longitude, latitude: data [0] .latitude, / / mark the longitude and latitude with icon And resize markers: [{latitude: data [0] .latitude, longitude: data [0] .longitude, height: 30, width: 35, iconPath:'.. / imgs/locationIcon/site1.png'}]})}, fail: function (info) {console.log ("get Location fail") })

We can take a look at the successful output of the data, where we take the information according to our own needs.

Display the map in the wxml file. Here, the width is 100%, the height is 400px, and scale is the zoom ratio of the map.

{{textData.name}} {{textData.desc}}

The red marked point is the markers data; the blue marked point is displayed by show-location= "true", but the real machine preview is not available.

Get the nearby points, only take the top ten

Data: {# current location longitude longitude: ", # current location latitude latitude:", # get the tag information of the location markers: [], # get the location information of the location poisdatas: [], # textData for simple display information: {}}

Call Amap's getPoiAround interface to get nearby information according to keywords.

Get_current_PoiAround () {var key = config.config.key; var myAmapFun = new amapFile.AMapWX ({key: key}); / / getRegeo to get the current location information (this method has been useful above) myAmapFun.getRegeo ({success: (data) = > {let textData = {}; textData.name = data [0] .name TextData.desc = data [0] .desc this.setData ({textData: textData, longitude: data [0] .longitude, latitude: data [0] .latitude,})}, fail: function (info) {console.log ("get Location fail");}}) / / get the nearby dot myAmapFun.getPoiAround through the keyword ({/ / change the style of the icon icon. I am temporarily set to blue.svg before and after clicking, if not set. The default is a small red icon iconPath:'.. /.. / icon/keshan/blue.svg', iconPathSelected:'.. /.. / icon/keshan/blue.svg', / / search keywords (POI classification code) You can download and view querykeywords from the official document https://lbs.amap.com/api/javascript-api/download/: 'shopping', querytypes: '060100 purchase, success: (data) = > {const markers = data.markers Const poisdatas = data.poisData; let markers_new = [] markers.forEach ((item, index) = > {/ / only take 10 dots. If it exceeds 10 points, continue. ForEach is the if (index > = 10) {return that cannot use the break and continue keywords. } / / reorganize the markers data we need and store it in markers_new markers_new.push ({id: item.id, width: item.width, height: item.height, iconPath: item.iconPath, latitude: item.latitude, longitude: item.longitude / / Bubble window above the custom marking point / / display | 'BYCLICK': click to display 'ALWAYS': often shows | callout: {padding: 2, fontSize: 15, bgColor: "# f78063", color:' # ffffff', borderRadius: 5, display: 'BYCLICK' Content: save the data to this.setData ({markers: markers_new, poisdatas: poisdatas})}, fail: function (info) {wx.showModal ({title:info.errMsg})}

Call the API getPoiAround to return a successful result

Bindmarkertap activates the makertap icon click event to change the contents of the map_text

{{textData.name}} {{textData.distance}} m {{textData.desc}}

Makertap activates showMarkerInfo to display marked point information, and changeMarkerColor changes the color of marked point.

Makertap (e) {var id = e.detail.markerId; this.showMarkerInfo (id); this.changeMarkerColor (id);}

It was said before that poisdatas stores the location information of this point. When we get the id, we can take it out and store it in textData to display it.

/ / display marked point information showMarkerInfo (I) {const {poisdatas} = this.data; this.setData ({textData: {name: roomdataset [I] .name, desc: roomdataset [I] .address, distance: roomdataset [I] .distance}})}

If you click on the location, replace iconPath with orange.svg, and the rest are blue.svg, and set the bubble display clicked to display ('ALWAYS'), and then save the modified data again.

/ / change the marked point color changeMarkerColor (index) {let {markers} = this.data; for (var I = 0; I < markers.length; iTunes +) {if (I = = index) {markers [I] .iconPath = ".. /.. / icon/keshan/orange.svg" Markers [I] .callout.display = 'ALWAYS'} else {markers [I] .iconPath = ".. /.. / icon/keshan/blue.svg" Markers [I] .callout.display = 'BYCLICK'}} this.setData ({markers: markers})}, this is all about how to introduce Amap into Mini Program. I hope the above content can be helpful to you and you can learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.