高德地图地址选址组件

admin

1. <!--高德地图选址组件 start-->
   
2. <div id="maplocation" class="hide">
   
3.         <div class="weui-header bg-green" style="border-bottom: 1px solid #eee;">
   
4.                 <div class="weui-header-left"><a href="javascript:;" onclick="closemapbox();" class="icon icon-109 f-white"></a></div>
   
5.                 <h1 class="weui-header-title">选择位置</h1>
   
6.                 <div class="weui-header-right"><a href="javascript:;" onclick="closemapbox();" class="f-white">关闭</a></div>
   
7.         </div>
   
8.         <div id="container" class="map" tabindex="0"></div>
   
9.     <div id="pickerBox">
   
10.         <input id="pickerInput" placeholder="小区名称/标志性建筑物/道路" value="" />
    
11.         <div id="poiInfo"></div>
    
12.     </div>
    
13.     <div class="f-red f14" style="margin: 10px">
    
14.             <p>1、请在搜索框中输入小区名称、附近标志性建筑物或道路名称后在下拉列表中选取您的小区或服务地址；</p>
    
15.             <p>2、如果输入框下没有出现下拉列表，那么请删减或修改小区名称试试；</p>
    
16.             <p>3、如果地图不显示或者显示错误请开启手机GPS定位刷新页面后重试。</p>
    
17.     </div>
    
18.     <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key={php echo $settings['gdmapkey']}"></script>
    
19.     <!-- UI组件库 1.0 -->
    
20.     <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    
21.     <script type="text/javascript">
    
22.             var map = new AMap.Map('container', {
    
23.                     resizeEnable: true,
    
24.                 zoom: 15
    
25.             });
    
26.             map.plugin('AMap.Geolocation', function() {
    
27.                         var geolocation = new AMap.Geolocation({
    
28.                             // 是否使用高精度定位，默认：true
    
29.                             enableHighAccuracy: true,
    
30.                             // 设置定位超时时间，默认：无穷大
    
31.                             timeout: 5000,
    
32.                             // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    
33.                             buttonOffset: new AMap.Pixel(10, 20),
    
34.                             //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    
35.                             zoomToAccuracy: true,     
    
36.                             //  定位按钮的排放位置,  RB表示右下
    
37.                             buttonPosition: 'RB'
    
38.                         });
    
39.                         map.addControl(geolocation);
    
40.                     geolocation.getCurrentPosition(function(status,result){
    
41.                         if(status == 'complete'){
    
42.                             var params = {
    
43.                                     province: result.addressComponent.province,
    
44.                                     city: result.addressComponent.city,
    
45.                                     district: result.addressComponent.district,
    
46.                                     township: result.addressComponent.township,
    
47.                                     street: result.addressComponent.street,
    
48.                                     streetno: result.addressComponent.streetNumber
    
49.                             }
    
50.                             $("input[name='province']").val(params.province);
    
51.                             $("input[name='city']").val(params.city);
    
52.                             $("input[name='district']").val(params.district);
    
53.                             $("input[name='township']").val(params.township);
    
54.                         }
    
55.                     });
    
56.                 });
    
57.             AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
    
58.                 var poiPicker = new PoiPicker({
    
59.                     city:'auto',
    
60.                     input: 'pickerInput'
    
61.                 });
    
62.                 //初始化poiPicker
    
63.                 poiPickerReady(poiPicker);
    
64.             });
    
65.             function poiPickerReady(poiPicker) {
    
66.                 window.poiPicker = poiPicker;
    
67.                 var marker = new AMap.Marker();
    
68.                 var infoWindow = new AMap.InfoWindow({
    
69.                     offset: new AMap.Pixel(0, -20)
    
70.                 });
    
71.                 //选取了某个POI
    
72.                 poiPicker.on('poiPicked', function(poiResult) {
    
73.                     var source = poiResult.source,
    
74.                     poi = poiResult.item,
    
75.                     info = {
    
76.                         source: source,
    
77.                         id: poi.id,
    
78.                         name: poi.name,
    
79.                         location: poi.location.toString(),
    
80.                         address: poi.address
    
81.                     };
    
82.                     marker.setMap(map);
    
83.                     infoWindow.setMap(map);
    
84.                     marker.setPosition(poi.location);
    
85.                     infoWindow.setPosition(poi.location);
    
86.                     //infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>');
    
87.                     infoWindow.open(map, marker.getPosition());
    
88.                     console.log(info);
    
89.                     $('#latlng').val(info.location);
    
90.                     $('#road').val(info.address);
    
91.                     $('#village').val(info.name);
    
92.                     $('#postaddress').removeClass('hide');
    
93.                     $('#editaddress').removeClass('hide');
    
94.                     $('#maplocation').addClass('hide');
    
95.                     map.setCenter(marker.getPosition());
    
96.                 });
    
97.                 poiPicker.onCityReady(function() {
    
98.                     poiPicker.suggest('小区');
    
99.                 });
    
100.             }
     
101.     </script>
     
102. </div>
     
103. <!--高德地图选址组件 end-->

复制代码