腾讯地图开发

一、 开发环境

react全家桶（react，react-router，redux）

二、功能

定位、省市地图切换、打点、周边搜索

腾讯地图

三、开发

1、加载腾讯地图——利用script标签特性

loadMapScript = () => {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        resolve(window.qqMap);
      };
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "http://map.qq.com/api/js?v=2.exp&key=XXX&callback=init";
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

init() {
    /*eslint-disable no-undef*/
    // 地图中心位置
    var myLatlng = new qq.maps.LatLng(40.22077, 116.23128);
    var myOptions = {
      zoom: 8,
      center: myLatlng
    };
    var qqMap = new qq.maps.Map(this.refs.mapcontainer, myOptions);
  }

2、省市联动

 // 根据城市搜索地图
  searchMapWithCity(city) {
    let map = this.state.qqMap;
    //调用地址解析类
    let geocoder = new qq.maps.Geocoder({
      complete: function(result) {
        map.setCenter(result.detail.location);
      }
    });
    geocoder.getLocation(city);
  }

3、打点

// 腾讯地图地址解析
  searchMapLat(value) {
    let map = this.state.qqMap;
    let _this = this;
    // 地址和经纬度之间进行转换服务
    let geocoder = new qq.maps.Geocoder();
    geocoder.getLocation(value);
    this.clearOverlays(this.state.markers); //清除已有打点
    geocoder.setComplete(function(result) {
      console.log(result.detail.location);
      map.setCenter(result.detail.location);
      map.setZoom(20);
      let marker = new qq.maps.Marker({
        map: map,
        position: result.detail.location
      });

      let markers = [];
      markers.push(marker);
      _this.setState(
        {
          mapInfo: result.detail,
          markers: markers
        },
        () => {
          _this.searchMapNearBy(1, "交通");
        }
      );
    });
    geocoder.setError(function() {
      alert("请输入正确的地址！！！");
    });
  }

4、周边搜索

// 地图周边搜索
  searchMapNearBy(city, value) {
    //设置Poi检索服务，用于本地检索、周边检索
    var searchService = new qq.maps.SearchService({
      pageIndex: 1,
      pageCapacity: 5,
      autoExtend: false,
      complete: function(results) {
        let pois = results.detail.pois;
        console.log(posi)
      },
      //若服务请求失败，则运行以下函数
      error: function() {
        Message.error("周边搜索失败，请重新搜索");
      }
    });
    let myLatlng = _this.state.mapInfo.location;
    searchService.searchNearBy(value, myLatlng, 2000); //根据中心点坐标、半径和关键字进行周边检索。
  }