The main functions used in this paper are:

1, select the address to send (map selection component)

2. Real-time address static diagram

3, map up, mobile phone view

The location component is mainly the information of the selected location, as follows:

This information is stored in js or database, and is used to call up static images and map apis, mainly latitude and longitude.

Can be used in chat send location function.

In the Demo, I’m going to replace the key with your key

Key Application address: lbs.qq.com/dev/console…

<html> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="viewport" The content = "width = device - width, initial - scale = 1, minimum - scale = 1.0, the maximum - scale = 1.0, user-scalable=no" /> <meta content="telephone=no" name="format-detection" /> <script type="text/javascript" SRC ="js/jquery-1.11.3.min.js"></script> <head> <meta charset=" UTF-8 ">< title></title> </head> <style type="text/ CSS "> #mapPage { display: none; } < / style > < body > < div > < a id = "lookLoc" href = "https://apis.map.qq.com/uri/v1/marker?marker=coord:22.51595, 113.3926; Title: the status of receiving; <img id="imgLoc" <img id="imgLoc" SRC = "https://apis.map.qq.com/ws/staticmap/v2/?center=22.520843533080377, 113.38995007717672 & zoom = 12 & size = 150 * 75 & scale & m = 2 Aptype = roadmap&markers = size: large | color: red | 22.520843533080377, 113.38995007717672 & key = you key "Alt =" location map" Onclick ="lookLoc()" /><br/> <div id="locInfo"></div> </div> <input type="button" value=" send" id="send" />< iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&total=1&key=you key&effect=zoom&referer=rcwwap"></iframe> </body> </html> <script> var hrefStr = "https://apis.map.qq.com/uri/v1/marker?"; var imgSrc = "https://apis.map.qq.com/ws/staticmap/v2/?center="; var imgSrc2 = "&zoom=16&size=150*75&scale=2&maptype=roadmap&markers=size:large|color:red|"; var imgStr3 = "&key=you key"; var pointStr = ""; $(document).ready(function() { var loc; $("#mapPage").hide(); $("#send").click(function() { $('#mapPage').attr('src', $('#mapPage').attr('src')); $("#mapPage").css("display", "inline-block"); })}); window.addEventListener('message', locationPicker, false); Function locationPicker(event) {function locationPicker(event) {loc = event. console.log('locationassa', loc); Console. log(" Register message events "); If (loc && loc.module == 'locationPicker') {// Prevent other applications from Posting information to this page, Check if module is 'locationPicker' console.log(' location', loc); $("#mapPage").hide(); pointStr = loc.latlng.lat + "," + loc.latlng.lng; $("#locInfo").text(pointStr + " " + loc.poiname + " " + loc.poiaddress); $("#lookLoc").attr("href", hrefStr + "marker=coord:" + pointStr + "; title:" + loc.poiname + "; addr:" + loc.poiaddress + "&referer=myapp"); $("#imgLoc").attr("src", imgSrc + pointStr + imgSrc2 + pointStr + imgStr3); Alert (" successful site selection "); } } </script>Copy the code

Pay attention to

1. In the process of site selection, when you drag and drop the map, the address list below will be updated, but it will not default to the first one. You also need to click the address list. Unlike wechat, which will default to the first one in the dragging process, you can click send after dragging. If you want to do the same function as wechat, you need to click the address list after dragging and dropping, and then click Send. Currently, the map component does not support customization, such as drag-and-drop events for maps.

2. Map selection component has location function, when you open the map, the first one will show “my location”.

Object data also displays “my location” if you are sending the location to someone else. Other people see it as “my spot.” After selecting the address, determine if the value of the poiname is equal to “my location”. If so, assign the value of the POiAddress to the poiname.

Author: Dr. Ahlin

Link: blog.csdn.net/Doctor_LY/a…

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.