preface
In the development of the map function interface, we sometimes need to stick a personalized map image on map, or somewhere on the annotation of personalized icon, first contact will check many maps API document, such as the use of gold, tencent, baidu map map, map of small program will need to go to the corresponding related documents, spend a lot of time, The function shared in this article is based on the map function of wechat applets. Hopefully it will take you a little less time to develop.
Use the map that comes with the applet
There are three main points to use the applets map (the official documentation is mainly these three)
- Small program to provide map components, pass parameters can display different map effects
- Map-related API provided by the applet: wx.createmapContext
- Small program official example, there is source download
Use the sample
Simple Example 1(no parameters)
//index.wxml
<map id="myMap" />
/ / index. CSS (style)
#myMap{
width: 100vw;
height: 100vh;
}
Copy the codeSmall program map use is very convenient to write a line of code, you can display the default map, because there is no provision of latitude and longitude parameters, map component will default to Beijing.
Simple example 2(given the latitude and longitude of Guangzhou Tower, display the satellite image, turn on the real-time road condition)
<map id="myMap"
longitude="113.32424842327879"
latitude="23.105562128174608"
enable-traffic
enable-satellite
/>
Copy the code
Common Methods
Method 1: Get the latitude and longitude of the click
//index.wxml
<map id="myMap"
longitude="113.32424842327879"
latitude="23.105562128174608"
enable-traffic
enable-satellite
bindtap="onTapMap"
/>
//index.js gets the latitude and longitude of the click
onTapMap(event) {
const latitude = event.detail.latitude
const longitude = event.detail.longitude
console.log(longitude,latitude)
},
Copy the codeMethod 2: Obtain the marker information of click points
//index.wxml
<map id="myMap"
longitude="113.32424842327879"
latitude="23.105562128174608"
enable-traffic
enable-satellite
bindmarkertap="onTapMarker"
/>
//index.js Gets the annotation ID when clicking on the annotation point
onTapMarker(event) {
console.log(event.detail.markerId)
},
Copy the codePersonalized texture, custom icon annotation point function
Personalized map (API: MapContext. AddGroundOverlay)
Micro channel small program developer tools can not see the effect, need to open the real machine debugging
For each picture pasted, the longitude and latitude of the two points in the upper right corner and the lower left corner of the fixed point of the picture should be given, so that a picture can be accurately pasted with these two points.
Post a picture:
//index.js
// The points in the upper right and lower left corner of the electronic map, the change only needs to change these two points, here I obtained by clicking the latitude and longitude above
const righttop = [23.105601636091126.113.32561652492132]
const leftbottom = [23.104752168738766.113.32324335487533]
/** * lifecycle function -- listens for page loading */
onLoad: function (options) {
this.mapCtx = wx.createMapContext('myMap')
this.mapCtx.addGroundOverlay({
id: 1.src: 'Picture address'.// Support network image, temporary path, code package path
bounds: {
// Lower left, latitude and longitude
southwest: {
longitude: leftbottom[1].latitude: leftbottom[0]},/ / the top right corner
northeast: {
longitude: righttop[1].latitude: righttop[0]}},success: (res) = > {console.log('Texture successful')},
fail: (err) = > {
console.log(err)
}
})
},
Copy the codeEffect picture: you can see that it has been pasted up, here I randomly sample a picture
In the case of multiple pictures posted, here is a demonstration of four small pictures from the top down to form a large picture
When a large picture is pasted together by several small pictures, you can first determine the longitude and latitude of the two points in the upper right corner and the lower left corner, and then calculate the longitude and latitude of other points
//index.js
// The points in the upper right and lower left corner of the electronic map, the change only needs to change these two points, here I obtained by clicking the latitude and longitude above
// This part is composed of four small graphs from top to bottom, so other points can be calculated according to these two points, and it is not easy to make mistakes
const righttop = [23.105601636091126.113.32561652492132]
const leftbottom = [23.104752168738766.113.32324335487533]
// Divide the map into 4 pieces, with the distance between the top and the bottom
const eachSpace = (righttop[0] - leftbottom[0) /4
// Define texture information
const GroundOverlay = [
{
id: 1.src: 'Picture 1 address'
bounds: {
// Lower left, latitude and longitude
southwest: {
longitude: leftbottom[1].latitude: leftbottom[0] + eachSpace * 3
},
/ / the top right corner
northeast: {
longitude: righttop[1].latitude: righttop[0}}}, {id: 2.src: 'Picture 2 address'.bounds: {
southwest: {
longitude: leftbottom[1].latitude: leftbottom[0] + eachSpace * 2
},
northeast: {
longitude: righttop[1].latitude: righttop[0] - eachSpace
}
}
},
{
id: 3.src: 'Picture 3 address'.bounds: {
southwest: {
longitude: leftbottom[1].latitude: leftbottom[0] + eachSpace
},
northeast: {
longitude: righttop[1].latitude: righttop[0] - eachSpace * 2}}}, {id: 4.src: 'Picture 4 address'.bounds: {
southwest: {
longitude: leftbottom[1].latitude: leftbottom[0]},northeast: {
longitude: righttop[1].latitude: righttop[0] - eachSpace * 3}}}]/** * lifecycle function -- listens for page loading */
onLoad: function (options) {
this.mapCtx = wx.createMapContext('myMap')
for (let i = 0; i < GroundOverlay.length; i++) {
this.mapCtx.addGroundOverlay({ ... GroundOverlay[i] }) } },Copy the codeAdd custom picture marker dynamically
Markers can be added to a map by passing markers to components. If the markers are defined in the data, the markers can be dynamically changed by changing the value of the markers in the data
// index.wxml
<map id="myMap"
markers="{{markers}}"
longitude="119.7622402155845"
latitude="31.316105488231152"
enable-traffic
enable-satellite
bindmarkertap="onTapMarker"
/>
// index.js
// Set the iconPath property to display the desired icon
const INIT_MARKER= [
{
id: 101.callout: {
content: 'Marker point 1'.padding: 10.borderRadius: 6.display: 'ALWAYS'.fontSize: 12.color: '#3875FF'
},
longitude: 119.75880851270135.latitude: 31.31061775104909.iconPath: '.. /.. /.. /assets/images/home/area/[email protected]'.width: '34px'.height: '34px'.rotate: 0.alpha: 1
},
{
id: 102.callout: {
content: 'Marker point 2'.padding: 10.borderRadius: 6.display: 'ALWAYS'.fontSize: 12.color: '#3875FF'
},
longitude: 119.7644080016941.latitude: 31.319114527583075.iconPath: '.. /.. /.. /assets/images/home/area/[email protected]'.width: '34px'.height: '34px'.rotate: 0.alpha: 1
}
]
Page({
/** * initial data for the page */
data: {
markers: [...INIT_MARKER],
},
// Set markers. As the markers are responsive variables, they change as well, and can be added, deleted or changed
setMarkers(addMarkers) {
this.setData({
markers: addMarkers})},// Click the tag to generate an event, you can get the tag ID
onTapMarker(event) {
console.log(event.detail.markerId)
},
})
Copy the codeBugs that may be encountered
1. When the size of a single textured picture is greater than 300K (approximately), iPhone will display it normally, but Android will not.
Solution: Break up into smaller images and put them together so that each image is small enough to work on an Android phone.
2. If you use the MAPContext. addMarkers API to create a custom image marker, the icon will display normally on iphones but will be much larger on Android phones.
conclusion
This article is simple to share, I hope to help you. See the applet documentation and official examples for more details.