map.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <div class="control-group cf clearfix">
  2. <label class="control-label" for="weixin_account">
  3. </label>
  4. <div class="controls">
  5. <div id="qqmapcontainer" style="width:750px; height:300px; float:left;"></div>
  6. <input type="hidden" name="x_point" id="qqXpoint" value="{$reply.x_point}" />
  7. <input type="hidden" name="y_point" id="qqYpoint" value="{$reply.y_point}" />
  8. </div>
  9. </div>
  10. <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=<?php echo QQ_MAP_KEY; ?>"></script>
  11. <script type="text/javascript">
  12. var qqgeocoder,qqmap,qqmarker = null;
  13. $(document).ready(function(){
  14. <if condition="$qq_x_point_val neq '' and $qq_y_point_val neq ''">
  15. var mapcenter = new qq.maps.LatLng({$qq_y_point_val},{$qq_x_point_val});
  16. <else />
  17. var mapcenter = new qq.maps.LatLng(39.916527,116.397128);
  18. </if>
  19. qqmap = new qq.maps.Map(document.getElementById('qqmapcontainer'),{
  20. center: mapcenter,
  21. zoom: 13
  22. });
  23. qqmarker = new qq.maps.Marker({
  24. map:qqmap,
  25. draggable:true,
  26. position: mapcenter
  27. });
  28. qq.maps.event.addListener(qqmarker, 'dragend', function(event) {
  29. $("#qqXpoint").val(event.latLng.getLng());
  30. $("#qqYpoint").val(event.latLng.getLat());
  31. });
  32. <if condition="$qq_x_point_val eq '' or $qq_y_point_val eq ''">
  33. var citylocation = new qq.maps.CityService({
  34. complete : function(result){
  35. qqmap.setCenter(result.detail.latLng);
  36. qqmarker.setPosition(result.detail.latLng);
  37. $("#qqXpoint").val(result.detail.latLng.getLng());
  38. $("#qqYpoint").val(result.detail.latLng.getLat());
  39. }
  40. });
  41. citylocation.searchLocalCity();
  42. </if>
  43. qqgeocoder = new qq.maps.Geocoder({
  44. complete : function(result){
  45. qqmap.setCenter(result.detail.location);
  46. qqmarker.setPosition(result.detail.location);
  47. $("#qqXpoint").val(result.detail.location.getLng());
  48. $("#qqYpoint").val(result.detail.location.getLat());
  49. }
  50. });
  51. $("#lbs_btn").click(function(){
  52. if($.trim($("#api_address").val()) != ""){
  53. qqgeocoder.getLocation($("#api_address").val());
  54. }
  55. });
  56. });
  57. </script>