vue 使用高德地图点击标记点以及经纬度转地理位置
1、在index.html这种引入高德地图<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=your key"></script>2、在webpack.base.conf.js 代码最后面引入externals: {'AMap': 'AMap...
·
1、在index.html这种引入高德地图
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=your key"></script>
2、在webpack.base.conf.js 代码最后面引入
externals: {
'AMap': 'AMap',
}
3、在vue文件中使用
<template>
<div id="my_container"></div>
</template>
<script>
import AMap from 'AMap'
export default {
name: "company_manage",
data () {
return {
ruleForm: {
name: '',
phone: '',
addr: '',
long: '',
lat: '',
start_work_time: '',
end_work_time: '',
},
}
},
mounted:function () {
this.init()
},
methods: {
init() {
var map = new AMap.Map('my_container',{
resizeEnable: true,
zoom: 18,
})
AMap.plugin('AMap.Geolocation',function(){ //异步加载插件
var geolocation = new AMap.Geolocation()
map.addControl(geolocation)
})
var geocoder,marker;
function regeocoder(lnglatXY,that) {
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
var address = result.regeocode.formattedAddress;
that.ruleForm.addr = address
}
});
if(!marker){
marker = new AMap.Marker();
map.add(marker);
}
marker.setPosition(lnglatXY);
})
}
var that = this
map.on('click', function(e) {
var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];
regeocoder(lnglatXY,that)
that.ruleForm.long = e.lnglat.getLng()
that.ruleForm.lat = e.lnglat.getLat()
});
},
},
}
</script>
<style scoped>
#my_container{
margin-left: 110px;
height: 300px;
width: calc(100% - 110px);
}
</style>
更多推荐
已为社区贡献27条内容
所有评论(0)