小程序地图map

wxml:

<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button>
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

js:

//获取应用实例
var app = getApp()
Page({
data: {
latitude: 0,//纬度
longitude: 0,//经度
speed: 0,//速度
accuracy: 16,//位置精准度
markers: [],
covers: [],
},
onLoad: function () {
},
getlocation: function () {
var markers = [{
latitude: 28.211400,
longitude: 112.914250,
name: ‘喜地大厦‘,
desc: ‘我的位置‘
}]
var covers = [{
latitude: 28.211400,
longitude: 112.914250,
iconPath: ‘/image/ic_position.png‘,
rotate: 0
}]
this.setData({
longitude: 112.914250,
latitude: 28.211400,
markers: markers,
covers: covers,
})
wx.getLocation({
type: ‘gcj02‘,
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
console.log("latitude:" + latitude)
console.log("longitude:" + longitude)
console.log("speed:" + speed)
console.log("accuracy:" + accuracy)
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 28
})
}
})
}
})

效果图: 

时间: 2024-08-02 02:44:26

小程序地图map的相关文章

微信小程序开发MAP(地图)

https://blog.csdn.net/qq_35844359/article/details/73740001 微信小程序地图开发入门(一) https://blog.csdn.net/sinat_30162391/article/details/60779224 「微信小程序」实现获取当前位置并在地图上显示 https://blog.csdn.net/tycsbs/article/details/52690007 微信小程序模板消息的两种实现方式 https://blog.csdn.ne

小程序地图导航功能实现(勾起使用外部高德或者腾讯地图)

原理就是:使用sdk 解析地址成经纬,再唤起小程序地图解析,然后通过这个选择使用外部的地图软件. 首先使用:先去下载腾讯地图sdk,将其引用. 第一步: var QQMapWX = require('../../map/qqmap-wx-jssdk.min.js'); const wxMap = new QQMapWX({ key: '*********' // 必填 }); 第二步:解析地址 //解析地址为经纬 detaiAddress: function (e) { var that = t

小程序地图的使用笔记

这两天在看小程序的地图,写写笔记记录一下 小程序官方文档提供的方法 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html 腾讯地图提供的jssdk http://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html 根据提示使用腾讯地图jssdk需要申请,在实例化的时候填入密匙,接下来就可以使用他提供的各种方法了 我先说说我做关键词搜索和点击搜索结果进行路线规划(规划目前可能只是按自驾的路线,不完善的地方麻

微信小程序 地图组件中marker无法使用网络图片问题

最近做微信小程序的时候,要做一个地图找房的功能,是这个样子的 后台贴心底提供了价格标签的图片 根据微信小程序文档,这里使用markers里的iconPath加载后台给我的url就行了 但是编译后却发现图片没有加载出来 直接给出我的解决方法 先把图片下载到本地,然后再进行使用 原文地址:https://www.cnblogs.com/hitore/p/8505643.html

小程序地图报错——ret is not defined

微信小程序输入地址进行定位,在返回的数据进行处理时报错. 经度,纬度传值不正确导致出现以上错误,正确取值范围: latitude   纬度  浮点数,范围 -90 ~ 90 longitude   经度   浮点数,范围 -180 ~ 180 原文地址:https://www.cnblogs.com/bing0709/p/10437327.html

小程序地图导航

<view class="address-map"> <map id="map" longitude="{{jobDetail.longitude}}" latitude="{{jobDetail.latitude}}" scale="14" markers="{{markers}}" bindtap="handleMap" show-locatio

微信小程序地图定位GPS转腾讯地图的坐标系

参考:http://www.qchcloud.cn/tn/article/23参考 //svar GPS = {PI: 3.14159265358979324,x_pi: 3.14159265358979324 3000.0 / 180.0,delta: function (lat, lon) {// Krasovsky 1940//// a = 6378245.0, 1/f = 298.3// b = a (1 - f)// ee = (a^2 - b^2) / a^2;var a = 637

关于小程序使用map组件,标记markers时报错误(ret is not defined)

直接放错误截图,如下: 报错原因是因为: 经度和纬度的数据不正确导致的. latitude  纬度  浮点数  ,范围 -90~90 longitude  经度  浮点数  , 范围 -180~180 且  经度值要小于纬度值 <map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" ></m

微信小程序地图移动到指定的位置

其实很简单 控制 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="mark