共计 26314 个字符,预计需要花费 66 分钟才能阅读完成。
把你的前端拿捏得死死的,每天学习得爽爽的,达达前端程序员,微信搜寻【程序员哆啦 A 梦】关注这个不一样的程序员。
前言
作为一名退职岗位为【前端开发工程师】的程序员,我开发的应用程序常常须要获取用户地位信息,须要再某些场合下应用展现地图以及地图商的某些地点,须要获取行政区划列表(省市区)以及地址详情信息,须要在地图上布局一条(动静)路线,轨迹回放,小车挪动,须要创立信息窗口,用于地点的摘要性信息的展现。
公司内做的是共享我的项目,场景是这样的,一种常见共享充电宝(性能差不多和风行的共享单车一样),在做小程序首页时,须要做到的是扫码充电,分割客服(问题反馈),获取地理位置,开篇即是一副地理位置,在你左近获取到区域内店铺信息,点击该店的 logo 标记能够获取该店的地理位置,营业时间,店名,间隔,是否以后该店里是否有可借的充电宝等信息。
共享充电电动车????,首页也是一副地理位置地图,能够获取你左近最近的共享电动车,获取车的地址,状态等信息。显示该车的残余电量,应用记录,租借订单,获取行程轨迹,某时间段内的里程,动态显示轨迹等。
波及到的共享其实内容很多(如除了电动车,充电宝,还可租借设施等),但大都性能简直雷同,须要交押金,租借费用,信用免押金等。开发过 app,H5,web 网站,小程序我的项目都与地图相干的位置服务非亲非故,让我说说与位置服务无关的故事。
上面次要还是解说其中的对于 地图功能 等性能,应用的也是腾讯地位开发服务。会一步一步阐明,做一些案例展现,代码阐明,应用教程。(留神这里我回去看开发教程,尽量把每个性能都相熟地阐明一下应用办法)
一、腾讯位置服务是什么?
腾讯位置服务无疑是获取位置服务等信息内容,该产品亮点:
- 定位:为合作伙伴和宽广开发者提供欠缺的地位解决方案,已为社交、出行、游戏、商业、O2O、物流等畛域提供业余精准的定位服务
- 地图:腾讯位置服务在多平台为开发者提供了丰盛的地图展示模式,帮忙从属于不同畛域的开发人员轻松实现构建地图并在其根底上打造专属内容的工作。同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需要
- 地点搜寻 :基于海量鲜活地点(POI) 数据,提供周边搜寻,城市范畴搜寻,关键词输出提醒、分类筛选等多种搜寻能力,面向社交、物流、出行等行业打造专属搜寻策略,体验更胜一筹
- 路线布局:依据出发地、目的地以及路线策略设置,联合精准的实时交通路况提供驾车、步行、骑行、公交路线布局能力,助力开发者为用户提供贴心、人性化的出行体验
- 微信小程序解决方案:腾讯位置服务全面拥抱小程序生态,从服务 API、根底地图组件、插件、行业计划等多个层面服务不同场景需要的小程序开发者,助力小程序插上地图的“翅膀”!
- 个性化地图:个性化款式:千行千面,助力开发者依据本身产品的应用场景、界面色调,选取或者创立格调匹配的地图款式,体验更胜一筹;个性化图层:实在酷炫,助力开发者将精美绘图生成地图瓦片并置于地图之上,让旅游景点、大学高校等区域的展现成果不同凡响
二、应用步骤
1.uniapp 开发 map 阐明
应用 uniapp 是因为它是一个应用 vue.js 开发所有前端利用的框架,开发者编写一套代码,能够公布到 ios,android,web 以及各种小程序,快利用等多个平台。
应用 map
地图组件开发,地图组件用于展现地图(应用的时腾讯地图),说一下它的属性有:
longitude
(类型为 Number
,没有默认值,示意核心经度)latitude
(类型为Number
,没有默认值,示意核心纬度)scale
(类型为Number
,默认值为 16,缩放级别取值范畴为 5 -18)markers
(类型为Array
数组,类型为数组即示意地图上能够有多个,没有默认值,示意标记点)polyline
(类型为 Array
数组,没有默认值,示意路线,数组上的所有点连成线)circles
(类型 Array
数组,示意圆)controls
(类型 Array
数组,示意控件)include-points
(类型 Array
数组,示意缩放视线已蕴含所有给定的坐标点)enable-3D
(类型为Boolean
,默认值为 false,示意是否显示 3D 搂块)show-compass
(类型为Boolean
,默认值为 false,示意为是否显示指南针)enable-overlooking
(类型为Boolean
,默认值为 false,示意为是否开启仰视)enable-satellite
(类型为Boolean
,默认值为 false,示意为是否开启卫星图)enable-traffic
(类型为Boolean
,默认值为 false,示意为是否开启实时路况)show-location
(类型为Boolean
,示意显示带有方向的以后定位点)polygons
(类型Array
,示意为多边形)
点击属性
@markertap
- 示意点击标记点时触发,e.detail={markerId}
@labeltap
- 示意点击label
时触发,e.detail = {markerId}
@callouttap
- 示意点击标记点对应的气泡时触发,e.detail = {markerId}
@controltap
- 示意点击控件时触发,e.detail = {controlId}
@regionchange
- 示意视线发生变化时触发@tap
- 示意点击地图时触发;App-nuve
、微信小程序 2.9 反对返回经纬度@updated
- 示意在地图渲染更新实现时触发
咱们在写
map
组件时,组件的宽 / 高举荐写间接量,比如说是750rpx
,不要设置百分比值,在uni-app
中只反对gcj02
坐标。
介绍 markers 属性 - 类型为数组 Array
由之前形容可知,markers 属性类型为 Array,示意标记点用于在地图上显示标记的地位。这个数组属性,它外面有它的对象配置属性,别离是:
id
,示意 标记点id
,类型为Number
,必填项,marker
点击事件回调会返回此id
,倡议为每个marker
设置上Number
类型id
,保障更新marker
时有更好的性能。latitude
,纬度,类型Number
,必填项,浮点数,范畴-90 ~ 90
longitude
,经度,类型Number
,必填项,浮点数,范畴-180 ~ 180
title
,标注点名,类型String
,不是必填,点击时显示,callout
存在时将被疏忽iconPath
,显示的图标,类型String
,必填项,我的项目目录下的图片门路rotate
,旋转角度,类型Number
,不是必填,顺时针旋转的角度,范畴0 ~ 360
,默认为 0alpha
,标注的透明度,类型Number
,不是必填,默认 1,无通明,范畴0 ~ 1
width
,标注图标宽度,类型Number
,不是必填,默认为图片理论宽度height
,标注图标高度,类型Number
,不是必填,默认为图片理论高度callout
,自定义标记点上方的气泡窗口,类型Object
,不是必填 – 可辨认换行符label
,为标记点旁边减少标签,类型Object
,不是必填 – 可辨认换行符anchor
,经纬度在标注图标的锚点,默认底边中点,不是必填,{x, y},x 示意横向(0-1),y 示意竖向(0-1)。{x: .5, y: 1} 示意底边中点
marker 上的气泡 callout(Object 类型)
marker
数组 上属性 callout
对象应用属性:
content
,文本,String
color
,文本色彩,String
fontSize
,文字大小,Number
borderRadius
,callout
边框圆角,Number
bgColor
,背景色,String
padding
,文本边缘留白,Number
display
,'BYCLICK': 点击显示; 'ALWAYS': 常显
,String
textAlign
,文本对齐形式。有效值:left, right, center
,String
marker 上的标签 label(Object 类型)
content
,文本,String
color
,文本色彩,String
fontSize
,文字大小,Number
- x,label 的坐标,原点是
marker
对应的经纬度,Number
- y,label 的坐标,原点是
marker
对应的经纬度,Number
- borderWidth,边框宽度,Number
- borderColor,边框色彩,String
- borderRadius,边框圆角,Number
- bgColor,背景色,String
- padding,文本边缘留白,Number
- textAlign,文本对齐形式。有效值:
left, right, center
,String
polyline
polyline
示意指定一系列坐标点,从数组第一项连线至最初一项
points
,经纬度数组,类型为Array
,必填,如:[{latitude: 0, longitude: 0}]
color
,线的色彩,类型为String
,不用填,如:#0000AA
width
,线的宽度,类型为Number
,不用填dottedLine
,是否虚线,类型为Boolean
,不用填,默认值false
arrowLine
,带箭头的线,类型为Boolean
,不用填,默认值为false
arrowIconPath
,更换箭头图标,类型为String
,不用填,在arrowLine
为true
时,默认带箭头的线时失效borderColor
,线的边框色彩,类型为String
,不用填borderWidth
,线的厚度,类型为Number
,不用填
polygon
polygon
指定一系列坐标点,依据 points
坐标数据生成闭合多边形
points
,经纬度数组,array
,必填,如:[{latitude: 0, longitude: 0}]
strokeWidth
,描边的宽度,Number
,否strokeColor
描边的色彩,String
,否fillColor
,填充色彩,String
,否zIndex
,设置多边形Z
轴数值,Number
,否
circles
circles
在地图上显示圆
latitude
,纬度,Number
,必填,浮点数,范畴-90 ~ 90
longitude
,经度,Number
,必填,浮点数,范畴-180 ~ 180
color
,描边的色彩,String
,不用填,如:#0000AA
fillColor
,填充色彩,String
,不用填,如:#0000AA
radius
,半径,Number
,必填strokeWidth
,描边的宽度,Number
,不用填
controls
controls
在地图上显示控件,控件不随着地图挪动
id
,控件id
,Number
,不用填,在控件点击事件回调会返回此 idposition
,控件在地图的地位,Object
,必填,控件绝对地图地位iconPath
,显示的图标,String
,必填,我的项目目录下的图片门路,反对相对路径写法,以'/'
结尾则示意绝对我的项目根目录;也反对长期门路clickable
,是否可点击,Boolean
,不用填,默认不可点击
position
left
,间隔地图的左边界多远,Number
,不用填,默认为 0top
,间隔地图的上边界多远,Number
,不用填,默认为 0width
,控件宽度,Number
,不用填,默认为图片宽度height
,控件高度,Number
,不用填,默认为图片高度
留神在 uniapp 中地图组件的经纬度必填,如果不填,经纬度则默认值是北京的经纬度。
2.uniapp 应用 map 组件
根本应用办法
应用 uniapp 开发中的 map 组件,根本应用办法:
<font color=#999AAA > 代码如下(示例):
<map :scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
markers
属性的应用,<font color=#999AAA > 代码如下(示例):
markers: [{
id: 1, // Number
title: '1', // String- 标注点名
rotate: 180, // Number - 顺时针旋转的角度,范畴 0 ~ 360,默认为 0
alpha: 0.5, // 默认 1,无通明,范畴 0 ~ 1
latitude: 39.899,
longitude: 116.39742,
width: 30,
height: 30,
// callout: {
// display: "BYCLICK",
// padding: 10,
// borderRadius: 5,
// content: '',
// },
// anchor: {},
iconPath: '../../../static/location.png', // 显示的图标
}, {
id: 2,
title: '2', // String
latitude: 39.90,
longitude: 116.39,
callout: {
color: '#007AFF', // 文本色彩
bgColor: '#563BFF', // 背景色
display: "ALWAYS", // 'BYCLICK': 点击显示; 'ALWAYS': 常显
fontSize: 15,
textAlign: 'left', // 文本对齐形式。有效值: left, right, center
padding: 10, // 文本边缘留白
borderRadius: 5,
content: '腾讯地图',
},
label: {
content: 'Jeskson',
color: '#000000',
fontSize: 12,
borderWidth: 12,
borderColor: '#007AFF',
borderRadius: 5,
padding: 5,
textAlign: 'center',
bgColor: '#563BFF',
},
iconPath: '../../../static/location.png'
}]
预览成果如下:
controls:[{
// 在地图上显示控件,控件不随着地图挪动
id: 1, // 控件 id
iconPath:'../../static/icon.png', // 显示的图标
position:{
// 控件在地图的地位
left: 15,
top: 15,
width: 50,
height: 50
},
}],
地址搜寻
uni-app
只反对gcj02
坐标
uni.getLocation(OBJECT)
中的 object
参数
获取以后的地理位置、速度。在微信小程序中,当用户来到利用后,此接口无奈调用,除非申请后盾继续定位权限;当用户点击“显示在聊天顶部”时,此接口可持续调用。
OBJECT 参数阐明
type
,String
,不用填,默认为wgs84
返回gps
坐标,gcj02
返回国测局坐标,可用于uni.openLocation
的坐标,app
平台高德SDK
仅反对返回gcj02
altitude
,Boolean
,不用填,传入true
会返回高度信息,因为获取高度须要较高精确度,会减慢接口返回速度geocode
,Boolean
,不用填,默认false
,是否解析地址信息success
,Function
,必填,接口调用胜利的回调函数,返回内容详见返回参数阐明fail
,Function
,不用填,接口调用失败的回调函数complete
,Function
,不用填,接口调用完结的回调函数(调用胜利、失败都会执行)
对于 success
返回参数阐明:
latitude
,纬度,浮点数,范畴为-90~90
,正数示意南纬longitude
,经度,浮点数,范畴为-180~180
,正数示意西经speed
,速度,浮点数,单位m/s
accuracy
,地位的精确度altitude
,高度,单位m
verticalAccuracy
,垂直精度,单位m
(Android
无奈获取,返回0
)horizontalAccuracy
,程度精度,单位m
address
,地址信息(仅App
端反对,需配置geocode
为true
)
address
地址信息阐明
country
,String
,国家 如“中国”,没有则返回undefined
province
,String
,省份名称 如“北京市”,没有则返回undefined
city
,String
,城市名称,如“北京市”,没有则返回undefined
district
,String
,区,县名称 如“朝阳区”,没有则返回undefined
street
,String
,街道信息,如“酒仙桥路”,没有则返回undefined
streetNum
,String
,获取街道门牌号信息,如“3 号”,没有则返回undefined
poiName
,String POI
信息,如“电子城.国内电子总部”,没有则返回undefined
postalCode
,String
,邮政编码,如“100016”
,没有则返回undefined
cityCode
,String
,城市代码,如“010”
,没有则返回undefined
uni.chooseLocation(OBJECT)
关上地图抉择地位。
latitude
,String
,不用填,指标地纬度longitude
,String
,不用填,指标地经度keyword
,String
,不用填,搜寻关键字,仅 App 平台反对success
,Function
,必填fail
,Function
,不用填complete
,Function
,不用填
success
返回参数阐明:
name
,地位名称address
,具体地址latitude
,纬度,浮点数,范畴为-90~90
,正数示意南纬,应用gcj02
国测局坐标系。longitude
,经度,浮点数,范畴为-180~180
,正数示意西经,应用gcj02
国测局坐标系。
<font color=#999AAA > 代码如下(示例):
chooseLocation(e) { // 关上地图抉择地位
uni.chooseLocation({
success: res => {console.log('地位名称:' + res.name);
console.log('具体地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
uni.getLocation({
type: 'gcj02',
altitude:true,
geocode:true,
success: function(res) {console.log('以后地位的经度:' + res.longitude);
console.log('以后地位的纬度:' + res.latitude);
}
});
console.log('省:' + res.address.slice(0, res.address.indexOf('省') + 1));
console.log('市:' + res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1));
console.log('区:' + res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1));
this.query.address = res.address;
this.query.latitude = res.latitude;
this.query.longitude = res.longitude;
this.query.province = res.address.slice(0, res.address.indexOf('省') + 1)
this.query.city = res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1)
this.query.district = res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1)
}
});
},
预览成果:
获取左近的动静,点聚合
uni.getNetworkType(OBJECT)
获取网络类型。
uni.createMapContext(mapId,this)
创立并返回 map
上下文 mapContext
对象。在自定义组件下,第二个参数传入组件实例this
,以操作组件内 <map>
组件。
mapContext
–mapContext
通过 mapId
跟一个 <map>
组件绑定,通过它能够操作对应的 <map>
组件。
该对象得办法列表:
getCenterLocation
OBJECT
获取以后地图核心的经纬度,返回的是gcj02
坐标系,能够用于uni.openLocatio
nmoveToLocation
OBJECT
将地图核心挪动到以后定位点,须要配合map
组件的show-location
应用translateMarker
OBJECT
平移marker
,带动画includePoints
OBJECT
缩放视线展现所有经纬度getRegion
OBJECT
获取以后地图的视线范畴getScale
OBJECT
获取以后地图的缩放级别$getAppMap
获取原生地图对象plus.maps.Map
getCenterLocation
的 OBJECT
参数列表
success
Function
不用填,接口调用胜利的回调函数,res = {longitude: "经度", latitude: "纬度"}
moveToLocation
的 OBJECT
参数列表 – 可不用填
translateMarker
的 OBJECT
参数列表
markerId
Number
必填 指定marker
destination
Object
必填 指定marker
挪动到的指标点autoRotate
Boolean
不用填 挪动过程中是否主动旋转marker
rotate
Number
不用填marker
的旋转角度duration
Number
不用填 动画继续时长,默认值1000ms
,平移与旋转别离计算animationEnd
Function
不用填 动画完结回调函数fail
Function
不用填 接口调用失败的回调函数
<font color=#999AAA > 代码如下(示例):
<view id="activeMap">
<view @tap="activeMarker={}">
<view class="page-body map-view" style="z-index: 1;position: relative;">
<view class="page-section page-section-gap map-view">
<map :markers="shops" id="map1" :show-location="true" :latitude="latitude" :longitude="longitude" @regionchange="regionChange"
@markertap="markerTap" @tap="activeMarker={}">
<!-- @markertap 点击标记点时触发,e.detail = {markerId}-->
<!-- @tap 点击地图时触发 -->
<!-- @regionchange 视线发生变化时触发 -->
</map>
<cover-image class="map-image" src="../static/address.png"></cover-image>
</view>
</view>
</view>
</view>
regionChange() { // 挪动地图后从新获取门店
uni.createMapContext('map1', this).getCenterLocation({
success: res => {console.log(res.latitude)
console.log(res.longitude)
this.shopTimeout = setTimeout(_ => {
this.shops = [{
address: "广东省汕头市 xxx 区 xx 小道 1",
distance: 122,
end_time: "1",
id: 2,
latitude: "22.72078500009999",
longitude: "114.36090200009999",
shop: {
iconPath: '/static/logo.png',
id: 3,
latitude: "22.72078500009999",
longitude: "114.36090200009999",
height: 34,
width: 34,
shop: {return: 0}
},
return: 0,
height: 34,
width: 34,
start_time: "1",
store_name: "三星大酒店",
iconPath: '/static/shop.png',
}]
}, 500)
},
fail: res => {
uni.showModal({
content: '获取地位失败',
showCancel: false
})
}
})
},
预览效果图如下:
地图上标注左近的人
<font color=#999AAA > 代码如下(示例):
list: [{
id: 1264640,
user_id: 335187,
place: "Jeskson 市",
text: "dadaqianduan.cn",
latitude: "27.267520",
longitude: "111.727120",
status: "normal",
nickname: "dada",
avatar: "https://image.aishencn.com/2020/10/20/002207441_40845724-user.jpg",
distance: 13419,
}, {
id: 1272720,
user_id: 36950,
place: "dadaqianduan 市",
text: "dadaqianduan.cn",
latitude: "27.257640",
longitude: "111.747910",
deletetime: null,
status: "normal",
nickname: "dadaqianduan",
avatar: "https://image.aishencn.com/2020/04/09/004135379_37869100-user.jpg",
distance: 27070,
}, {
id: 1316740,
user_id: 366172,
place: "dadaqianduan.cn",
text: "dadaqianduan.cn",
images: "https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg",
latitude: "27.257430",
longitude: "111.732960",
status: "normal",
nickname: "dada",
avatar: "https://image.aishencn.com/2020/11/04/182622730_98197351-user.venus/cache/ext/crop/1604518314542_jpg",
distance: 27190,
images_arr: ["https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg"]
}],
预览成果如图:
定位左近门店
<font color=#999AAA > 代码如下(示例):
// 两点间间隔
distance(la1, lo1, la2, lo2) {var La1 = (la1 * Math.PI) / 180.0
var La2 = (la2 * Math.PI) / 180.0
var La3 = La1 - La2
var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
var s =
2 *
Math.asin(
Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) +
Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
)
)
s = s * 6378.137 // 地球半径
s = Math.round(s * 10000) / 10000
return s
},
// 计算最近的间隔
nearDistance(array, centerLatitude, centerLongitude) {let temp = []
for (let i = 0, l = array.length; i < l; i++) {const element = array[i]
let d = this.distance(
element.latitude,
element.longitude,
centerLatitude,
centerLongitude
)
temp.push(d)
}
this.distanceL = Math.min.apply(null, temp)
}
成果如下图:
滑动轨迹
<font color=#999AAA > 代码如下(示例):
<map :polyline="polyline" :scale="scale" id="maps" :markers="markers" :latitude="center.latitude"
:longitude="center.longitude">
</map>
// 播放标记点
playMarkars() {if (this.polyline.length == 0) {
uni.showModal({content: '以后工夫范畴内没有轨迹,无奈播放!',})
this.isPlay = false // 无
this.playIndex = 0 // 第一个
return
}
this.playIndex = Math.min(this.points.length - 1, this.playIndex)
this.markers = [this.formatMarker(this.points[this.playIndex++], 'ALWAYS')]
this.timer = setInterval(_ => {
var i = this.playIndex++
this.nextAdaress(i);
if (i >= this.points.length) {clearInterval(this.timer)
this.isPlay = false
this.playIndex = 0
this.initMarkers()
return
}
this.markers = [this.formatMarker(this.points[i], 'ALWAYS')]
}, 1000)
},
formatMarker(point, display = "BYCLICK") {
let content = ["工夫:" + parseTime(point.create_time),
"静止状态:" + (point.sport == 1 ? '静止' : '静止'),
"地址:" + point.address || ''
]
return {
id: point.id,
iconPath: '/static/dada.png',
width: 35,
height: 35,
latitude: point.latitude,
longitude: point.longitude,
callout: {
display: display,
padding: 10,
borderRadius: 5,
content: content.join("\n")
}
}
},
nextAdaress(index) {
const len = 10;
if (this.isGetAddress) {return}
for (let i = 0; i < len; i++) {if (!this.points[i + index]) {break}
if (this.points[i + index].address === undefined) {
this.isGetAddress = true
this.getAddress(i + index, len * 2, _ => {this.isGetAddress = false});
break
}
}
},
图片成果如下:
vue 接入腾讯地图接口
腾讯(举荐)
https://apis.map.qq.com/ws/location/v1/ip={$ip}&key={$key}
须要申请key
,速度快,有根本信息
首页点击能够进行注册,申请一个获取key
:https://lbs.qq.com?lbs_invite=VJJIFLV
key 治理,创立新密钥,填写相应信息即可
1. 创立地图预览效果图如下:
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key= 申请的 key"></script>
<script type="text/javascript">
function initMap() {var center = new TMap.LatLng(39.984104, 116.307503);
// 初始化地图
var map = new TMap.Map("container", {
rotation: 20,// 设置地图旋转角度
pitch:30, // 设置俯仰角度(0~45)zoom:12,// 设置地图缩放级别
center: center// 设置地图中心点坐标
});
}
</script>
2. 地图加载实现效果图:
<script>
function initMap() {
// 初始化地图
var map = new TMap.Map("container", {center: new TMap.LatLng(39.984104, 116.307503)
});
// 监听地图瓦片加载实现事件
map.on("tilesloaded", function () {document.getElementById("tip").innerHTML = "地图瓦片已加载实现"
})
}
</script>
3. 异步加载地图
<script>
function initMap() {
var map = new TMap.Map("container", {
pitch: 45,
zoom: 12,
center: new TMap.LatLng(39.984104, 116.307503)
});
}
function loadScript() {
// 创立 script 标签,并设置 src 属性增加到 body 中
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/gljs?v=1.exp&key= 申请 key";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
4. 同时加载两个地图效果图如下:
<script>
function initMap() {
// 初始化地图一
var mapOne = new TMap.Map("containerOne", {
pitch:45,
center: new TMap.LatLng(39.984104, 116.307503)
});
// 初始化地图二
var mapTwo = new TMap.Map("containerTwo", {center: new TMap.LatLng(39.984104, 116.307503)
});
}
</script>
5. 获取地图核心成果如下图:
<script>
var centerInfo = document.getElementById("center-info");
var center = new TMap.LatLng(39.984104, 116.307503);// 设置中心点坐标
// 初始化地图
var map = new TMap.Map("container", {center: center});
// 获取地图中心点事件
function getCenter() {var mapCenter = map.getCenter(); // 获取地图中心点坐标
centerInfo.innerHTML = "以后地图核心为:" + mapCenter.getLat().toFixed(6) + "," + mapCenter.getLng().toFixed(6);
}
// 设置地图中心点事件
function setCenter() {map.setCenter(new TMap.LatLng(39.908802,116.397502));// 坐标为天安门
centerInfo.innerHTML = "以后地图核心为: 39.908802,116.397502";
}
</script>
6. 地图平移效果图如下:
<script>
function initMap() {var position = document.getElementById("position");
var txt = document.getElementById("txt");
var center = new TMap.LatLng(39.984104, 116.307503);// 设置中心点坐标
// 初始化地图
var map = new TMap.Map("container", {center: center});
location.innerHTML = map.getCenter().toString();
// 监听地图开始平移
map.on("panstart", function () {txt.innerHTML = "地图开始平移"})
// 监听地图平移
map.on("pan",function(){
txt.innerHTML = "地图正在平移";
position.innerHTML = map.getCenter().toString();// 获取地图中心点
})
// 监听地图平移完结
map.on("panend",function(){txt.innerHTML = "地图完结平移";})
}
</script>
3.vue 接入腾讯地图
<template>
<div>
<div id="map" style="width:500px;height:500px;"></div>
</div>
</template>
<script>
export default {data() {
return {
longitude: "",
latitude: ""
};
},
methods: {init() {
let address = "";
let that = this;
var center = new qq.maps.LatLng(34.754152, 113.667636);
var map = new qq.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13,
disableDefaultUI: true
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
var infoWin = new qq.maps.InfoWindow({map: map});
var geocoder = new qq.maps.Geocoder({complete: function(res) {console.log(res);
address = res.detail.nearPois[0].name;
}
});
qq.maps.event.addListener(map, "click", function(event) {this.longitude = event.latLng.getLat();
this.latitude = event.latLng.getLng();
console.log(event);
let lat = new qq.maps.LatLng(this.longitude, this.latitude);
geocoder.getAddress(lat);
setTimeout(() => {infoWin.open();
infoWin.setContent(
'<div style="text-align:center;white-space:nowrap;">' +
address +
"</div>"
);
infoWin.setPosition(event.latLng);
}, 200);
});
}
},
mounted() {this.init();
}
};
</script>
<style scoped>
</style>
应用前须要在 index.html
里引入 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
才能够应用地图。
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
<template>
<div>
<div id="container" style="width:500px;height:500px;"></div>
</div>
</template>
<script>
export default{data() {
return {
longitude:39.956987, // 经度
latitude:116.235128 // 纬度
}
},
mounted () {this.init();
},
methods:{init() {var myLatlng = new qq.maps.LatLng(39.945687,116.3976968);
var myOptions = {
zoom: 8, // 设置地图缩放级别
center: myLatlng, // 设置中心点款式
mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}
}
}
</script>
创立地图实例
var map=new qq.maps.Map(document.getElement('container'),{
center,// 坐标,即最后显示的地图核心
zoom // 缩放级别,即显示的比例
})
给地图增加事件
qq.maps.event.addListener(map,'click',function(res){// res 即点击后的地位信息})
增加标记
var marker=new qq.maps.Marker({
position, // 标记点的地位,也能够是通过 IP 获取到的坐标
map, // 标记在哪个地图上
animation, // 标记显示时的动画成果
title, // 鼠标悬浮到标记上时的题目
draggable // 是否可拖拽
})
创立信息窗口
var info=new qq.maps.InfoWindow({
map, // 标记在哪个地图上
content // 信息窗口的内容
})
覆盖物
var polyline=new qq.maps.Polyline({
map, // 标记在哪个地图上
path, // 一个坐标数组,折线、多边形就是依附这些坐标数组来成形的
strokeColor, // 折线色彩
strokeDashStyle, // 折线款式
strokeWeight, // 折线宽度
editable, // 折线是否可编辑
clickable // 是否可点击
})
单个标注点
在 mounted
生命周期或者从后盾接口取得信息后调用初始化地图办法
initMap (latitude, longitude, message) {var center = new qq.maps.LatLng(latitude, longitude);
var map = new qq.maps.Map(document.getElementById("container"),
{
center: center,
zoom: 13
}
);
var marker = new qq.maps.Marker({
position: center,
map: map
});
var info = new qq.maps.InfoWindow({map: map});
// 悬浮标记显示信息
qq.maps.event.addListener(marker, 'mouseover', function() {info.open();
info.setContent(`<div style="margin:10px;">${message}</div>`);
info.setPosition(center);
});
qq.maps.event.addListener(marker, 'mouseout', function() {info.close();
});
},
多个标注点
markers: [ ]; // 标记点数组
mounted () {this.initMap(this.markers)
},
initMap (arr) {
// 默认以数组第一项为核心
var center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude);
var map = new qq.maps.Map(document.getElementById("container"),
{
center: center,
zoom: 13
}
);
// 提醒窗
var info = new qq.maps.InfoWindow({map: map});
for (var i = 0; i < arr.length; i++) {var data = arr[i];
var marker = new qq.maps.Marker({position: new qq.maps.LatLng(data.latitude, data.longitude),
map: map
});
marker.id = data.id;
marker.name = data.name;
// 点击事件
qq.maps.event.addListener(marker, 'mouseover', function() {info.open();
// 设置提醒窗内容
info.setContent(`<div><p>${this.name}</p></div>`);
// 提醒窗地位
info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
});
qq.maps.event.addListener(marker, 'mouseout', function() {info.close();
});
}
}
4. 个性化地图款式
为什么要用个性化地图,进步不同场景下地图的展示成果和用户体验。
为什么抉择腾讯位置服务个性化地图:
- 全平台通用
- 开发成本极小
- 个性化款式反对动静更新
- 反对全局配置和分级配置
- 编辑平台 UI 控件全面优化
- 每个元素可配置的属性全副凋谢
- 可能反对自定义的地图元素裁减为 52 种
5. 腾讯地位入门步骤
- 登录腾讯位置服务
- 验证手机 与 邮箱
- 申请开发密钥(
Key
) - 抉择您须要的产品
https://lbs.qq.com/webApi/component/componentGuide/componentMarker
地位展现组件
路线布局组件
地图选点组件
前端定位组件
三. 微信小程序 JavaScript SDK
- 我申请了开发者密钥
key
- 开明
webserviceAPI
服务:控制台 ->key
治理 -> 设置(应用该性能的key
)-> 勾选webserviceAPI
-> 保留
(小程序 SDK
须要用到 webserviceAPI
的局部服务,所以应用该性能的 KEY
须要具备相应的权限)
日调用量: 1 万次 / Key
—- 并发数: 5 次 / key / 秒
。
onLoad() {console.log('页面加载了')
// 实例化 API 外围类
qqmapsdk = new QQMapWX({// key: '申请的 key'});
},
onShow() {console.log('页面显示了')
// 调用接口 dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {console.log(res);
},
fail: (err) => {console.log(err);
},
complete: (cres) => {console.log(cres);
}
})
},
我返回的数据如图:QQMapWX
— 小程序 JavaScriptSDK
外围类 — new QQMapWX(options:Object)
// 引入 SDK 外围类
var QQMapWX = require('xxx/qqmap-wx.js');
// 实例化 API 外围类
var demo = new QQMapWX({key: '开发密钥(key)' // 必填});
地点搜寻:
// 地点搜寻
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', // 搜寻关键词
location: '39.980014,116.313972', // 设置周边搜寻中心点
success: (res) => {var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回后果,放到 mks 数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/location.png", // 图标门路
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {console.log(res);
},
complete: (res) => {console.log(res);
}
});
},
成果如图:
<script>
// 引入 SDK 外围类,js 文件依据本人业务,地位可自行搁置
// var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js');
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {components: {},
data() {
return {
backfill: '',
markers: [],
suggestion: [],}
},
onLoad() {console.log('页面加载了') // 实例化 API 外围类
qqmapsdk = new QQMapWX({ // key: '申请的 key'
key: '本人申请,我的就不放进去了'
});
},
onShow() {console.log('页面显示了') // 调用接口 dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {console.log(res);
},
fail: (err) => {console.log(err);
},
complete: (cres) => {console.log(cres);
}
})
},
onReady() {console.log('页面首次渲染实现了')
},
methods: {getsuggest(e) {console.log(e.detail.value)
qqmapsdk.getSuggestion({
keyword: e.detail.value, // 用户输出的关键词,可设置固定值, 如 keyword:'KFC'
//region:'北京', // 设置城市名,限度关键词所示的地区范畴,非必填参数
success: (res) => {// 搜寻胜利后的回调
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回后果,放到 sug 数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
this.suggestion = sug
},
fail: (error)=> {console.error(error);
},
complete: (res)=> {console.log(res);
}
});
},
backfillBtn(e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.suggestion.length; i++) {if (i == id) {this.backfill = this.suggestion[i].title
}
}
},
// 地点搜寻
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', // 搜寻关键词
location: '39.980014,116.313972', // 设置周边搜寻中心点
success: (res) => {var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回后果,放到 mks 数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/static/location.png", // 图标门路
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {console.log(res);
},
complete: (res) => {console.log(res);
}
});
},
},
onHide() {console.log('页面暗藏了')
},
}
</script>
预览成果如图下:
<script>
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {components: {},
data() {
return {
backfill: '',
markers: [],
poi: {
latitude: 39.984060,
longitude: 16.307520
},
}
},
onLoad() {console.log('页面加载了') // 实例化 API 外围类
qqmapsdk = new QQMapWX({ // key: '申请的 key'
key: ''
});
},
onShow() {console.log('页面显示了')
},
onReady() {console.log('页面首次渲染实现了')
},
methods: {formSubmit(e) {
qqmapsdk.reverseGeocoder({
location: e.detail.value.reverseGeo || '',
// 获取表单传入的地位坐标, 不填默认以后地位, 示例为 string 格局
//get_poi: 1, // 是否返回周边 POI 列表:1. 返回;0 不返回(默认), 非必须参数
success: (res) => {console.log(res);
var res = res.result;
var mks = [];
/**
* 当 get_poi 为 1 时,检索以后地位或者 location 周边 poi 数据并在地图显示,可依据需要是否应用
*
for (var i = 0; i < result.pois.length; i++) {
mks.push({ // 获取返回后果,放到 mks 数组中
title: result.pois[i].title,
id: result.pois[i].id,
latitude: result.pois[i].location.lat,
longitude: result.pois[i].location.lng,
iconPath: './resources/placeholder.png', // 图标门路
width: 20,
height: 20
})
}
*
**/
// 当 get_poi 为 0 时或者为不填默认值时,检索指标地位,按需应用
mks.push({ // 获取返回后果,放到 mks 数组中
title: res.address,
id: 0,
latitude: res.location.lat,
longitude: res.location.lng,
iconPath: '/static/location.png', // 图标门路
width: 20,
height: 20,
callout: { // 在 markers 上展现地址名称,依据需要是否须要
content: res.address,
color: '#000',
display: 'ALWAYS'
}
});
this.markers = mks;
// this.poi = {
// latitude: res.location.lat,
// longitude: res.location.lng
// }
},
fail: (error) => {console.error(error);
},
complete: (res) => {console.log(res);
}
})
}
},
onHide() {console.log('页面暗藏了')
},
}
</script>
geocoder
— 提供由地址形容到所述地位坐标的转换,与逆地址解析 reverseGeocoder()
的过程正好相同。
预览成果如图:
formSubmit(e) {
// 调用地址解析接口
qqmapsdk.geocoder({
// 获取表单传入地址 e.detail.value.geocoder
address: e.detail.value, // 地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街 74 号'
success: (res)=> {// 胜利后的回调
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
// 依据地址解析在地图上标记解析地址地位
this.markers = [{
id: 0,
title: res.title,
latitude: latitude,
longitude: longitude,
iconPath: '/static/location.png',// 图标门路
width: 20,
height: 20,
callout: { // 可依据需要是否展现经纬度
content: latitude + ',' + longitude,
color: '#000',
display: 'ALWAYS'
}
}],
this.poi= { // 依据本人 data 数据设置相应的地图核心坐标变量名称
latitude: Number(latitude),
longitude: Number(longitude),
}
},
fail: (error)=> {console.error(error);
},
complete: (res)=> {console.log(res);
}
})
}
预览效果图如下:
formSubmit(e){
// 调用间隔计算接口
console.log(this.start,'dadaqianduan')
qqmapsdk.calculateDistance({
//mode: 'driving',// 可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking', 可不填
//from 参数不填默认以后地址
// 获取表单提交的经纬度并设置 from 和 to 参数(示例为 string 格局)// from: e.detail.value.start || '', // 若终点有数据则采纳终点坐标,若为空默认以后地址
from: this.start || '',
to: this.end,
// to: e.detail.value.dest, // 起点坐标
success: (res)=> {// 胜利后的回调
console.log(res);
var res = res.result;
var dis = [];
for (var i = 0; i < res.elements.length; i++) {dis.push(res.elements[i].distance); // 将返回数据存入 dis 数组,}
this.distance=dis
},
fail: (error)=> {console.error(error);
},
complete: (res)=> {console.log(res);
}
});
}
},
调用获取城市列表接口,效果图如下:
onShow() {console.log('页面显示了')
// 调用获取城市列表接口
qqmapsdk.getCityList({success: (res) => { // 胜利后的回调
console.log(res);
console.log('省份数据:', res.result[0]); // 打印省份数据
this.a = res.result[0]
console.log('城市数据:', res.result[1]); // 打印城市数据
this.b = res.result[1]
console.log('区县数据:', res.result[2]); // 打印区县数据
this.c = res.result[2]
},
fail: (error) => {console.error(error);
},
complete: (res) => {console.log(res);
}
});
},
获取城市区县,效果图如下:
onShow() {console.log('页面显示了')
// 调用获取城市列表接口
qqmapsdk.getCityList({success: (res) => { // 胜利后的回调
console.log(res);
console.log('省份数据:', res.result[0])
var city = res.result[0];
// 依据对应接口 getCityList 返回数据的 Id 获取区县数据(以北京为例)qqmapsdk.getDistrictByCityId({
// 传入对应省份 ID 取得城市数据,传入城市 ID 取得区县数据, 顺次类推
id: city[0].id, // 对应接口 getCityList 返回数据的 Id,如:北京是 '110000'
success: (res) => { // 胜利后的回调
console.log(res);
console.log('对应城市 ID 下的区县数据(以北京为例):', res.result[0]);
},
fail: (error) => {console.error(error);
},
complete: (res) => {console.log(res);
}
});
},
fail: (error) => {console.error(error);
},
complete: (res) => {console.log(res);
}
});
},
参考地址:https://lbs.qq.com/miniProgra…
腾讯位置服务为微信小程序提供了根底的标点能力、线和圆的绘制接口等地图组件和地位展现、地图选点等地图 API
位置服务能力反对,使得开发者能够自在地实现本人的微信小程序产品。在此基础上,腾讯位置服务微信小程序 JavaScript
SDK
是专为小程序开发者提供的 LBS
数据服务工具包,能够在小程序中调用腾讯位置服务的 POI
检索、关键词输出提醒、地址解析、逆地址解析、行政区划和间隔计算等数据服务,让您的小程序更弱小!
插件市场:https://ext.dcloud.net.cn/plugin?id=3746 能够多下载试试玩,后续更新插件内容。
申请腾讯地图开发者所用到的 key,链接:https://lbs.qq.com?lbs_invite=VJJIFLV
专属邀请码:VJJIFLV
我是 Jeskson(达达前端),感激各位人才的:点赞、珍藏和评论,咱们下期见!
文章继续更新,本文 http://www.dadaqianduan.cn/#/ 曾经收录,欢送 Star。