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,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'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.PlaceSearchplaceSearch.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 实现地图可视化

vue + 高德原生 API实现地图可视化相关推荐

vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
你还在为高德地图找不到门牌号等详细地址而烦恼吗？你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...
前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...

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

vue + 高德原生 API

vue + 高德原生 API实现地图可视化相关推荐

最新文章

热门文章