微信小程序——地图（定位，多个标记点）

地图（定位，多个标记点）

效果图：

.
.
.

使用的是微信自带的腾讯地图，
使用起来方便，简单，代码也很好理解
喜欢的朋友请收藏
.
.
.
.
.
.

.js代码：

Page({data: {longitude: 113.14278, //地图界面中心的经度latitude: 23.02882, //地图界面中心的纬度markers: [ //标志点的位置//位置0{id: 0,iconPath: "../images/1.png",latitude: 23.04308268848755,longitude: 113.13562655285273,width: 28,height: 32},//位置1{id: 1,iconPath: "../images/1.png",latitude: 23.03814334110172,longitude: 113.15378758608608,width: 28,height: 32},//位置2{id: 2,iconPath: "../images/1.png",latitude: 23.03377135768493,longitude: 113.17075479351229,width: 28,height: 32},//位置3{id: 3,iconPath: "../images/1.png",latitude: 23.02542516569787,longitude: 113.1417505798413,width: 28,height: 32},//位置4{id: 4,iconPath: "../images/1.png",latitude: 23.022740816325694,longitude: 113.14681189547798,width: 28,height: 32},]},onLoad: function () {var that = this;wx.getLocation({type: "wgs84",success: function (res) {var latitude = res.latitude;var longitude = res.longitude;console.log("当前位置的经纬度为：", res.latitude, res.longitude);that.setData({latitude: res.latitude,longitude: res.longitude,})}})},onReady: function () {},/*** 地图放大缩小事件触发* @param {*} e */bindregionchange(e) {console.log('=bindregiοnchange=', e)},/*** 点击地图事件，有经纬度信息返回* @param {*} e */bindtapMap(e) {console.log('=bindtapMap=', e)}
})

.
.
.

.wxss代码：

page{height: 100%;
}

.
.
.
.

.wxml代码：

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;"><map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="14" show-locationstyle="width: 100%; height: 100%;" bindregionchange="bindregionchange" bindtap="bindtapMap"></map></view>

.
.
.

app.json增加代码：

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},

图标 1.png

微信小程序——地图（定位，多个标记点）相关推荐

腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程
前言目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 2.登录进入小程序后台,选择 "开发 - 开发工具 ...
微信小程序地图定位开发教程
前言目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 1.进入微信公众平台 2.登录进入小程序后台,选择 &quo ...
腾讯地图实现微信小程序地图定位教程
前言目前腾讯位置服务提供路线规划.地图选点.地铁图.城市选择器插件四款插件产品,本篇博客主要针对地图选点功能进行实现. 开通腾讯位置服务 1.进入微信公众平台 2.登录进入小程序后台,选择 &quo ...
微信小程序地图定位GPS转腾讯地图的坐标系
//svar GPS = {PI: 3.14159265358979324,x_pi: 3.14159265358979324 * 3000.0 / 180.0,delta: function (la ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
小程序地图定位授权取消后再次授权
更博啦,背景:webview+小程序,新增收货地址是h5页面,调的小程序地图.获取到地址后再将值带入网页中.最近写的项目中遇到地图定位弹框拒绝授权后,无法再次调起地图组件,页面显示空白,用户使用体验差 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...

微信小程序——地图（定位，多个标记点）

地图（定位，多个标记点）

.js代码：

.wxss代码：

.wxml代码：

app.json增加代码：

微信小程序——地图（定位，多个标记点）相关推荐

最新文章

热门文章