微信小程序能使用海外版的地图开发应用吗

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

先是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_right.png' 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

wx.getLocation({

type: "wgs84 ",

success: function (res) {

console.log(res.latitude)

console.log(res.longitude)

latitude = res.latitude

longitude = res.longitude

centerLatitude = latitude

centerLongitude = longitude

that.setData({

lat: res.latitude,

lon: res.longitude,

})

},

fail: function (res) {

}

})

},1234567891011121314151617181920212223

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

//引入百度地图apivar bmap = require('../../libs/bmap-wx.min.js')//百度api定位我的位置

getLocaByBM:function(){

var that = this var BMap = new bmap.BMapWX({

ak: '你自己申请的ak'

}) var fail = function (data) {

console.log(data)

} var success = function (data) {

wxMarkerData = data.wxMarkerData

console.log(wxMarkerData)

centerLatitude = wxMarkerData[0].latitude

centerLongitude = wxMarkerData[0].longitude

that.setData({

markers: wxMarkerData

})

that.setData({

lat: wxMarkerData[0].latitude

})

that.setData({

lon: wxMarkerData[0].longitude

})

}//好像必须要加这个

BMap.regeocoding({

fail: fail,

success: success,

iconPath: '../../image/center.png',

iconTapPath: '../../img/center.png',

width:23,

height:40

})

},12345678910111213141516171819202122232425262728293031323334353637

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

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

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

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

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

我们要实现一个如下的功能：点击获取经纬度按键，在页面上显示经纬度，在console里面打印经纬度。

第一步:新建一个page，命名为location：

第二步：把location设置为启动页面:

然后保存

第三步：在location.ttml中添加一个按键：

第四步：给按键添加一个bindtap，命名为getlocation，给按键添加点击效果：

第五步：在location.js文件中添加getlocation函数；

第六步：添加获取到经纬度的函数，直接复制粘贴，具体看下面的图片：

第七步：点击保存，点击按键,查看console:可以看到经纬度出来了。

第八步：给location.js中添加一个变量，名字随便起，这里叫做message，然后保存，格式如下：

第九步：修改location.js中的onLoad，添加self=this，然后保存，格式如下：函数

第十步，在第六步的基础上，继续完善getlocation函数，把经纬度赋值给第八步建立的变量message，如下所示，点击保存：

self.setData({message:`经度 ${res.longitude}，纬度 ${res.latitude}`})

第十一步：修改location.ttml文件，修改view的显示，显示的内容为第八步建立的变量message，具体格式为用两个大括号{{message}}，然后点击保存，

第十二步：点击按键，就可以看到经纬度了：

的

的

可以。

获取经纬度位置信息功能的方法：

方法一：使用xGeocoding工具，批量获得Google Earth/Google Map/百度/腾讯/高德等地图的经纬度。工具地址：http://www.gpsspg.com/xgeocoding/。

1.打开百度地图“坐标拾取系统”：输入网址”http://api.map.baidu.com/lbsapi/getpoint/index.html“，进入”坐标拾取系统“

2.进入”坐标拾取系统“后，就可以方便的查询自己的精准地理信息了，我们以”海尔工业园“为例，寻找它的详细坐标。在搜索栏输入“海尔工业园”点击搜索，如图，就会在地图上出现相应的标记，点击你要找的某一个，就能看到相应的坐标。

3.把找到的坐标输入到搜索栏，把后面“坐标反查”给勾上，点击搜索，就会对应的坐标打上标记，同时会有相应地址在最右边

4.把鼠标在地图上滑行，你可以看到，鼠标滑到每一个地方，都会显示对应的坐标。

方法二：使用Python程序，直接嵌入即可。

---