7.1、uni-app 集成-位置展示组件

位置展示组件

位置展示组件，可以在地图上展示一个或多个位置点。数据来源支持三种方式：通过URL传递数据、地图检索数据和自有定制数据。 可以展示每个位置点的名称、地址等详细信息，也可查看该位置点的街景信息或发起到该位置的路线规划。

https://lbs.qq.com/webApi/component/componentGuide/componentMarker

需求：在H5实现位置展示功能

使用：腾讯地图的开放位置展示组件

步骤：

1、官方文档有详细介绍

https://lbs.qq.com/webApi/component/componentGuide/componentMarker

2、个人操作步骤：

申请你的key

官方地址：https://lbs.qq.com/guides/startup.html

在index.html 设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

通过webview嵌入组件，只支持新页面，不支持弹框形式

<web-view src="https://apis.map.qq.com/tools/poimarker?type=0&marker=&key=yourkey&referer=myapp"></web-view>

监听点击位置信息的返回值

// #ifdef H5
window.addEventListener('message', event=> {
  // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') {
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        console.log('location', loc);
    }
}, false);
// #endif