1
Ô 9 ÈÕËæ×ÅС³ÌÐòµÄ·¢²¼£¬ÔÚ¼¼ÊõȦÄÚÒýÆðÒ»´ó²¨À˳±£¬ÔÚÒÑ·¢²¼µÄС³ÌÐòÖд󲿷ÖÒѾÓõ½ÁËÌÚѶλÖ÷þÎñÄÜÁ¦£¬¶øÇÒÒ»²¿·ÖС³ÌÐòÊÇÇ¿ÒÀÀµÎ»Ö÷þÎñÄÜÁ¦µÄ£¬È磺Ħ°Ýµ¥³µ¡¢Í¨ÇÚÖúÊֵȱØÐëÒª»ñÈ¡Óû§Î»ÖòÅÄܽøÐкóÐøµÄ½»»¥£¬³ÔºÈÍæÀÖÀàµÄС³ÌÐòÔÚµêÆÌÏêÇé¶¼»áÓеØÖ·Î»ÖÃÕ¹Ê¾Ò³Ãæ¡£ÕâЩ¶¼ÊÇÌÚѶλÖ÷þÎñµÄµØÍ¼ÄÜÁ¦ÌåÏÖ¡£µ±È»Ð¡³ÌÐòÀï°üº¬µÄµØÍ¼ÄÜÁ¦»¹Ô¶²»Ö¹ÕâЩ£¬ÏÂÃæÈÃÎÒÃǶÔС³ÌÐòÀïµÄλÖ÷þÎñÄÜÁ¦Ò»Ò»½øÐзÖÏí¡£
·ÖÏí֮ǰÎÒÃÇÏÈÀ´¿´¿´µØÍ¼ÄÜÁ¦ÔÚС³ÌÐò¼Ü¹¹ÌåÏÖÖÐËù´¦µÄλÖá£
С³ÌÐò¼Ü¹¹Í¼½â

Èçͼ±ê»Æ´¦ÎªµØÍ¼ÄÜÁ¦Ëù´¦µÄÒ»¸öλÖ㬾ٸöÀý×Ó£¬±ÈÈçµ÷Óö¨Î»ÄÜÁ¦»ñÈ¡Óû§µ±Ç°Î»ÖõÄÒ»¸öÁ÷³Ì£º
Ê×Ïȵ÷Óà JS API wx.getLocation ½Ó¿Ú -> µ÷ÓõØÍ¼ sdk »ñȡλÖýӿÚ
-> µØÍ¼ sdk ³É¹¦ºó»Øµ÷ -> JS API ³É¹¦ºó»Øµ÷¡£
»Ø¹éÕýÌ⣬Á˽âÁËÕûÌåµÄµ÷ÓÃÁ÷³Ì£¬ÏÂÃæÎÒÃǶԾßÌåµÄµØÍ¼ÄÜÁ¦½øÐÐÏêϸ½²½â¡£
С³ÌÐòλÖ÷þÎñÄÜÁ¦
Ŀǰ΢ÐÅС³ÌÐòÏ£¬ÌṩÁ˷ḻµÄ×é¼þºÍ API ¹©¿ª·¢ÕßʹÓã¬ÆäÖÐÔÉúÌṩµÄλÖ÷þÎñÒѾ°üº¬ºËÐÄλÖÃÄÜÁ¦
API ¼°µØÍ¼×é¼þ¡£

λÖÃÄÜÁ¦ API
²»½ö°üÀ¨»ù´¡µÄ¶¨Î» API£¬Ò²ÌṩÁËλÖÃչʾºÍλÖÃÑ¡ÔñµÄµ÷Óà API£¬¿ª·¢ÕßÖ»ÐèÒªÒ»¸ö API ¾ÍÄÜÖ±½Óµ÷ÆðÔÉúÄÜÁ¦£¬Í¨¹ý¼«µÍµÄ³É±¾¾ÍÄÜÍê³ÉÏàÓ¦µÄ¿ª·¢¡£
wx.getLocation(OBJECT)
»ñÈ¡µ±Ç°µÄµØÀíλÖá¢ËÙ¶È¡£
³¡¾°
¼¸ºõÈκÎÒ»¸öÓ¦Óö¼Òª»ñÈ¡Óû§µ±Ç°µÄλÖ㬴ó¼ÒÓ¦¸Ã¾³£»á¿´µ½Ò»¸öÌáʾxxxÒª»ñÈ¡Ä㵱ǰµÄλÖà ÔÊÐí ²»ÔÊÐí£¬Õâ¾ÍÊÇ»ñÈ¡µ±Ç°Î»ÖõݲȫÑéÖ¤Ìáʾ¡£ÖªµÀÁËÎÒµÄλÖþͿÉÒÔʵÏÖÖܱߵķ¹µê¡¢Ñ§Ð£¡¢²ÞËù¡¢³ö×â³µµÈµÈһϵÁÐÖܱßÏà¹ØµÄ³¡¾°¡£
ʾÀý´úÂ룺
wx.getLocation({ type: 'gcj02', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } }) |
wx.chooseLocation(OBJECT)
´ò¿ªµØÍ¼Ñ¡ÔñλÖÃ
³¡¾°
Ñ¡ÔñÒ»¸öλÖÿÉÒÔ¿ìËÙÌîд¹ºÎïʱµÄÅäË͵ØÖ·£¬Ñ¡ÔñÁíÍâÒ»¸öλÖÃÈ¥¶©ÍâÂô£¬Ò»°ãÔڻؼҵÄ·ÉÏÌáǰ¶©ºÃ£¬µ½¼Ò¾ÍÕýºÃ¿ÉÒÔ³ÔÁË¡£³öÈ¥ÂÃÓÎǰÎÒÃÇҪѡÔñ¾°µãÖܱߵÄסË޵ȵȶ¼Àë²»¿ªÒªÑ¡ÔñÁíΪһ¸öλÖõij¡¾°¡£
Ч¹û

ʾÀý´úÂ룺
wx.chooseLocation({ success: function (res) { var latitude = res.latitude var longitude = res.longitude var name= res.name var address= res.address }, cancel: function () { console.log('È¡Ïû') }, fail: function () { console.log('ʧ°Ü'); } }) |
×¢Ò⣺ÔÚÑ¡µãʱÈç¹ûÊÇͨ¹ýÍ϶¯µØÍ¼²¢ÇÒÑ¡ÖеÄÊÇĬÈϵĵÚÒ»Ìõ£¬ÔòºÜÓпÉÄÜ success »Øµ÷ÖÐ name
×Ö¶ÎΪ¿Õ£¬ÒòΪÕâÑù±êµÄµã²»Ò»¶¨ÄܶÔÓ¦µ½ POI£¬ÁбíÖеķǵÚÒ»ÌõÄÚÈÝÔòΪÒÔµ±Ç°µãµÄ¾Î³¶È¼ìË÷ÖÜ±ßµÄ poi£¬ËùÒÔ³ýµÚÒ»ÌõÆäËü¶¼ÊÇÓÐÃû³ÆµÄ£¬´ó¼ÒÔÚʹÓõÄʱºòÐèҪעÒâһϡ£
POI£¨Point of Interest£¬ÐËȤµã£©¡£ÔÚµØÍ¼±í´ïÖУ¬Ò»¸ö POI ¿É´ú±íÒ»¶°´óÏá¢Ò»¼ÒÉÌÆÌ¡¢Ò»´¦¾°µãµÈµÈ¡£
wx.openLocation(OBJECT)
ʹÓÃ΢ÐÅÄÚÖõØÍ¼²é¿´Î»Öá£
³¡¾°
չʾһ¸öλÖõij¡¾°´ó¼ÒÓ¦¸Ã¾³£¼ûµ½£¬±ÈÈ磺ÃÀÍÅ¡¢µãÆÀÀïµÄµêÆÌÏêÇéÒ³Ãæ¶¼ÓиöµêÆÌµØÖ·£¬µã»÷½øÈë»á¿´µ½µØÍ¼Éϱê¼ÇÁËÒ»¸öλÖõ㡣Ч¹ûÀàËÆÏÂͼ¡£
Ч¹û

´úÂëʾÀý£º
wx.openLocation({ latitude: 39.908683, longitude: 116.397915, scale: 18, name: 'Ìì°²ÃÅ', address: '±±¾©Êж«³ÇÇøÍâÇÅ', complete: function () { console.log('complete:', arguments); } }); |
map ×é¼þ
×é¼þÊÇС³ÌÐòΪ¿ª·¢ÕßÌṩµÄ»ù´¡×é¼þ£¬Ê¾Àý:, map×é¼þ°üº¬ÒÔÏÂËĸö¹¦ÄÜÐÔÊôÐÔ markers¡¢polyline¡¢circles¡¢controls¡£Ï±߶ÔÒÔÉÏËĸöÊôÐÔ·Ö±ð½éÉÜ¡£½Ó¿ÚÏêϸ˵Ã÷¼ûС³ÌÐò
Map ×é¼þÎĵµ¡£
map ×é¼þ-markers
ÔÚµØÍ¼ÉÏÏÔʾλÖõ㡣
³¡¾°
Ïà¶ÔÉÏÃæµÄ½Ó¿Ú wx.openLocation(OBJECT)£¬´Ë½Ó¿Ú¿ÉÒÔʵÏÖÒ»¸ö×Ô¶¨ÒåµÄλÖÃչʾ£¬¶øÇÒÒ²¿ÉÒÔʵÏÖ¶à¸öλÖõãͬʱÏÔʾµ½µØÍ¼ÉÏ¡£±ÈÈ磺ÖܱߵÄXXXÔÚͨ¹ýµØÍ¼µÄÐÎʽչʾ¡£ÕâÀïֻ˵һ¸öλÖõ㣬¶àµãÖ»ÊÇ
markers ²ÎÊý´«Èë¶à¸öµã¡£ºóÃæÊ¾Àý»áÉæ¼°µ½£¬ÕâÀï¾Í²»×¸ÊöÁË¡£
Ч¹û

´úÂëʾÀý
// wxml ½á¹¹ <view class="container"> <map bindtap="tap" class="map-container" markers= "{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}"></map> <view class="marker-info"> <text class="title weui-fs-17"> {{markers[0].title}}</text> <text class="address weui-fs-14 weui-fc-grey"> {{markers[0].address}}</text> </view> </view> // js ´úÂë /** * ͨ¹ý×é¼þ×Ô¶¨Òåmarker */ var app = getApp() Page({ data: {}, onReady: function () { this.setData({ latitude: 39.984060, longitude: 116.307520, markers: [{ id: 100, latitude: 39.984060, longitude: 116.307520, title: 'Öйú¼¼Êõ½»Ò×´óÏÃ', address: '±±¾©Êк£µíÇø±±ËÄ»·Î÷·66ºÅ', iconPath: '/images/home_press.png' }] }); } }) |
×¢Ò⣺ map µÄ longitude¡¢latitude ÖÐÐĵã×ø±êÒªÓë markers µÄÊý¾ÝÒ»ÖÂÕâÑùλÖõã²ÅÄܱê¼Çµ½µØÍ¼ÊÓÒ°µÄÖÐÐÄ¡£
map ×é¼þ-polyline
»Ïߣ¬Ö¸¶¨Ò»ÏµÁÐ×ø±êµã£¬´ÓÊý×éµÚÒ»ÏîÁ¬ÏßÖÁ×îºóÒ»Ïî¡£
³¡¾°
¹ì¼£»æÖÆ£¬Ô˶¯¹ì¼£·ÖÏí£¬¾Ñé·Ïß·ÖÏíµÈÏà¹ØÂ·ÏߵŦÄÜ¡£
Ч¹û

´úÂëʾÀý
// WXML <map id="map" markers="{{markers}}" class="map-container" include-points=" {{includePoints}}" polyline="{{lines}}" longitude="{{longitude}}" latitude="{{latitude}}"></map> // JS ÕâÀïÖ»ÌùһϴúÂë½á¹¹ latitude: 39.984519, longitude: 116.307793, includePoints: [{ latitude: 39.984519, longitude: 116.307793 }, ...], lines: [{ points: [{ latitude: 39.984519, longitude: 116.307793 },...], color: "#5c95e6FF", width: 8, dottedLine: false }], markers: [{ latitude: 39.984519, longitude: 116.307793, iconPath: '/images/marker.png', width: 20, height: 30 }, { latitude: 39.965938, longitude: 116.307793, iconPath: '/images/marker.png', width: 20, height: 30 }] |
×¢Ò⣺ include-points ÊôÐÔÊǽ«ËùÓеĵãչʾµ½¿ÉÊÓÇøÓòÄÚ£¬µ«ÊÇÈç¹û²»ÉèÖÃÖÐÐĵã latitude¡¢longitude
»áÓв»ÄÜÕ¹ÏÖµ½ÊÓÒ°ÄÚµÄÎÊÌ⣬¿ª·¢Ê±ÐèҪעÒ⣬include-points ÊôÐÔ¿ÉÒÔͨ¹ý¼ÆËãËùÓеãµÄ×î´ó¾ØÐÎ×óϾγ¶È&ÓÒÉϾγ¶ÈÀ´ÉèÖã¬ÕâÑù¿ÉÒÔ¼õС
setData µÄÊý¾Ý¡£ÒòΪС³ÌÐò setData µÄÊý¾Ý´«ÊäÓÐ 1M µÄÏÞÖÆ¡£
map ×é¼þ-circles
³¡¾°
Öܱßij·¶Î§ÄÚXXXµÄչʾ£¬ÍâÂôÅäËÍ·¶Î§µÄչʾ£¬±ÈÈ磺Öܱß1000Ã×ÓÐûÓвÞËù£¬Õâ¼Ò·¹µêËͲ͵ÄÇøÓòµÈ¡£
Ч¹û

´úÂëʾÀý
// wxml <map id="map" bindtap="onMapTap" longitude=" {{longitude}}" latitude="{{latitude}}" class="map-container" circles="{{circles}}" ></map> // js´úÂë var map; Page({ data: { latitude: 40.118246, longitude: 116.430135, circles: [{ latitude: 40.118246, longitude: 116.430135, radius: 2000, fillColor: '#0079ffa0', color: '#000000ff', strokeWidth: 2 }] } }) |
map ×é¼þ-controls
³¡¾°
Ö÷ҪʵÏÖµØÍ¼ÄڵĽ»»¥³¡¾°£¬ÏÂÃæÒԻص½µ±Ç°Î»ÖÃΪÀý£¬µã»÷µØÍ¼ÓÒÏ·½µÄ¿Ø¼þÖ´Ðлص½µ±Ç°µÄλÖᣵ±È»Ò²¿ÉÒÔ»»³É¾Æµê¡¢²ÍÒû¡¢ÓéÀֵȡ£
Ч¹û

ʾÀý´úÂë
var map; Page({ data: {}, onReady: function () { console.log('mapʵÀý', map); if (!map) { map = wx.createMapContext('map'); } var info = wx.getSystemInfoSync(); this.setData({ controls: [{ id: 1, position: { left: info.windowWidth - 70, top: info.windowHeight - 70, width: 50, height: 50 }, clickable: true, iconPath: '/images/location.png'
}]
});
},
/**
* ¿Ø¼þµã»÷´¦Àíº¯Êý
*/
onControlclick: function (e) {
switch (e.controlId) {
case 1: {
map.moveToLocation();
}
}
}
}) |
×¢Ò⣺ ÔÚÉèÖÿؼþλÖÃʱҪÓÃwx.getSystemInfoSync()½Ó¿Ú·µ»ØµÄÂß¼¿íwindowWidth¸ßwindowHeight½øÐж¨Î»¡£¿Ø¼þµã»÷´¦Àíº¯ÊýÖÐÐèҪͨ¹ýe.controlId¶ÔÓ¦¿Ø¼þÉèÖõÄ
id ½øÐÐÇø·Ö´¦Àí¡£
wx.createMapContext(mapId)
´´½¨²¢·µ»Ø map ÉÏÏÂÎÄ mapContext ¶ÔÏó£¬Ö÷Òª°üÀ¨·½·¨ÓÐgetCenterLocation¡¢moveToLocation£¬¿Ø¼þʾÀýÒÑ¾Éæ¼°µ½¾Í¾ÙÀý˵Ã÷ÁË£¬Çë²Î¼ûС³ÌÐòwx.createMapContext(mapId)
APIÎĵµ¡£
С³ÌÐòµØÍ¼Ó¦ÓÃʾÀý
½áºÏÉÏÊöµØÍ¼ÄÜÁ¦£¬·ÖÏíÒ»¸öÕÒ²ÞËùµÄÀý×Ó¡£
ÐèÇó
ʵÏÖÒ»¸öÕÒ²ÞËùµÄ¹¦ÄÜ£¬ÕÒÖܱß1000Ã×ÄڵIJÞËù¡£²¢°Ñ²ÞËùµÄλÖõã±êµ½µØÍ¼ÉÏ¡£µã»÷λÖõã¶ÔÓ¦icon·Å´ó²¢ÇÒÔÚµØÍ¼Ï·½ÏÔʾÏàÓ¦µÄÃû³Æ¡¢µØÖ·ÐÅÏ¢¡£
ʵÏÖ
Ö÷Òª·ÖÈý¸ö²½Ö裺
»ñÈ¡µ±Ç°Î»ÖÃ
ͨ¹ý¼ìË÷·þÎñËÑË÷µ±Ç°Î»ÖÃÖܱߵIJÞËù
ÔÚµØÍ¼ÊÓÒ°ÄÚ±ê¼ÇËùÓÐλÖõãÒÔ¼°Î»ÖõĽ»»¥
Ч¹û

´úÂëʾÀý
<view class="container"> <map id="map" class="map-container" bindmarkertap="onMarkerclick" markers="{{markers}}" show-location include-points="{{points}}" ></map> <view class="marker-info"> <text class="title weui-fs-17">{{markers[index].title}}</text> <text class="address weui-fs-14 weui-fc-grey"> {{markers[index].address}}</text> </view> </view> |
»ñÈ¡µ±Ç°Î»ÖÃ
// ͨ¹ýС³ÌÐòAPI½Ó¿Úwx.getLocation»ñÈ¡µ±Ç°Î»Öà wx.getLocation({ "type": 'gcj02', success: function (res) { console.log('΢ÐŶ¨Î»³É¹¦£º', res.latitude + ',' + res.longitude); }, fail: function (res) { // ... } }); |
ͨ¹ý¼ìË÷·þÎñWebService APIËÑË÷µ±Ç°Î»ÖÃÖܱß1000µÄ²ÞËù
var that = this; var url = 'https://apis.map.qq.com/ws/place/v1/search'; wx.request({ url: url, data: { key: 'http://lbs.qq.com/ ƽ̨ÉêÇë', keyword: '¹«²Þ', address_format: 'short', boundary: 'nearby(' + lat + ',' + lng + ',1000,0)' }, success: function (res) { console.log('¼ìË÷Êý¾Ý£º', res.data) cb && cb(res.data); } }) |
ÔÚµØÍ¼ÊÓÒ°ÄÚ±ê¼ÇËùÓÐλÖõãÒÔ¼°Î»ÖõãµÄµã»÷½»»¥
/** * ͨ¹ý¼ìË÷Êý¾ÝÉèÖñê×¢µã */ addMarkers: function (data) { var markers = []; var points = []; for (var i = 0; i < data.data.length; i++) { var d = data.data[i]; var o = {}; var p = {}; p.latitude = d.location.lat; p.longitude = d.location.lng; o.id = i + 1; o.latitude = d.location.lat; o.longitude = d.location.lng; o.title = d.title; o.address = d.address; o.iconPath = '/images/marker.png'; o.width = 20; o.height = 30; markers.push(o); points.push(o); } this.setData({ markers: markers, points: points, index: 1 }); }
onMarkerclick: function (e) {
console.log('marker µã»÷', e);
var markerId = e.markerId; var markers = this.data.markers;
var index = 0;
for (var i = 0; i < markers.length; i++) {
markers[i].width = 20;
markers[i].height = 30;
if (markers[i].id == markerId) {
markers[i].width = 30;
markers[i].height = 40;
index = i;
}
}
this.setData({
markers: markers, index: index
});
} |
½áÓï
ÕûÌåÀ´¿´£¬Ä¿Ç°Ð¡³ÌÐòϵÄλÖ÷þÎñÄÜÁ¦ÒѾÄܹ»¸²¸ÇLBSÓ¦ÓõĴ󲿷ֳ¡¾°£¬Ëæ×ÅС³ÌÐòÉú̬µÄÖð²½ÍêÉÆ£¬ÏàÐÅÓиü¶àµÄLBS³¡¾°»á±»ÍÚ¾ò£¬ÌÚѶλÖ÷þÎñ»áÁªºÏС³ÌÐò³ÖÐø´òÔì¸ü¼ÓÍêÉÆµÄLBSÄÜÁ¦¡£
|