admin管理员组文章数量:1566356
1.先引入JS
注意:如果是 vue 项目,在 index.html 文件中引入 js 文件。
不是 vue 项目,直接在 html 页面中引入 js 文件。
没有key的话可以去官网申请:https://lbs.qq/
<script charset="utf-8" src="https://map.qq/api/js?v=2.exp&key=你的Key"></script>
2.封装方法
如果不是 vue 项目:
<script>
var geocoder = new qq.maps.Geocoder();
function getLal (address) {
//对指定地址进行解析
geocoder.getLocation(address);
//设置服务请求成功的回调函数
geocoder.setComplete((res) => {
console.log(address + '成功回调数据',res);
});
//若服务请求失败,则运行以下函数
geocoder.setError((err) => {
console.log(address + '地址输入错误',err)
})
}
getLal('广东省佛山市')
//getLal('广东省')
</script>
如果是 vue 项目:
1.抛出封装的方法
export const commonMethods = {
//根据地址获取经纬度
getLal: (address,cb) => {
var geocoder = new qq.maps.Geocoder();
geocoder.getLocation(address);
geocoder.setComplete(function(res) {
cb(res)
});
geocoder.setError(function(err) {
cb(err)
});
}
}
2.vue文件引入并使用
import { commonMethods } from "@/utils/utils";
commonMethods.getLal('广东省佛山市',(res) => {
console.log('res',res)
var mapData = {
lat: res.detail.location.lat,
lng: res.detail.location.lng,
organName: this.organName,
address: this.address,
};
this.goMap(mapData);
})
3.跳页面
直接使用 window.open跳就行了,会根据经纬度自动定位到你查地址的那个点
goMap(option) {
// 打开腾讯地图
let lat = option.lat;
let lng = option.lng;
let organName = option.organName;
let address = option.address;
var mapUrl_tx =
"http://apis.map.qq/uri/v1/marker?marker=coord:" +
lat +
"," +
lng +
";title:" +
organName +
";addr:" +
address +
"&referer=yellowpage";
window.open(mapUrl_tx); //打开新页面
},
版权声明:本文标题:微信H5页面跳转到腾讯地图 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726067668a1054077.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论