微信H5页面跳转到腾讯地图

1.先引入JS

注意：如果是 vue 项目，在 index.html 文件中引入 js 文件。
不是 vue 项目，直接在 html 页面中引入 js 文件。
没有key的话可以去官网申请：https://lbs.qq.com/

<script charset="utf-8" src="https://map.qq.com/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.com/uri/v1/marker?marker=coord:" +
        lat +
        "," +
        lng +
        ";title:" +
        organName +
        ";addr:" +
        address +
        "&referer=yellowpage";
      window.open(mapUrl_tx); //打开新页面
    },