vue + 高德原生 API实现地图可视化

vue + 高德原生 API

由于项目需求，需要使用地图定位，最终决定使用 vue + 高德原生API；

当前项目环境 vue2.0+；

创建项目时，如果安装 eslint ，建议关闭eslint语法限制；

关闭方法：

在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则；

module: {
	rules: [
		  //...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或者删除
		  {
		    test: /\.vue$/,
		    loader: 'vue-loader',
		    options: vueLoaderConfig
		  },
		  ...
		  }
	]
}

获取高德地图的key

获取地址：高德开放平台 https://lbs.amap.com/

在 index.html 引入

代码粘贴到项目中index.html文件中，并且把代码中“申请的key值”改为在高德开放平台申请的key值；

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值&&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

** 定位：采用浏览器精确定位 **

    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            buttonPosition:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                console.log(result) //解析定位结果
            }else{
                console.log(result) //解析定位错误信息
            }
        });
    });

** 输入提示后查询**

    //输入提示
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", (e)=>{
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  
    });//注册监听，当选中某条记录时会触发

** 点击按钮直接定位**

点击按钮直接实现地位，其实还是使用上面的 AMap.PlaceSearch

       placeSearch.setCity('110106'); //不设置也可以
       
       placeSearch.search('天安门');  //关键字查询查询

** 周边搜索**

当前案例是搜索周边 餐饮服务

    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            type: '餐饮服务', // 兴趣点类别
            pageSize: 30, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
        });
        
        //中心点坐标
        //这一块的中心点坐标可以根据 鼠标点击位置获取
        var cpoint = [116.405467, 39.907761]; 
        
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
            console.log(status,result)
        });
    });

全部代码：vue + 高德原生 Api 实现地图可视化