天地图使用定位,点击,标点,飞行,画线,清除画线,标点vue
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
初始化
init() {
this.map = new window.T.Map('mapDiv', {
projection: 'EPSG:4326'
})
this.map.centerAndZoom(new window.T.LngLat(106.59588, 29.57764), this.zoom)
// 注册点击事件
this.map.addEventListener('click', this.mapClick)
// 地理编码
this.geocode = new window.T.Geocoder()
// 输入提示
var config = {
pageCapacity: 10, // 每页显示的数量
onSearchComplete: this.localSearchResult // 接收数据的回调函数
}
// 创建搜索对象
this.localsearch = new window.T.LocalSearch(this.map, config)
this.iptchange()
},
点击获取经纬度并查询地址
mapClick(e) {
//e.lnglat.getLng(), e.lnglat.getLat() 经纬度
this.address.lngLats = [e.lnglat.getLng(), e.lnglat.getLat()]
this.geocode.getLocation(new window.T.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), (result) => {
//地址
this.address= result.formatted_address
})
//标点事件
this.addMarker(e.lnglat.getLng(), e.lnglat.getLat())
},
标点
// 标点
addMarker(getLng, getLat) {
if (this.marker) {
this.map.removeOverLay(this.marker)
}
var icon = new window.T.Icon({
iconUrl: bd,
iconSize: new window.T.Point(30, 30),
iconAnchor: new window.T.Point(10, 56)
})
var point = new window.T.LngLat(getLng, getLat, {
icon: icon
})
this.marker = new window.T.Marker(point) // 创建标注
this.map.addOverLay(this.marker) // 将标注添加到地图中
},
画线
// 画线
Polyline() {
//清除画线
if (this.line) {
this.map.removeOverLay(this.line)
}
var points = []
this.address.lngLats.forEach(item => {
points.push(new window.T.LngLat(item[0], item[1]))
})
this.line = new window.T.Polyline(points)
this.map.addOverLay(this.line)
},
跳转到经纬度所在位置
this.map.panTo(new window.T.LngLat(lg[0] * 1, lg[1] * 1), 15)
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)