Recently, my company is working on a project of shared electric vehicles. When I open the app, I will see a map, which can obtain the address and status of nearby shared electric vehicles. To develop the app, I also need to plan the route on the map, dynamically display the trajectory, and replay the trajectory. The project functions of shared development always use LBS (Location Based Service), that is, location-based Service. There are Baidu Map, Autonavi Map and Tencent Map providing map services in China. In this paper, Tencent Location Service is selected to develop map functions.
Two, the use of steps
1. Description of UNIApp development Map
I use UniApp because it is a framework for developing all front-end applications using Vue.js. Developers write a set of code that can be published to ios, Android, web and various small programs, fast applications and other platforms.
The map component is used to display the map (when used by Tencent map). It has the following properties:
Longitude (type Number) Latitude (type Number) Latitude (type Number) Scale (type Number, default value is 16, Scale level Ranges from 5 to 18) Markers (Array indicates that there are multiple markers on the map) Polyline (Array indicates that there is no default value) Lines (polyline indicates that there is no default value) All the points on an Array are lined up. (Circles) Controls (controls) include (points) Enable -3D (type Boolean, default value is false, indicates whether to display 3D blocks) show-compass (type Boolean, default value is false, Enable-overlooking (The type is Boolean, the default value is false, indicating whether to enable overlooking) enable-satellite (the type is Boolean, the default value is false, Enable-traffic (The type is Boolean, and the default value is false, indicating whether to enable real-time traffic) show-location (the type is Boolean, indicating that the current registration point with direction is displayed) polygons (the type is Array, Represented as polygons)
Click properties
- @markertap- triggers when a marker is clicked, e.trace ={markerId}
- @labelTAP – triggers when label is clicked, e.trace = {markerId}
- @callouttap- trigger when clicking on the bubble corresponding to the marked point, e.trace = {markerId}
- @controlTap – means triggered when the control is clicked, e.trace = {controlId}
- @ Regionchange – triggered when the view changes
- @tap- triggers when a map is clicked; App-nuve, wechat small program 2.9 support to return latitude and longitude
- @updated- triggered when the map rendering update is complete
When we write the Map component, it is recommended to write the width/height of the component directly, such as 750rpx. Do not set the percentage value. In uni-app, only the gCJ02 coordinates are supported.
Describes the markers attribute. – The type is Array
The markers attribute type is Array, indicating that the markers are used to display the locations of markers on a map. This array property, which contains its object configuration properties, is:
- The marker click event callback will return this ID. It is suggested to set the type ID of Number for each marker to ensure better performance when updating the marker.
- Latitude, latitude, type Number, a mandatory floating point Number. The value ranges from -90 to 90
- Longitude, type Number, mandatory, floating point Number, range -180 to 180
- Title, callout, type String, not mandatory, displayed when clicked, callout will be ignored if it exists
- IconPath, icon displayed, type String, mandatory, picture path in the project directory
- Rotate, the rotation Angle, type Number, is not mandatory. The value ranges from 0 to 360. The default value is 0
- Alpha, opacity of annotations, type Number, not required, default 1, no transparency, range 0 ~ 1
- Width, annotated icon width, type Number, not required, default is the actual image width
- < font style = “font-size: 14px;
- Callout, the bubble window above the custom marker, type Object, is not required – recognisable newlines
- Label, adds a label next to the tag point, type Object, not required – recognizable newline character
- Longitude and latitude are in the anchor point of the annotated icon, default bottom midpoint, not required, {x, y}, x means landscape (0-1), y means vertical (0-1). {x:.5, y: 1} represents the midpoint of the bottom edge
Marker bubble Callout (Object type) Marker array attribute Callout objects use attributes:
- Content, text, String
- Color, text color, String
- FontSize, text size, Number
- BorderRadius, Callout border rounded, Number
- BgColor, background color, String
- Padding, white space at the edge of the text, Number
- Display, ‘BYCLICK’: click to display; ‘ALWAYS’: often displayed, String
- TextAlign, text alignment. Valid values: left, right, center, String
Label (Object type) on Marker
- Content, text, String
- Color, text color, String
- FontSize, text size, Number
- X, the coordinate of label, the origin is the longitude and latitude corresponding to Marker, Number
- Y, the coordinate of label, the origin is the longitude and latitude corresponding to Marker, Number
- BorderWidth, borderWidth, Number
- BorderColor, borderColor, String
- BorderRadius, border rounded, Number
- BgColor, background color, String
- Padding, white space at the edge of the text, Number
- TextAlign, text alignment. Valid values: left, right, center, String
polyline
Polyline specifies a series of coordinate points, from the first to the last item in the array
- Points, Array of longitude and latitude, mandatory, for example: [{latitude: 0, longitude: 0}]
- < span style = “box-sizing: border-box; color: line color; type String
- Width, the width of the line, type Number, do not need to fill
- DottedLine: whether the line is dotted or not. The type is Boolean. No need to fill in
- ArrowLine, the line with an arrow, type Boolean, no need to fill, default is false
- ArrowIconPath, replace the arrow icon, type String, do not need to fill, when arrowLine is true, the default line with arrow
- BorderColor: border-color of type String
- BorderWidth: Thickness of line, type Number, not required
Polygon A polygon specifies a set of coordinate points from which a closed polygon is generated
- [{latitude: 0, longitude: 0}]
- StrokeWidth, strokeWidth, Number, no
- StrokeColor Color of stroke, String, no
- FillColor, fillColor, String, no
- ZIndex: set the value of the polygon’s z-axis, Number, no
Circles Circles displays circles on a map
- Latitude, latitude, and Number are mandatory floating point numbers ranging from -90 to 90
- This parameter is mandatory. It is a floating point Number ranging from -180 to 180
- Color, stroke color, String, do not fill, for example: #0000AA
- FillColor, String, do not need to fill, such as #0000AA
- Radius, radius, Number, mandatory
- StrokeWidth, the width of the stroke, Number, do not need to be filled
Controls Displays controls on the map. Controls do not move with the map
- Id, control ID, Number, do not need to fill in, the control click event callback will return this ID
- Position, the position of the control on the map, Object, required, the position of the control relative to the map
- IconPath, icon displayed, String, mandatory, image path in the project directory, support relative path writing, start with ‘/’ indicates relative project root directory; Temporary paths are also supported
- Clickable, whether clickable, Boolean, do not have to fill, default is not clickable
position
- Left, how far from the left edge of the map, Number, no need to fill in, default is 0
- Top, how far from the top edge of the map, Number, you don’t have to fill in, default is 0
- Width, control width, Number, do not need to fill, default to the image width
- Height, control height, Number, do not need to fill, default to the image height
Note that the latitude and longitude of the map component in uniApp must be filled in. If not, the default value is the longitude and latitude of Beijing.
2. Uniapp uses the Map component
Basic usage
Use uniAPP to develop the map component, the basic use method: the code is as follows (example) :
<map :scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
Copy the codeThe code for using the markers attribute is as follows:
Rotate: [{id: 1, // Number title: '1', // String- rotate: 180, // Number - rotate: 180 alpha: [{id: 1, // Number title: '1'] 0.5, // Default 1, no transparency, range 0 ~ 1 Latitude: 39.899, Longitude: 116.39742, width: 30, height: 30, // callout: {// display: "BYCLICK", // padding: 10, // borderRadius: 5, // content: '', // }, // anchor: {}, iconPath: '.. /.. /.. / static/location. The PNG ', / / show the icon}, {id: 2, the title: '2', / / String latitude: 39.90, longitude: 116.39, the callout: {color: '#007AFF', // color: '#563BFF', // color: '#563BFF', // color: '#563BFF', // color: '#563BFF', // color: '#563BFF' Valid values: left, right, center padding: 10, // Text-padding borderRadius: 5, content: }, label: {content: 'Jeskson', color: '#000000', fontSize: 12, borderWidth: 12, borderColor: '#007AFF', borderRadius: 5, padding: 5, textAlign: 'center', bgColor: '#563BFF', }, iconPath: '../../../static/location.png' }]Copy the codeThe preview looks like this:
controls:[{
// Displays the control on the map. The control does not move with the map
id: 1./ / the control id
iconPath:'.. /.. /static/icon.png'.// Display the icon
position: {// The location of the control on the map
left: 15.top: 15.width: 50.height: 50}}],Copy the codeAddress search
Uni-app only supports gCJ02 coordinates
The OBJECT parameter in uni.getLocation(OBJECT)
Get the current geographic location, speed. In wechat small program, when the user leaves the application, this interface cannot be called, unless the background continuous location permission is applied; This interface continues to be called when the user clicks “Show at the top of chat”.
OBJECT Parameter Description
- Type, String, do not need to fill, default is WGS84 returns GPS coordinates, gCJ02 returns national survey office coordinates, can be used for uni. OpenLocation coordinates, app platform Autaud SDK only support to return GCJ02
- Altitude, Boolean, do not need to fill, passing true will return altitude information, because the high accuracy required to get altitude will slow down the interface return speed
- Geocode, Boolean, not required, default false, whether to resolve address information
- Success, Function, mandatory. The callback Function is successfully called by the interface. See the return parameter description for details
- Fail, Function, do not need to fill, interface call failed callback Function
- The callback Function that completes the call to the interface (executing on success or failure)
For SUCCESS, the following parameters are returned:
- Floating point number ranging from -90 to 90, with negative numbers indicating latitude south
- Longitude is a floating point number ranging from -180 to 180. A negative number indicates longitude west
- Speed, speed, floating point number, unit: m/s
- Accuracy c
- Altitude m
- VerticalAccuracy, in m (not available on Android, return 0)
- HorizontalAccuracy, in m
- Address: address information (only supported by the App. Set Geocode to true)
Address Indicates the address information
- Country, String, country such as “China”, undefined if no
- Type, String, province name such as “Beijing”, return undefined
- City, String, city name, such as “Beijing”, if no, undefined
- District, String, district, county name such as “Chaoyang district”, not return undefined
- Street, String, street information, such as “Jiuxianqiao Road”, not return undefined
- StreetNum, String, gets the street number information, such as “3”, returns undefined if there is no street number
- PoiName: String POI information, for example, electronic City. International electronics headquarters “, if not, return undefined
- PostalCode, String, zip code, such as “100016”, undefined if none
- CityCode, String, cityCode, such as “010”, undefined if none
Uni. ChooseLocation (OBJECT) Opens the map and selects the position.
- Latitude, String, you don’t need latitude of the destination
- It’s a longitude String, it doesn’t have to be the longitude of the target
- Keyword, String, do not need to fill, search keyword, only App platform support
- Success, Function, required
- Fail, Function, not required
- Complete, Function, not required
Success Returns the following parameters:
- Name, the name of the location
- Address, detailed address
- Floating point number ranging from -90 to 90. Negative numbers indicate latitude in the south. Use the GCJ02 National Survey Bureau coordinate system.
- Longitude is a floating point number ranging from -180 to 180. A negative number is longitude longitude west. Use the GCJ02 national Survey bureau coordinate system.
The code is as follows (example) :
chooseLocation(e) { // Open the map and select the location
uni.chooseLocation({
success: res= > {
console.log('Location name:' + res.name);
console.log('Detailed address:' + res.address);
console.log('Latitude:' + res.latitude);
console.log(Longitude: + res.longitude);
uni.getLocation({
type: 'gcj02'.altitude:true.geocode:true.success: function(res) {
console.log('Longitude at current position:' + res.longitude);
console.log('Latitude of current position:'+ res.latitude); }});console.log(':' + res.address.slice(0, res.address.indexOf('province') + 1));
console.log('the city: + res.address.slice(res.address.indexOf('province') + 1, res.address.indexOf('the city') + 1));
console.log('area: + res.address.slice(res.address.indexOf('the city') + 1, res.address.indexOf('area') + 1));
this.query.address = res.address;
this.query.latitude = res.latitude;
this.query.longitude = res.longitude;
this.query.province = res.address.slice(0, res.address.indexOf('province') + 1)
this.query.city = res.address.slice(res.address.indexOf('province') + 1, res.address.indexOf('the city') + 1)
this.query.district = res.address.slice(res.address.indexOf('the city') + 1, res.address.indexOf('area') + 1)}}); },Copy the codePreview effect:
Get dynamic near point aggregation
Uni.getnetworktype (OBJECT) Gets the network type.
Uni.createmapcontext (mapId,this) creates and returns a Map context mapContext object. Under the custom component, the second parameter is passed to the component instance this to manipulate the components within the component.
MapContext – A mapContext is bound to a component by a mapId. It can be used to operate the corresponding component.
This object has a list of methods:
- GetCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT getCenterLocation OBJECT
- MoveToLocation OBJECT Moves the center of the map to the current registration point. This parameter is used together with the show-location of the Map component
- TranslateMarker OBJECT translation marker to drive the painting
- IncludePoints OBJECT Zoom view shows all latitude and longitude
- The getRegion OBJECT gets the view range of the current map
- GetScale OBJECT Gets the zoom level of the current map
- $getAppMap Gets the native Map object plus. Maps.map
GetCenterLocation OBJECT parameter list
Res = {longitude: “longitude “, latitude:” latitude “}
MoveToLocation OBJECT parameter list – do not need to fill
TranslateMarker OBJECT parameter list
- MarkerId Number Specifies marker
- Destination Object Specifies the target point to which the marker moves
- AutoRotate Boolean Does not need to fill in whether marker is automatically rotated during movement
- Rotate Number Does not need to fill in the rotation Angle of marker
- Duration Number Specifies the duration of the animation. The default value is 1000ms. Translation and rotation are calculated separately
- AnimationEnd Function do not need to fill in the animationEnd callback Function
- Fail Function Does not need to fill in the callback Function when the interface fails to call
The code is as follows (example) :
<view id="activeMap">
<view @tap="activeMarker={}">
<view class="page-body map-view" style="z-index: 1; position: relative;">
<view class="page-section page-section-gap map-view">
<map :markers="shops" id="map1" :show-location="true" :latitude="latitude" :longitude="longitude" @regionchange="regionChange"
@markertap="markerTap" @tap="activeMarker={}">
<! -- @markerTap Triggers when a marker is clicked, e.Trace = {markerId}-->
<! -- @tap Triggers when a map is clicked -->
<! -- triggered when @regionChange visual field changes -->
</map>
<cover-image class="map-image" src=".. /static/address.png"></cover-image>
</view>
</view>
</view>
</view>
Copy the coderegionChange() { // Reacquire the store after moving the map
uni.createMapContext('map1'.this).getCenterLocation({
success: res= > {
console.log(res.latitude)
console.log(res.longitude)
this.shopTimeout = setTimeout(_= > {
this.shops = [{
address: 1 XX Avenue, XXX District, Shantou City, Guangdong Province.distance: 122.end_time: "1".id: 2.latitude: "22.72078500009999".longitude: "114.36090200009999".shop: {
iconPath: '/static/logo.png'.id: 3.latitude: "22.72078500009999".longitude: "114.36090200009999".height: 34.width: 34.shop: {return: 0}},return: 0.height: 34.width: 34.start_time: "1".store_name: "Samsung Hotel".iconPath: '/static/shop.png',}},500)},fail: res= > {
uni.showModal({
content: 'Failed to get location'.showCancel: false}}}})),Copy the codeThe preview is as follows:
The map shows people who are nearby
The code is as follows (example) :
list: [{
id: 1264640.user_id: 335187.place: "Jeskson city".text: "dadaqianduan.cn".latitude: "27.267520".longitude: "111.727120".status: "normal".nickname: "dada".avatar: "https://image.aishencn.com/2020/10/20/002207441_40845724-user.jpg".distance: 13419}, {id: 1272720.user_id: 36950.place: "Dadaqianduan city".text: "dadaqianduan.cn".latitude: "27.257640".longitude: "111.747910".deletetime: null.status: "normal".nickname: "dadaqianduan".avatar: "https://image.aishencn.com/2020/04/09/004135379_37869100-user.jpg".distance: 27070}, {id: 1316740.user_id: 366172.place: "dadaqianduan.cn".text: "dadaqianduan.cn".images: "https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg".latitude: "27.257430".longitude: "111.732960".status: "normal".nickname: "dada".avatar: "https://image.aishencn.com/2020/11/04/182622730_98197351-user.venus/cache/ext/crop/1604518314542_jpg".distance: 27190.images_arr: ["https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg"]}],Copy the codeThe preview effect is shown as follows:
Locating nearby stores
The code is as follows (example) :
// Distance between two points
distance(la1, lo1, la2, lo2) {
var La1 = (la1 * Math.PI) / 180.0
var La2 = (la2 * Math.PI) / 180.0
var La3 = La1 - La2
var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
var s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(La3 / 2), 2) +
Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
)
)
s = s * 6378.137 // Radius of the earth
s = Math.round(s * 10000) / 10000
return s
},
// Calculate the nearest distance
nearDistance(array, centerLatitude, centerLongitude) {
let temp = []
for (let i = 0, l = array.length; i < l; i++) {
const element = array[i]
let d = this.distance(
element.latitude,
element.longitude,
centerLatitude,
centerLongitude
)
temp.push(d)
}
this.distanceL = Math.min.apply(null, temp)
}
Copy the codeThe effect is as follows:
Sliding track
The code is as follows (example) :
<map :polyline="polyline" :scale="scale" id="maps" :markers="markers" :latitude="center.latitude"
:longitude="center.longitude">
</map>
Copy the code// Play the marker
playMarkars() {
if (this.polyline.length == 0) {
uni.showModal({
content: 'No tracks in current time range, cannot play! ',})this.isPlay = false / / no
this.playIndex = 0 / / the first
return
}
this.playIndex = Math.min(this.points.length - 1.this.playIndex)
this.markers = [this.formatMarker(this.points[this.playIndex++], 'ALWAYS')]
this.timer = setInterval(_= > {
var i = this.playIndex++
this.nextAdaress(i);
if (i >= this.points.length) {
clearInterval(this.timer)
this.isPlay = false
this.playIndex = 0
this.initMarkers()
return
}
this.markers = [this.formatMarker(this.points[i], 'ALWAYS')]},1000)},formatMarker(point, display = "BYCLICK") {
let content = [
"Time:" + parseTime(point.create_time),
"State of motion:" + (point.sport == 1 ? 'movement' : 'static'),
"Address:" + point.address || ' '
]
return {
id: point.id,
iconPath: '/static/dada.png'.width: 35.height: 35.latitude: point.latitude,
longitude: point.longitude,
callout: {
display: display,
padding: 10.borderRadius: 5.content: content.join("\n")}}},nextAdaress(index) {
const len = 10;
if (this.isGetAddress) {
return
}
for (let i = 0; i < len; i++) {
if (!this.points[i + index]) {
break
}
if (this.points[i + index].address === undefined) {
this.isGetAddress = true
this.getAddress(i + index, len * 2._= > {
this.isGetAddress = false
});
break}}},Copy the codeThe image looks like this:
Vue access to Tencent map interface
Tencent (recommended)
https://apis.map.qq.com/ws/location/v1/ip={$ip}&key={$key}
Copy the codeNeed to apply for key, speed, basic information
Click on the home page to register and apply for a key:
<script charset="utf-8" src="The key https://map.qq.com/api/gljs?v=1.exp&key= application"></script>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104.116.307503);
// Initialize the map
var map = new TMap.Map("container", {
rotation: 20.// Set the map rotation Angle
pitch:30.// Set the pitch Angle (0~45)
zoom:12.// Set the map zoom level
center: center// Set the map center point coordinates
});
}
</script>
Copy the code2. Map loading completed effect drawing:
<script>
function initMap() {
// Initialize the map
var map = new TMap.Map("container", {
center: new TMap.LatLng(39.984104.116.307503)});// Listen for the map tile loading completed event
map.on("tilesloaded".function () {
document.getElementById("tip").innerHTML = "Map tiles loaded"
})
}
</script>
Copy the code3. Load the map asynchronously
<script>
function initMap() {
var map = new TMap.Map("container", {
pitch: 45.zoom: 12.center: new TMap.LatLng(39.984104.116.307503)}); }function loadScript() {
// Create a script tag and add the SRC attribute to the body
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "The key https://map.qq.com/api/gljs?v=1.exp&key= application";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Copy the code4. Simultaneous loading of two map renderings is as follows:
<script>
function initMap() {
// Initialize map 1
var mapOne = new TMap.Map("containerOne", {
pitch:45.center: new TMap.LatLng(39.984104.116.307503)});// Initialize map 2
var mapTwo = new TMap.Map("containerTwo", {
center: new TMap.LatLng(39.984104.116.307503)}); } </script>Copy the code5. Get the map center effect as shown below:
<script>
var centerInfo = document.getElementById("center-info");
var center = new TMap.LatLng(39.984104.116.307503);// Set the center coordinates
// Initialize the map
var map = new TMap.Map("container", {
center: center
});
// Retrieve the map center event
function getCenter() {
var mapCenter = map.getCenter(); // Get the map center coordinates
centerInfo.innerHTML = "Current map center is:" + mapCenter.getLat().toFixed(6) + "," + mapCenter.getLng().toFixed(6);
}
// Set the map center point event
function setCenter() {
map.setCenter(new TMap.LatLng(39.908802.116.397502));// The coordinate is Tian 'anmen
centerInfo.innerHTML = "Current map center: 39.908802,116.397502";
}
</script>
Copy the code6. The translation effect of the map is as follows:
<script>
function initMap() {
var position = document.getElementById("position");
var txt = document.getElementById("txt");
var center = new TMap.LatLng(39.984104.116.307503);// Set the center coordinates
// Initialize the map
var map = new TMap.Map("container", {
center: center
});
location.innerHTML = map.getCenter().toString();
// Listen for the map to shift
map.on("panstart".function () {
txt.innerHTML = "The map begins to shift"
})
// Listen for map translation
map.on("pan".function(){
txt.innerHTML = "The map is shifting";
position.innerHTML = map.getCenter().toString();// Get the center of the map
})
// Listen for the end of map translation
map.on("panend".function(){
txt.innerHTML = "Map ends translation";
})
}
</script>
Copy the code3. Vue access Tencent map
<template>
<div>
<div id="map" style="width:500px; height:500px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
longitude: "".latitude: ""
};
},
methods: {
init() {
let address = "";
let that = this;
var center = new qq.maps.LatLng(34.754152.113.667636);
var map = new qq.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13.disableDefaultUI: true
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
var geocoder = new qq.maps.Geocoder({
complete: function(res) {
console.log(res);
address = res.detail.nearPois[0].name; }}); qq.maps.event.addListener(map,"click".function(event) {
this.longitude = event.latLng.getLat();
this.latitude = event.latLng.getLng();
console.log(event);
let lat = new qq.maps.LatLng(this.longitude, this.latitude);
geocoder.getAddress(lat);
setTimeout(() = > {
infoWin.open();
infoWin.setContent(
'
'
+
address +
"</div>"
);
infoWin.setPosition(event.latLng);
}, 200); }); }},mounted() {
this.init(); }};</script>
<style scoped>
</style>
Copy the codeTo use the map, you need to import it in index. HTML.
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
<template>
<div>
<div id="container" style="width:500px; height:500px;"></div>
</div>
</template>
<script>
export default{
data() {
return {
longitude:39.956987./ / longitude
latitude:116.235128 / / latitude
}
},
mounted () {
this.init();
},
methods: {init() {
var myLatlng = new qq.maps.LatLng(39.945687.116.3976968);
var myOptions = {
zoom: 8.// Set the map zoom level
center: myLatlng, // Set the center point style
mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("container"), myOptions); }}}</script>
Copy the codeCreating a map instance
var map=new qq.maps.Map(document.getElement('container'),{
center,// The coordinate is the center of the map initially displayed
zoom // The scale level is the scale of the display})Copy the codeAdd events to the map
qq.maps.event.addListener(map,'click'.function(res){
// res is the location information after clicking
})
Copy the codeAdd tag
var marker=new qq.maps.Marker({
position, // Mark the location of the point, which can also be the coordinates obtained through IP
map, // Which map to mark
animation, // The animation effect when the tag is displayed
title, // The title when the mouse hovers over the tag
draggable // Whether to drag
})
Copy the codeCreate information window
var info=new qq.maps.InfoWindow({
map, // Which map to mark
content // The contents of the information window
})
Copy the codemulch
var polyline=new qq.maps.Polyline({
map, // Which map to mark
path, // An array of coordinates from which polylines and polygons are formed
strokeColor, // Crease color
strokeDashStyle, // Polyline style
strokeWeight, // Crease width
editable, // Whether the polyline can be edited
clickable // Whether clickable
})
Copy the codeSingle annotation point
The initialization map method is called during the Mounted lifecycle or after information is obtained from the background interface
initMap (latitude, longitude, message) {
var center = new qq.maps.LatLng(latitude, longitude);
var map = new qq.maps.Map(
document.getElementById("container"),
{
center: center,
zoom: 13});var marker = new qq.maps.Marker({
position: center,
map: map
});
var info = new qq.maps.InfoWindow({
map: map
});
// The hover tag displays the information
qq.maps.event.addListener(marker, 'mouseover'.function() {
info.open();
info.setContent(`<div style="margin:10px;" >${message}</div>`);
info.setPosition(center);
});
qq.maps.event.addListener(marker, 'mouseout'.function() {
info.close();
});
},
Copy the codeMultiple annotation points
markers: [ ]; // Mark the point group
mounted () {
this.initMap(this.markers)
},
initMap (arr) {
// By default, the array is centered on the first item
var center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude);
var map = new qq.maps.Map(
document.getElementById("container"),
{
center: center,
zoom: 13});/ / hint window
var info = new qq.maps.InfoWindow({
map: map
});
for (var i = 0; i < arr.length; i++) {
var data = arr[i];
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(data.latitude, data.longitude),
map: map
});
marker.id = data.id;
marker.name = data.name;
// Click the event
qq.maps.event.addListener(marker, 'mouseover'.function() {
info.open();
// Set the prompt window content
info.setContent(`<div><p>The ${this.name}</p></div>`);
// Display window location
info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
});
qq.maps.event.addListener(marker, 'mouseout'.function() { info.close(); }); }}Copy the code4. Personalized map styles
Why to use personalized map, improve the map display effect and user experience in different scenarios.
- All-platform universal
- Minimal development costs
- Personalized styles support dynamic updates
- Supports global configuration and hierarchical configuration
- Edit platform UI controls are fully optimized
- All configurable attributes of each element are open
- Can support custom map elements expanded to 52
5. Tencent Location entry steps
1. Log in to Tencent location services
Verify your mobile phone and email address. 3. Apply for the development Key
Location presentation component
3. Wechat small program JavaScript SDK
1. I have applied for the developer key key. Console -> Key Management -> Settings (using the key of this function) -> Select webserviceAPI -> Save (the small program SDK needs to use some services of webserviceAPI, so the key of this function needs to have the corresponding permission) 10,000 times/Key—- Number of concurrent requests: 5 times/Key/second.
onLoad() {
console.log('Page loaded')
// Instantiate the API core class
qqmapsdk = new QQMapWX({
// key: 'application key'
});
},
onShow() {
console.log('The page is displayed')
// Call interface dadaqianduan
qqmapsdk.search({
keyword: 'hotel'.success: (res) = > {
console.log(res);
},
fail: (err) = > {
console.log(err);
},
complete: (cres) = > {
console.log(cres); }})},Copy the codeThe data I return is as follows:
// Introduce the SDK core classes
var QQMapWX = require('xxx/qqmap-wx.js');
// Instantiate the API core class
var demo = new QQMapWX({
key: 'Development key' / / required
});
Copy the codeLocation search:
// Location search
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc'.// Search keywords
location: 39.980014 ', 116.313972 '.// Set the peripheral search center
success: (res) = > {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // Get the returned result and put it in the MKS array
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/location.png".// Icon path
width: 20.height: 20})}this.markers = mks
},
fail: (res) = > {
console.log(res);
},
complete: (res) = > {
console.log(res); }}); },Copy the codeThe effect is as follows:
<script>
// Introduce SDK core class, js file according to their own business, location can be placed by themselves
// var QQMapWX = require('.. /.. /js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js');
import QQMapWX from '.. /.. /js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: ' '.markers: [].suggestion: [].}},onLoad() {
console.log('Page loaded') // Instantiate the API core class
qqmapsdk = new QQMapWX({ // key: 'application key'
key: 'Apply yourself, mine won't be released.'
});
},
onShow() {
console.log('The page is displayed') // Call interface dadaqianduan
qqmapsdk.search({
keyword: 'hotel'.success: (res) = > {
console.log(res);
},
fail: (err) = > {
console.log(err);
},
complete: (cres) = > {
console.log(cres); }})},onReady() {
console.log('First rendering of the page is complete')},methods: {
getsuggest(e) {
console.log(e.detail.value)
qqmapsdk.getSuggestion({
keyword: e.detail.value, // The keyword entered by the user can be set to a fixed value, e.g. keyword:'KFC'
//region:' Beijing ', // set the city name, limit the region range shown in the keyword, non-mandatory parameter
success: (res) = > {// Callback after a successful search
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // Get the returned result and put it in the sug array
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
this.suggestion = sug
},
fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}); },backfillBtn(e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.suggestion.length; i++) {
if (i == id) {
this.backfill = this.suggestion[i].title
}
}
},
// Location search
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc'.// Search keywords
location: 39.980014 ', 116.313972 '.// Set the peripheral search center
success: (res) = > {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // Get the returned result and put it in the MKS array
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/static/location.png".// Icon path
width: 20.height: 20})}this.markers = mks
},
fail: (res) = > {
console.log(res);
},
complete: (res) = > {
console.log(res); }}); }},onHide() {
console.log('The page is hidden')
},
}
</script>
Copy the codeThe preview effect is shown below:
<script>
import QQMapWX from '.. /.. /js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: ' '.markers: [].poi: {
latitude: 39.984060.longitude: 16.307520}}},onLoad() {
console.log('Page loaded') // Instantiate the API core class
qqmapsdk = new QQMapWX({ // key: 'application key'
key: ' '
});
},
onShow() {
console.log('The page is displayed')},onReady() {
console.log('First rendering of the page is complete')},methods: {
formSubmit(e) {
qqmapsdk.reverseGeocoder({
location: e.detail.value.reverseGeo || ' '.// Get the coordinates of the position passed in to the form, leaving the default current position unfilled
//get_poi: 1, // Whether to return the list of surrounding POI: 1. Return; 0 is not returned (default) and is not required
success: (res) = > {
console.log(res);
var res = res.result;
var mks = [];
/** * if get_poi is 1, retrieve poI data from the current location and display it on the map. i < result.pois.length; Title: result.pois[I].id: result.pois[I].id, latitude: result.pois[i].location.lat, longitude: result.pois[i].location.lng, iconPath: '. / resources/placeholder. PNG ', / / icon path width: 20, height: 20})} * * * /
// When get_poi is 0 or the default value is left unfilled, retrieve the target location as needed
mks.push({ // Get the returned result and put it in the MKS array
title: res.address,
id: 0.latitude: res.location.lat,
longitude: res.location.lng,
iconPath: '/static/location.png'.// Icon path
width: 20.height: 20.callout: { // Display the address name on markers, depending on the needs
content: res.address,
color: '# 000'.display: 'ALWAYS'}});this.markers = mks;
// this.poi = {
// latitude: res.location.lat,
// longitude: res.location.lng
// }
},
fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}}}),onHide() {
console.log('The page is hidden')
},
}
</script>
Copy the codeGeocoder – Provides a transformation from the address description to the coordinates of the position, as opposed to the process of resolving the reverseGeocoder(). The preview effect is shown as follows:
formSubmit(e) {
// Call the address resolution interface
qqmapsdk.geocoder({
// Get the form's incoming address, e.dyail.value. Geocoder
address: e.detail.value, Address: no. 74 Haidian West Street, Caihefang Road, Haidian District, Beijing
success: (res) = > {// Callback after success
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
// Mark the resolvable address location on the map according to the resolvable address
this.markers = [{
id: 0.title: res.title,
latitude: latitude,
longitude: longitude,
iconPath: '/static/location.png'.// Icon path
width: 20.height: 20.callout: { // The latitude and longitude can be displayed according to the requirements
content: latitude + ', ' + longitude,
color: '# 000'.display: 'ALWAYS'}}].this.poi= { // Set the name of the map center variable according to your data
latitude: Number(latitude),
longitude: Number(longitude),
}
},
fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }})}Copy the codeThe preview is as follows:
formSubmit(e){
// Call the distance calculation interface
console.log(this.start,'dadaqianduan')
qqmapsdk.calculateDistance({
// Mode: 'driving',// Optional values: 'driving', 'walking', not default: 'walking', optional
// The current default address is not specified in the from parameter
// Get the latitude and longitude of the form submission and set the FROM and to parameters (example string format)
/ / the from: e.d etail. Value. Start | | ', / / if the starting point starting point coordinate data is used, if the default current address is empty
from: this.start || ' '.to: this.end,
// to: e.dyail.value. dest, // Destination coordinates
success: (res) = > {// Callback after success
console.log(res);
var res = res.result;
var dis = [];
for (var i = 0; i < res.elements.length; i++) {
dis.push(res.elements[i].distance); // Store the returned data in the dis array,
}
this.distance=dis
},
fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}); }},Copy the codeCall to get the city list interface, the effect diagram is as follows:
onShow() {
console.log('The page is displayed')
// Call the get city list interface
qqmapsdk.getCityList({
success: (res) = > { // Callback after success
console.log(res);
console.log('Province data:', res.result[0]); // Print the province data
this.a = res.result[0]
console.log('City data:', res.result[1]); // Print the city data
this.b = res.result[1]
console.log('District/County Data:', res.result[2]); // Print the county data
this.c = res.result[2]},fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}); },Copy the codeObtain the urban areas and counties, and the renderings are as follows:
onShow() {
console.log('The page is displayed')
// Call the get city list interface
qqmapsdk.getCityList({
success: (res) = > { // Callback after success
console.log(res);
console.log('Province data:', res.result[0])
var city = res.result[0];
GetCityList getCityList getCityList getCityList getCityList getCityList
qqmapsdk.getDistrictByCityId({
// Enter the corresponding province ID to obtain the city data, enter the city ID to obtain the district county data, and so on
id: city[0].id, // getCityList returns the Id of the data, for example: Beijing is '110000'
success: (res) = > { // Callback after success
console.log(res);
console.log(Data of districts and counties under the corresponding city ID (take Beijing as an example) :, res.result[0]);
},
fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}); },fail: (error) = > {
console.error(error);
},
complete: (res) = > {
console.log(res); }}); },Copy the codeTencent location service for the micro channel small program to provide basic punctuation ability, line and circle drawing interface map components and location display, map selection point and other map API location service capability support, so that developers can freely implement their own micro channel small program products. Based on this, tencent location service WeChat applet JavaScript SDK is designed for small developers LBS data service provided by the toolkit, can be in a small program called tencent POI location service retrieval, input keywords, address resolution and reverse address resolution, administrative division and distance calculation data services, such as the small program allows you to more powerful!
