index.blade.php 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7. <title>地图</title>
  8. <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
  9. <script type="text/javascript" src="/js/plugins/jquery-2.1.1.min.js"></script>
  10. </head>
  11. <body>
  12. <div id="container" style="width: 100%;height: 500px;"></div>
  13. <div id="btn-area" style="display: none">
  14. <button onClick="geolocation.getLocation(showPosition, console.log(1), options)" style="display: none" id="sss">获取精确定位信息</button>
  15. </div>
  16. <script type="text/JavaScript">
  17. var geolocation = new qq.maps.Geolocation("YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA", "myapp");
  18. var options = {timeout: 8000};
  19. </script>
  20. </body>
  21. <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
  22. <script type="text/javascript">
  23. function showPosition(position) {
  24. window.lat = position.lat;
  25. window.lng = position.lng;
  26. var myLatlng = new qq.maps.LatLng(lat, lng);
  27. var myOptions = {
  28. zoom: 8,
  29. center: myLatlng,
  30. mapTypeId: qq.maps.MapTypeId.ROADMAP
  31. }
  32. var map = new qq.maps.Map(document.getElementById("container"), myOptions);
  33. };
  34. function init() {
  35. $('#sss').click();
  36. }
  37. function loadScript() {
  38. var script = document.createElement("script");
  39. script.type = "text/javascript";
  40. script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";
  41. document.body.appendChild(script);
  42. }
  43. window.onload = loadScript;
  44. </script>
  45. </html>