由于项目需求，需要使用地图定位，最终决定使用 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 实现地图可视化
