function MarkerStyle(InitialAngle,FinalAngle) { var markers = []; map.getLayers().forEach(function (layer) { if (layer instanceof ol.layer.Vector) { var source = layer.getSource(); source.forEachFeature(function (feature) { markers.push(feature); }); } }); var desiredMarker; markers.forEach(function (marker) { var geometry = marker.getGeometry(); var coordinates = geometry.getCoordinates(); var properties = marker.getProperties(); if(properties.id === 'weizhi'){ desiredMarker = marker } }); var stricon = getMarkImage(110); // 标注的icon var a = desiredMarker.get('rotation') console.log(a) var rotationAngle = 0; // 初始旋转角度为0度 // 创建一个动画函数来更新旋转角度 function animateRotation() { if ( InitialAngle > 0){ InitialAngle -= 1; // 每次旋转1度 } else { InitialAngle += 1; } // 设置标注点的旋转角度 desiredMarker.setStyle(new ol.style.Style({ image: new ol.style.Icon({ src: stricon, // 标注点的图标路径 rotation: (InitialAngle * Math.PI) / 180, // 将角度转换为弧度 }), })); // 如果还需要继续旋转,则使用 requestAnimationFrame() 调用动画函数 if (InitialAngle != FinalAngle) { requestAnimationFrame(animateRotation); } } // 启动旋转动画 animateRotation(); }如何接受一个参,让标注点可以接着旋转到指定角度
时间: 2024-01-29 09:04:35 浏览: 24
可以在函数定义时添加一个参数,例如:
```
function MarkerStyle(InitialAngle, FinalAngle) {
// ...
}
```
然后在 `animateRotation()` 函数中,将旋转角度的终止值 `FinalAngle` 作为判断条件,如下所示:
```
if (InitialAngle != FinalAngle) {
requestAnimationFrame(animateRotation);
}
```
这样,当 `InitialAngle` 等于 `FinalAngle` 时,旋转动画就会停止。因此,在调用 `MarkerStyle()` 函数时,可以将指定的角度作为参数传入,例如:
```
MarkerStyle(0, 90); // 将标注点旋转到90度的角度
```
相关问题
检查优化此段代码:Page({ /** * 页面的初始数据 */ data: { //经纬度 latitude: 45.745842, longitude: 127.212255, markers: [{ latitude: 45.745842, longitude: 127.212255, width: 35, height: 50 }] }, onLoad: function() { var that = this; wx.getLocation({ type: 'gcj02', success: function(res) { that.setData({ latitude: res.latitude, longitude: res.longitude, }); } }); }, onSearchInputChange: function(event) { var searchValue = event.detail.value; if (searchValue) { wx.getLocation({ type: 'gcj02', success: function(res) { var latitude = res.latitude; var longitude = res.longitude; var marker = { id: 0, latitude: latitude, longitude: longitude, width: 50, height: 50, }; this.setData({ longitude: longitude, latitude: latitude, markers: [marker] }); } }); } } })
可以将代码进行如下优化:
Page({
/**
* 页面的初始数据
*/
data: {
// 经纬度
latitude: 45.745842,
longitude: 127.212255,
markers: [{
latitude: 45.745842,
longitude: 127.212255,
width: 35,
height: 50
}]
},
onLoad() {
wx.getLocation({
type: 'gcj02',
success: res => {
this.setData({
latitude: res.latitude,
longitude: res.longitude,
});
}
});
},
onSearchInputChange(event) {
const searchValue = event.detail.value;
if (!searchValue) {
return;
}
wx.getLocation({
type: 'gcj02',
success: res => {
const latitude = res.latitude;
const longitude = res.longitude;
const marker = {
id: 0,
latitude,
longitude,
width: 50,
height: 50,
};
this.setData({
longitude,
latitude,
markers: [marker]
});
}
});
}
})
主要优化点如下:
1. 使用箭头函数来替代传统的 function,可以避免 this 指向问题。
2. 减少不必要的 if 嵌套,可以使代码看起来更加简洁。
3. 将重复的代码进行封装,提高代码的复用性。
4. 使用 const 或 let 来替代 var,避免变量声明提升问题。
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"satellite="true" scale="15"> <!--在地图上添加一个搜索框并实现定位功能--> <form class="search-form"> <input type="text" placeholder="请输入位置名称以搜索" bindchange="onSearchInputChange" /> </form> <!-- 添加圆形定位按钮 --> <view class="map-button"> <image class="map-button-image" src="/images/map-button.png" /> </view> </map>Page({ /** * 页面的初始数据 */ data: { //经纬度 latitude: 45.745842, longitude: 127.212255, markers: [{ latitude: 45.745842, longitude: 127.212255, width: 35, height: 50 }] }, onLoad: function() { var that = this; wx.getLocation({ type: 'gcj02', success: function(res) { that.setData({ latitude: res.latitude, longitude: res.longitude, }); } }); }, onSearchInputChange: function(event) { var that = this; var searchValue = event.detail.value; if (searchValue) { wx.getLocation({ type: 'gcj02', success: function(res) { var latitude = res.latitude; var longitude = res.longitude; var marker = { id: 0, latitude: latitude, longitude: longitude, width: 50, height: 50, }; this.setData({ longitude: longitude, latitude: latitude, markers: [marker] }); } }); } } })实现代码中的搜索和定位功能
可以使用腾讯地图的 JavaScript API 实现搜索和定位功能。具体实现步骤如下:
1. 在页面中引入腾讯地图 JavaScript API:
```
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
```
其中,YOUR_KEY 是申请腾讯地图 API 时获取到的密钥。
2. 在页面中添加地图组件,以及搜索框和定位按钮:
```
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
<form class="search-form">
<input type="text" placeholder="请输入位置名称以搜索" bindconfirm="onSearchConfirm" />
</form>
<view class="map-button" bindtap="onLocationTap">
<image class="map-button-image" src="/images/map-button.png" />
</view>
</map>
```
其中,id 属性为地图组件的标识符,longitude 和 latitude 属性为地图的经纬度,markers 属性为地图上的标记点,scale 属性为地图的缩放级别,show-location 属性为是否显示当前位置。
3. 在页面的 onLoad 函数中获取当前位置,并更新地图的经纬度:
```
onLoad: function() {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: 0,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/images/location.png',
width: 20,
height: 20
}]
});
}
});
},
```
其中,markers 属性为一个数组,用于在地图上显示标记点。这里只显示一个当前位置的标记点,使用了一个 location.png 图标。
4. 在页面的 onSearchConfirm 函数中根据关键字搜索地点,并更新地图的经纬度和标记点:
```
onSearchConfirm: function(event) {
var that = this;
var keyword = event.detail.value;
var map = new qq.maps.Map(document.getElementById('map'));
var searchService = new qq.maps.SearchService({
complete: function(results) {
if (results.type === 'no_data') {
wx.showToast({
title: '未找到相关位置',
icon: 'none'
});
} else {
var location = results.detail.location;
that.setData({
latitude: location.lat,
longitude: location.lng,
markers: [{
id: 0,
latitude: location.lat,
longitude: location.lng,
iconPath: '/images/location.png',
width: 20,
height: 20
}]
});
}
},
error: function() {
wx.showToast({
title: '搜索失败,请重试',
icon: 'none'
});
}
});
searchService.search(keyword);
},
```
其中,qq.maps.Map 函数用于创建一个地图对象,qq.maps.SearchService 函数用于创建一个搜索服务对象。complete 回调函数在搜索成功时被调用,error 回调函数在搜索失败时被调用。如果搜索成功,从搜索结果中获取到地点的经纬度,并更新地图的经纬度和标记点。
5. 在页面的 onLocationTap 函数中获取当前位置,并更新地图的经纬度和标记点:
```
onLocationTap: function() {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: 0,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/images/location.png',
width: 20,
height: 20
}]
});
}
});
},
```
这里与 onLoad 函数中的代码类似,只是在点击按钮时触发获取当前位置的操作。
以上就是搜索和定位功能的实现代码。需要注意的是,这里使用的是腾讯地图 JavaScript API,而非微信小程序自带的地图组件。因此需要引入腾讯地图 JavaScript API,并在代码中使用相关的对象和方法。