小程序根据地图点位实现用户位置到点位的连线代码
时间: 2023-05-25 07:03:40 浏览: 165
微信小程序——打开地图选择位置信息完整功能实现代码(定位,可移动选点,可搜索,腾讯地图API)
4星 · 用户满意度95%
小程序可以使用腾讯地图SDK来实现用户位置到点位的连线,步骤如下:
1. 引入腾讯地图SDK的JS文件和CSS文件
```
<!-- 引入JS文件 -->
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://map.qq.com/api/css/common.css" />
<link rel="stylesheet" href="https://map.qq.com/api/css/v1/tools.marker.css" />
```
2. 创建地图对象,并设置地图中心点和缩放级别
```
// 创建地图对象
var map = new qq.maps.Map(document.getElementById('map'), {
center: new qq.maps.LatLng(39.916527, 116.397128), // 设置地图中心点
zoom: 15 // 设置地图缩放级别
});
```
3. 创建用户位置和点位的标注对象,并添加到地图上
```
// 创建用户位置标注对象
var userMarker = new qq.maps.Marker({
map: map, // 设置标注所在的地图对象
position: new qq.maps.LatLng(39.915, 116.404), // 设置标注位置
icon: new qq.maps.MarkerImage(
'https://map.qq.com/api/js/images/markers.png', // 标注图标图片地址
new qq.maps.Size(20, 29), // 图标尺寸
new qq.maps.Point(0, 0), // 图标原点位置
new qq.maps.Point(10, 25), // 要显示部分的原点位置
new qq.maps.Size(20, 29) // 要显示的尺寸
)
});
// 创建点位标注对象
var pointMarker = new qq.maps.Marker({
map: map, // 设置标注所在的地图对象
position: new qq.maps.LatLng(39.914, 116.397), // 设置标注位置
icon: new qq.maps.MarkerImage(
'https://map.qq.com/api/js/images/markers.png', // 标注图标图片地址
new qq.maps.Size(20, 29), // 图标尺寸
new qq.maps.Point(0, 30), // 图标原点位置
new qq.maps.Point(10, 25), // 要显示部分的原点位置
new qq.maps.Size(20, 29) // 要显示的尺寸
)
});
```
4. 创建用户位置到点位的连线对象,并添加到地图上
```
// 创建连线对象
var line = new qq.maps.Polyline({
path: [userMarker.getPosition(), pointMarker.getPosition()], // 连线的起点和终点坐标
strokeColor: '#FF0000', // 线的颜色
strokeWeight: 3 // 线的宽度
});
// 添加连线到地图上
line.setMap(map);
```
完成上述步骤后,就可实现小程序地图中用户位置到点位的连线了。
阅读全文