高德地图定位,搜索及小图标,计算拖动距离

原创 xurui123 教程 html、vue 88阅读 26 天前 举报

以下方法使用根据具体情况而定,只写了方法,图片等自行添加
//初始化设置全局map
this.map = new AMap.Map('dispatch-map', {//绘制地图
resizeEnable: true,
zoom: 13
});
/标记物的加载方法/
positionPick(lng,lat){//标记物 ,添加高德搜索样式
var _this = this;
//搜索后重绘地图
this.map = new AMap.Map('dispatch-map', {
resizeEnable: true,
zoom: 13,
center: [lng,lat]
});
AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {//拖动定位图标
var positionPicker = new PositionPicker({
position: [lng, lat],
mode: 'dragMap',//设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
iconStyle: {//自定义外观
url: _this.type==4?require("../images/map_icon.png"):require("../images/location.png"),//图片地址
size: _this.type==4?[34, 37]:[25, 50], //要显示的点大小,将缩放图片
ancher: [12.5, 50],//锚点的位置,即被size缩放之后,图片的什么位置作为选中的位置
},
map: _this.map
});
positionPicker.on('success', function (positionResult) {
_this.mapData(positionResult);
});
positionPicker.start();
});
};
============================================================

mapSearch(){//高德地图自身搜索
var keywords = ‘输入关键字’,_this = this;
AMap.plugin('AMap.PlaceSearch', function(){
var autoOptions = {
city: '全国'
}
var placeSearch = new AMap.PlaceSearch(autoOptions);
placeSearch.search(keywords, function(status, result) {
// 搜索成功时,result即是对应的匹配数据
_this.mapResult = result.poiList.pois;
})
});
};

======================================================
computeDis(lng,lat){//计算地图拖动距离方法 userData.state.locationsLng当前定位
var _this = this;
var m1 = new AMap.Marker({
map: _this.map,
draggable:true,
content:'<div class="map_mark"></div>',
position:new AMap.LngLat(userData.state.locationsLng, userData.state.locationsLat)
});
var m2 = new AMap.Marker({
map: _this.map,
draggable:true,
content:'<div class="map_mark"></div>',
position:new AMap.LngLat(lng, lat)
});
var p1 = m1.getPosition();
var p2 = m2.getPosition();
var distances = Math.round(p1.distance(p2));
var path = [p1,p2];
//拖动距离小于1公里时不发生数据处理
if(distances==0||distances>=1000){
_this.param.lng = lng;
_this.param.lat = lat;
_this.netshow(_this.param);//调用ajax接口
}
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复