1.1 说明
首先使用小程序 >微信小程序 自带标签,并且设置好宽高让地图显示,用longitude和latitude表示中心点。 (1)show-location 显示带有方向的当前定位点,本项目不需要不添加。 (2)scale=“4” 缩放比例,缩放级别,取值范围为3-20。 (3)markers的图标想要圆的可直接让设计做成圆形,用iconPath添加。
1.2. wxml代码
< view class = "map-layout" >
< map class = "map-contianer" id= "myMap" markers= "{{markers}}" longitude= "{{locObj.longitude}}" latitude= "{{locObj.latitude}}" scale= '16' show- location= "true" >
< / map>
< / view>
1.3. wxss代码
. map- layout {
position : relative;
height : 100vh;
}
. map- contianer{
width : 100 % ;
height : 100 % ;
}
1.4. js代码
var app = getApp ( )
const qqmapsdk = app. globalData. qqmapsdk
Page ( {
data : {
markers : '' ,
locObj : {
latitude : '' ,
longitude : '' ,
address : ''
} ,
} ,
onLoad ( options ) {
var that = this ;
that. getAddress ( )
} ,
getAddress ( e ) {
var that = this ;
qqmapsdk. reverseGeocoder ( {
success : function ( res ) {
that. data. locObj. address = res. result. address
that. setData ( {
locObj : that. data. locObj
} )
var res = res. result;
var markerArr = [ ] ;
var curLat= res. location. lat
var curLng= res. location. lng
markerArr. push ( {
title : res. address,
id : 0 ,
latitude : curLat,
longitude : curLng,
iconPath : '/icon_map_addr_hospital.png' ,
width : 28 ,
height : 32 ,
} , {
title : res. address,
id : 1 ,
latitude : ( curLat- 0.0009 ) ,
longitude : ( curLng- 0.0007 ) ,
iconPath : '/icon_map_addr_house.png' ,
width : 32 ,
height : 32 ,
} , {
title : res. address,
id : 2 ,
latitude : ( curLat+ 0.0009 ) ,
longitude : ( curLng+ 0.0003 ) ,
iconPath : '/icon_map_addr_wc.png' ,
width : 28 ,
height : 32 ,
} , {
title : res. address,
id : 3 ,
latitude : ( curLat- 0.0009 ) ,
longitude : ( curLng+ 0.0011 ) ,
iconPath : '/icon_map_addr_wc.png' ,
width : 28 ,
height : 32 ,
} , {
title : res. address,
id : 4 ,
latitude : ( curLat+ 0.0004 ) ,
longitude : ( curLng+ 0.0011 ) ,
iconPath : '/icon_map_addr_house.png' ,
width : 28 ,
height : 32 ,
} , {
title : res. address,
id : 5 ,
latitude : ( curLat+ 0.0004 ) ,
longitude : ( curLng- 0.0011 ) ,
iconPath : '/icon_map_addr_hospital.png' ,
width : 28 ,
height : 32 ,
} ) ;
that. data. locObj. latitude = res. location. lat
that. data. locObj. longitude = res. location. lng
that. setData ( {
markers : markerArr,
locObj : that. data. locObj
} ) ;
} ,
fail : function ( error ) {
console. error ( error) ;
} ,
complete : function ( res ) {
console. log ( res) ;
}
} )
} ,
} )
1.5. 效果图