騰訊地圖api選擇當前地址的附近地點

一天時間作了這個，根據當前地址顯示可選地址，拖動地圖更改可選地址，搜索要有提示庫，點擊一樣自動更改可選地址。不得不說騰訊地圖的API真的感受不太好用，很難找到本身想要的東西，還要不停不停的百度，吐槽完畢。

css內容

用的weui.css

html內容

簡單的html不說了

<div style="height:40%;">
  <div class="searchbar_wrap"></div>
  <div id="tcmap"></div>
</div>

<div class="weui_panel weui_panel_access">
    <div class="weui_panel_hd">附近地點</div>
    <div class="weui_panel_bd" id="address"></div>
</div>
複製代碼

js內容

• 當前地址的座標是從上一個頁面經過url穿過來的
• $getUrlParam是用來獲取url參數的方法
• searchbar是weui裏面渲染搜索的
• sendid能夠忽略，懶得刪了，是爲了返回到上一個頁面的
• encodeURI(encodeURI()) 用來處理url參數中的中文，在接收的頁面用decodeURI()再轉換成原來的中文。

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=place"></script>
<script>
  $('.searchbar_wrap').searchBar({
      cancelText:"取消",
      searchText:'關鍵字'
  });
  $.getUrlParam= function(name){
    var reg= new RegExp("(^|&)"+name +"=([^&]*)(&|$)");
    var r= window.location.search.substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
  }
  var latitude = $.getUrlParam('latitude');
  var longitude = $.getUrlParam('longitude');
  var sendid = $.getUrlParam('id');
  var markersArray = [];
  function init() {
    var center = new qq.maps.LatLng(latitude,longitude);
    var map = new qq.maps.Map(document.getElementById("tcmap"), {
        // 地圖的中心地理座標。
        // center: new qq.maps.LatLng(latitude,longitude)
        center: center,
        zoom: 16
    });
    //實例化自動完成
    var ap = new qq.maps.place.Autocomplete(document.getElementById('weui_search_input'));
    //調用Poi檢索類。用於進行本地檢索、周邊檢索等服務。
    var searchService = new qq.maps.SearchService({
        map : map
    });
    //添加監聽事件
    qq.maps.event.addListener(ap, "confirm", function(res){
        console.log(res);
        searchService.search(res.value);
    });
    // 設置標註
    var marker = new qq.maps.Marker({
        position: center,
        map: map
    });
    markersArray.push(marker);

    // 逆地址解析
    var geocoder = new qq.maps.Geocoder({
        complete:function(result){
            var near = result.detail.nearPois;
            render(near);
        }
    });
    geocoder.getAddress(center);

    // 移動地圖中心座標
    qq.maps.event.addListener(map, 'center_changed', function() {
        deleteOverlays();
        marker2 = new qq.maps.Marker({
            position: new qq.maps.LatLng(map.getCenter().lat,map.getCenter().lng),
            map: map
        });
        markersArray.push(marker2);
        geocoder.getAddress(new qq.maps.LatLng(map.getCenter().lat,map.getCenter().lng));
    });
  }

  // 渲染附近地點
  function render(near){
    $("#address").empty();
    for (var i = 0; i < near.length; i++) {
      $("#address").append('<div class="weui_media_box weui_media_text">'+
          '<h4 class="weui_media_title">'+near[i].name+'</h4>'+
          '<p class="weui_media_desc">'+near[i].address+'</p>'+
      '</div>')
    }
    $(".weui_media_text").click(function(){
      var addtext = $(this).find(".weui_media_desc").html();
        console.log(addtext);
        window.location = encodeURI(encodeURI("/form/create?id="+sendid+"&addtext="+addtext));
    })
  }

  // 刪除覆蓋物
  function deleteOverlays() {
      if (markersArray) {
          for (i in markersArray) {
            if(i>0){
              markersArray[i].setMap(null);
            }
          }
          markersArray.length = 1;
      }
  }
  init();
</script>
複製代碼

看看就好了，最終的效果在一個微信公衆號裏面，這裏就不展現了，以避免有打廣告的嫌疑。