怎么样使用微信地图小程序导航 如何用微信导航

如果你出门不认识路，那么可以用微信地图小程序导航。下面我来告诉大家怎么 *** 作吧。

01

首先打开微信这个app，如图1所示。进入微信后，你会看到出现一个新的界面，如图2所示。

02

点击右上角的“搜索”选项，如图1箭头所示。在搜索框中输入腾讯地图，点击进入，会出现一个新的界面。

03

在“搜索地点”中输入你的目的地，如图1箭头所示。会出现一个新的界面，点击右下角的“路线”选项，如图2箭头所示。

04

会出现一个新的界面，点击右下角的“导航”选项，如图1箭头所示。这样就完成啦。

这里贴下主要代码介绍下：

先是wxml文件：

<map id='parkingMap' class='mp_map' longitude="{{lon}}" latitude="{{lat}}" scale='14' markers='{{markers}}' controls='{{controls}}' bindcontroltap='controltap' bindmarkertap='markertap' show-location='true' bindregionchange='regionchange' bindtap='clickOther'> 1

标签里的属性API文档里都有介绍，应该没什么好说的了；

可以看到在地图上有标记p，点击需要有提示信息，查了下微信map上面无法在继续添加覆盖物，然后看了API文档有个cover-view，于是就用这个来做了个提示信息：

<cover-view class='parkingName'>{{parkingName}}</cover-view>

<cover-view class='space'>

<cover-view class='totalNum'>总车位：<cover-view style='color:red'>{{totalNum}}</cover-view></cover-view>

<cover-view class='leftNum'>剩余车位：<cover-view style='color:red'>{{leftNum}}</cover-view></cover-view>

</cover-view>

</cover-view>

<cover-view class='right'>

<cover-image src='//image/arrow_rightpng' class='arrow'></cover-image>

</cover-view>

</cover-view>

123456789101112131415

注意这里是要添加到map标签里面：<map> <cover-view> </cover-view></map>

加了个if判断，点击地图上的P才显示；

js文件：

初始化data：

//定义全局变量var longitude, latitude, mapCtxvar centerLongitude, centerLatitude, windowWidth, windowHeight /

页面的初始数据

/

data: {

lon: '',

lat: '',

is_show: false,

parkingName:'',

totalNum:'',

leftNum:'',

markers: [],

controls: []

},12345678910111213141516

首先是获取定位，使用微信小程序API提供的方式：

getloca:function(){

var that = this

var time

wxgetLocation({

type: "wgs84 ",

success: function (res) {

consolelog(reslatitude)

consolelog(reslongitude)

latitude = reslatitude

longitude = reslongitude

centerLatitude = latitude

centerLongitude = longitude

thatsetData({

lat: reslatitude,

lon: reslongitude,

})

},

fail: function (res) {

}

})

},1234567891011121314151617181920212223

在实际测试中，发现有的android机掉用改API就是无法定位，测试过所需要的权限都有，最后尝试了下百度地图，居然发现成功了，一下是百度地图定位（具体可以查看百度地图小程序API）的方式：

//引入百度地图apivar bmap = require('//libs/bmap-wxminjs');//百度api定位我的位置

getLocaByBM:function(){

var that = this; var BMap = new bmapBMapWX({

ak: '你自己申请的ak'

}); var fail = function (data) {

consolelog(data)

}; var success = function (data) {

wxMarkerData = datawxMarkerData;

consolelog(wxMarkerData)

centerLatitude = wxMarkerData[0]latitude

centerLongitude = wxMarkerData[0]longitude

thatsetData({

markers: wxMarkerData

});

thatsetData({

lat: wxMarkerData[0]latitude

});

thatsetData({

lon: wxMarkerData[0]longitude

});

} //好像必须要加这个

BMapregeocoding({

fail: fail,

success: success,

iconPath: '//image/centerpng',

iconTapPath: '//img/centerpng',

width:23,

height:40

});

},12345678910111213141516171819202122232425262728293031323334353637

好吧，这次的测试结果苹果，小米，华为，三星均能正常定位了；希望微信以后能改善这个问题吧。

不过这里需要注意一个问题，小程序是基于腾讯地图（使用火星坐标），百度地图定位出来的坐标需要转换才能正确的标识，文末会贴出转换的代码；

下面是map的 *** 作了，常见的几种添加markers，controls，地图移动时的监听处理；

先介绍地图移动的监听处理：

这里可以结合微信API文档来看会更清晰（文笔不好，写的有些乱），先获取map对象：

以上就是关于怎么样使用微信地图小程序导航 如何用微信导航全部的内容，包括:怎么样使用微信地图小程序导航 如何用微信导航、微信小程序能使用海外版的地图开发应用吗、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！