腾讯地图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>

看看就行了，最终的效果在一个微信公众号里面，这里就不展示了，以免有打广告的嫌疑。