百度地图api(js) 从怎么获取文本框里输入的内容获取两个输入的地名,然后点击按钮,用getDistance计算他们之间的距离

实现的功能有:(中间“红色图標”所在位置为选择的定位)
1. 拖动地图进行定位;
2. 根据输入的内容进行地图定位。

1. 百度地图开放平台申请ak:

创建应用时应用名称自定義,应用类型选择“微信小程序”APPID为小程序的appId,然后提交

下载后,拷贝到libs目录下在相应js模块进行引入。

搜索框中的搜索图标是阿里巴巴矢量图标库中下载:

下载后,将文件拷贝到public目录下并在app.wxss中引入,即可全局使用

 2. 初始化页面,执行onLoad()方法实例化百度地图API核心类,微信小程序获取当前位置经纬度

* 生命周期函数--监听页面加载 // 实例化百度地图API核心类 //获取当前位置经纬度

 3. 每当地图视野变化时,会执行regionchange()中间红色图标为当前定位。

//地图视野变化触发的事件 // 地图发生变化的时候获取中间点,也就是用户选择的位置

为了实现红色图标在视覺上是固定在中间因此我在map.wxml(具体代码如上)中,通过cover-image标签引入红色图标,然后position定位在中间

然后js部分data数据中的markers参数进行设置,将其width囷height的值设置为1不要设置0,适得其反(当然可以试一下是什么情况)

markers: [{ //标记点用于在地图上显示标记的位置

4. 逆地址解析 -- 从经纬度转换为地址信息。

四. js实现 -- 根据输入的内容进行地图定位

1. 每输入一个字符便会进行搜索。其中 tapSearchResult()方法是点击显示的搜索列表某一项所触发的

// 点击搜索列表某一项 // 引用百度地图微信小程序JSAPI模块 markers: [{ //标记点用于在地图上显示标记的位置 * 生命周期函数--监听页面加载 // 实例化百度地图API核心类 //获取当湔位置经纬度 // 点击搜索列表某一项 // 地图发生变化的时候,获取中间点也就是用户选择的位置 * 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面显示 * 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面卸载 * 页面相关事件处理函数--监听用户下拉动作 * 页面上拉触底事件的處理函数 * 用户点击右上角分享

解决:请确认百度地图创建的应用中填写的APP ID与当前项目的appID是否一致!

}

我要回帖

更多关于 怎么获取文本框里输入的内容 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信