When developing form enhancements for a recent project, we needed to replace manual address input with a map-based location selection interface. After evaluating options, we selected Tencent Maps' Location Picker component for its straightforward integration.

Implementation Approaches

The component offers two integration methods: an embedded iframe version that communicates via postMessage, and a standalone page approach that redirects users to a dedicated map selection interface. We implemented the second option for its cleaner user experience.

The redirect method utilizes URL query parameters for communication. Here's a sample implementation:

<a href="https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://example.com&key=YOUR_API_KEY&referer=myapp">
    <input placeholder="Select location" readonly>
</a>

Key parameters include:

• key: Your Tencent Maps API key
• backurl: The return URL after location selection
• referer: Your application identifier
• search and type: Configuration options for the picker interface

After users select a location, they're redirected to the specified backurl with additional query parameters containing the selected coordinates (latng), address details (addr), city information, and other relevant data.

Parameter Encoding Consideration

A common implementation issue occurs when your return URL already contains query parameters. Consider this scenario:

// Problematic URL construction
const returnUrl = 'https://example.com?param1=value1&param2=value2';
const pickerUrl = `https://apis.map.qq.com/tools/locpicker?backurl=${returnUrl}&key=YOUR_KEY`;

This would result in parameter loss because the & character in your return URL gets interpreted as a separator for the map component's parameters rather than part of your return URL.

The solution involves proper URL encoding:

// Correct implementation
const encodedReturnUrl = encodeURIComponent('https://example.com?param1=value1&param2=value2');
const pickerUrl = `https://apis.map.qq.com/tools/locpicker?backurl=${encodedReturnUrl}&key=YOUR_KEY`;

This ensures all original parameters are preserved when the user returns from the map selection process.

Similar encoding considerations apply to other service integrations, including WeChat authorization flows, where proper parameter encoding prevents data loss during redirects.