微信小程序 地图组件使用

 本地图程序利用map组件,以及使用它的markers,polyline属性分别设置地图两个位置的标志以及他们之间的连线,利用腾讯地图的API对两个地点进行查询,动态设置地图的经纬度,以及动态初始化markers,polyline属性。

程序运行截图如下:

程序代码如下:

  1. app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/Map/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "个人主页",
"iconPath": "utils/images/b3.png",
"selectedIconPath": "utils/images/b4.png"
},
{
"pagePath": "pages/Map/index",
"text": "地图",
"iconPath": "utils/images/a1.png",
"selectedIconPath": "utils/images/a2.png"
}
]
}
}

 2. map/index.js

// pages/Map/index.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
key: 'GEYBZ-IM4WJ-TK5FL-K7BKW-TDDV2-P5FGL'});
Page({/**
* 页面的初始数据
*/
data: {
start_lat: 0,
start_lon: 0,
end_lat:0,
end_lon:0,
markers: [
{
iconPath: '../../utils/images/qz.jpg',
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
},
{
iconPath: '../../utils/images/qz.jpg',
id: 1,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}
],
address: '',
polyline: [
{
points: [{
longitude: 0,
latitude: 0}, {
latitude: 0,
longitude: 0
}],
color: "#ff6600",
width: 2,
dottedLine: false,
arrowLine: true,
borderColor: "#000",
borderWidth: 5
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
let start_lat=0;
let start_lon=0;
wx.getLocation({
success: function (res) {
qqmapsdk.search({
keyword: '江西省南昌市新建区丰和南大道696号',
complete: function (res) {
console.log(res.data[0].location.lat);
console.log(res.data[0].location.lng);
start_lat = res.data[0].location.lat;
start_lon = res.data[0].location.lng;
that.setData({
start_lat: res.data[0].location.lat,
start_lon: res.data[0].location.lng,
"markers[0].latitude": res.data[0].location.lat,
"markers[0].longitude": res.data[0].location.lng,
"polyline[0].points[0].latitude": res.data[0].location.lat,
"polyline[0].points[0].longitude": res.data[0].location.lng,
})
}
});
qqmapsdk.search({
keyword: '江西省南昌市新建区红谷滩新区学府大道999号',
complete: function (res) {
that.setData({
end_lat: res.data[0].location.lat,
end_lon: res.data[0].location.lng,
"markers[1].latitude": res.data[0].location.lat,
"markers[1].longitude": res.data[0].location.lng,
"polyline[0].points[1].latitude": res.data[0].location.lat,
"polyline[0].points[1].longitude": res.data[0].location.lng,
// polyline: [{
// points: [{
// longitude: res.data[0].location.lng,
// latitude: res.data[0].location.lat// }, {
// latitude: that.data.start_lat,
// longitude: that.data.start_lon
// }],
// color: "#ff6600",
// width: 2,
// dottedLine: false,
// arrowLine: true,
// borderColor: "#000",
// borderWidth: 5
// }]
});
}
})},
})},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})

​​​​​​​   3. map/index.wxml

<map class='map' latitude='{{start_lat}}' longitude='{{start_lon}}' polyline="{{polyline}}" markers='{{markers}}'>
</map>

   4.  map/index.wxss

page{
width: 100%;
height: 100%;
}
.map{
height: 100%;
width: 100%;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python中的集合set

集合与之前列表、元组类似&#xff0c;可以存储多个数据&#xff0c;但是这些数据是不重复的 集合对象还⽀持union(联合), intersection(交), difference(差)和 sysmmetric_difference(对称差集)等数学运算. >>> x set(abcd) >>> x {c…

LeetCode 1562. 查找大小为 M 的最新分组

文章目录1. 题目2. 解题1. 题目 给你一个数组 arr &#xff0c;该数组表示一个从 1 到 n 的数字排列。有一个长度为 n 的二进制字符串&#xff0c;该字符串上的所有位最初都设置为 0 。 在从 1 到 n 的每个步骤 i 中&#xff08;假设二进制字符串和 arr 都是从 1 开始索引的情…

HDOJ 3415 Max Sum of Max-K-sub-sequence

单调队列优化。。。。Max Sum of Max-K-sub-sequenceTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 4759 Accepted Submission(s): 1734Problem DescriptionGiven a circle sequence A[1],A[2],A[3]......A[n]…

DurOS语音开发

DuerOS语音开发项目&#xff0c;该项目通过搭载DuerOS开发者平台&#xff0c;利用平台开发的一组API规范&#xff0c;实现实时的语音播报功能。 整体流程示意图&#xff1a; 所用设备&#xff1a;树莓派微机系统、arduino与74HC595单片机、地图彩灯控制沙盘、小度语音。 数据流…

Sharepoint学习笔记—习题系列--70-573习题解析 -(Q40-Q44)

Question 40You need to send a single value from a consumer Web Part to a provider Web Part.Which interface should you use?A. IAlertNotifyHandlerB. IWebPartFieldC. IWebPartParametersD. IWebPartRow 解析&#xff1a;本题的目的是在Webpart之间传递“单值”(singl…

LeetCode 1563. 石子游戏 V(DP)

文章目录1. 题目2. 解题2.1 区间DP1. 题目 几块石子 排成一行 &#xff0c;每块石子都有一个关联值&#xff0c;关联值为整数&#xff0c;由数组 stoneValue 给出。 游戏中的每一轮&#xff1a; Alice 会将这行石子分成两个 非空行&#xff08;即&#xff0c;左侧行和右侧行…

python中进程创建—fork()

导入模块&#xff1a;import os 1.程序执行到os.fork()时&#xff0c;操作系统会创建一个新的进程&#xff08;子进程&#xff09;&#xff0c;复制父进程信息 2.子进程从fork&#xff08;&#xff09;函数中得到返回值零 3.父进程从fork&#xff08;&#xff09;函数中得到返…

个人简历小程序

为了熟练掌握微信小程序开发的一些基本技巧&#xff0c;熟悉微信小程序开发流程&#xff0c;特此&#xff0c;运用所学知识&#xff0c;做了一个个人简历小程序。 效果图如下&#xff1a; 代码如下&#xff1a; ① index.jsconst app getApp() Page({ data: { userInfo: {}…

Android的Fragment介绍

前言 fragment是从android3.0开始提出来的&#xff0c;用来支持大屏幕设备的ui设计。通过将activity划分为多个fragment&#xff0c;不仅提高了设计的灵活性&#xff0c;而且可以在程序运行时改变它们的特征&#xff0c;比如动态的修改&#xff0c;替换已有的fragment等等。 fr…

[Kaggle] Heart Disease Prediction

文章目录1. 数据探索2. 特征处理管道3. 训练模型4. 预测kaggle项目地址1. 数据探索 import pandas as pd train pd.read_csv(./train.csv) test pd.read_csv(./test.csv)train.info() test.info() abs(train.corr()[target]).sort_values(ascendingFalse)<class pandas.c…

python进程的回收—wait

1.os.wait()回收资源 os.wait()方法用来回收子进程占用的资源&#xff1a; import os import time ret os.fork() # 创建新的进程 一次调用&#xff0c;两次返回 if ret 0: # 子进程执行 # 子进程拿到的返回值是0 print("子进程&#xff1a;pid%d, ppid%d" % (…

Oracle数据库逻辑存储结构管理相关问题与解决

我们在Mysql数据库中&#xff0c;一般是登入进去一个数据库&#xff0c;紧接着就创建数据库实例&#xff1a;create databse XXX;但是在Oracle数据库就不行。在数据库连接过程中老是报监听失败的错误。在备份表空间的时候&#xff0c;设置表空间为备份模式&#xff0c;它提示我…

Python调用C的方法

参考&#xff1a;http://www.cnblogs.com/fxjwind/archive/2011/07/05/2098636.html http://amazingjxq.com/2012/01/09/python%E8%B0%83%E7%94%A8c%E5%87%BD%E6%95%B0/>>>cd /home/jxq/code/gcc -fPIC -shared bob_hash.c -o bob_hash.so然后在python里面用ctypes加载…

01.神经网络和深度学习 W2.神经网络基础

文章目录1. 二分类2. 逻辑回归3. 逻辑回归损失函数4. 梯度下降5. 导数6. 计算图导数计算7. 逻辑回归中的梯度下降8. m个样本的梯度下降9. 向量化10. 向量化的更多例子11. 向量化 logistic 回归12. 向量化 logistic 回归梯度输出13. numpy 广播机制14. 关于 python / numpy 向量…

python中的孤儿进程

1.子进程未运行完父进程就结束运行退出&#xff0c;留下来的子进程就是孤儿进程 2.父进程结束退出&#xff0c;子进程会被继父收回&#xff0c;通常是int进程&#xff08;pid为1&#xff09;无危害 import os import time ret os.fork() # 创建新的进程 一次调用&#xff0…

Oracle数据库物理存储结构管理遇到的问题与解决

问题一&#xff1a;当我创建一个重做日志文件放入重做日志文件组中的时候&#xff0c;查询数据字典发现新创建的重做日志文件的状态为“不合法”。 解决方案&#xff1a; 通过查阅相关资料了解到 新建的重做日志文件组成员状态为INVALID,这是由于新建的成员文件还没有被…

实例讲解hadoop中的map/reduce查询(python语言实现)

条件&#xff0c;假设你已经装好了hadoop集群&#xff0c;配好了hdfs并可以正常运行。 $hadoop dfs -ls /data/dw/explorerFound 1 itemsdrwxrwxrwx - rsync supergroup 0 2011-11-30 01:06 /data/dw/explorer/20111129$ hadoop dfs -ls /data/dw/explo…

python中僵尸进程

⼦进程运⾏完成&#xff0c;但是⽗进程迟迟没有进⾏回收&#xff0c;此时⼦进程实际上并没有退出&#xff0c;其仍然占⽤着系统资源&#xff0c;这样的⼦进程称为僵⼫进程。 因为僵⼫进程的资源⼀直未被回收&#xff0c;造成了系统资源的浪费&#xff0c;过多的僵⼫进程将造成…

01.神经网络和深度学习 W3.浅层神经网络

文章目录1. 神经网络概览2. 神经网络的表示3. 神经网络的输出4. 多样本向量化5. 激活函数6. 为什么需要 非线性激活函数7. 激活函数的导数8. 随机初始化作业参考&#xff1a; 吴恩达视频课 深度学习笔记 1. 神经网络概览 xW[1]b[1]}⟹z[1]W[1]xb[1]⟹a[1]σ(z[1])\left.\begin…