效果图
需要在初始化这个页面引入腾讯js的外部链接 我这里用的是V2版本 还有V1版本 每个版本的js语句写法有区别 要注意一下 后面的key 是要去腾讯官方文档申请的填上去就好了
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=youkey"></script>
* html部分
<el-form-item
:label="$t('table.store.address')"
prop="address"
>
<div style="display: flex;margin-bottom: 50px;">
<el-input
style="width:350px;margin-right:50px"
type=""
v-model="store.address"
placeholder="请输入门店地址"
/>
<el-button
size="mini"
type="primary"
v-model="store.address"
@click="codeAddress"
>确定</el-button>
</div>
<div
id="contmap"
style="width:100%;max-width:600px;height:300px;overflow: hidden;"
></div>
</el-form-item>
* js部分
var geocoder, map = [];
export default {
data() {
return {
store:{
longitude:'',
latitude:''，
address:''
},
};
},
computed: {
this.init();//初始化方法
},
methods: {
init() {
var that = this;
var map = new qq.maps.Map(document.getElementById("contmap"), {
center: new qq.maps.LatLng(39.916527, 116.397128),//默认北京天安门
zoom: 17
});
//要先检查document.getElementById("contmap")有没有获取到，如果还没出现效果要检查初始化，要先等页面渲染完成才能获取到id节点
//添加监听事件
//地址和经纬度之间进行转换服务
geocoder = new qq.maps.Geocoder();
geocoder.setComplete(function(result) {
that.store.longitude = result.detail.location.lat;//返回的经度
that.store.latitude = result.detail.location.lng;//返回的纬度
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
//点击Marker会弹出反查结果
qq.maps.event.addListener(marker, "click", function() {
alert("坐标地址为： " + result.detail.location);
});
});
//若服务请求失败，则运行以下函数
geocoder.setError(function() {
alert("出错了，请输入正确的地址！！！");
});
},
codeAddress() {
//对指定地址进行解析
if(this.store.address){
geocoder.getLocation(this.store.address);
}
},
},
},
