vue 实现高德地图 api 掩模、定位、天气

vue渲染掩模、定位、天气、

/*
#app.vue中的代码或其他vue文件
#public/index.html需要引入 高德地图jsapi*/
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key">
</script>

/* app.vue */
<template><div id="container"></div>
</template><script>
<template><div class="box"><div id="container"></div><div id="panel"></div></div>
</template>
<script>
export default {name: 'maps',data () {return {map: null,disCountry: null,mask: []}},mounted () {this.getYanmo()this.getLocation()},methods: {// 掩模getYanmo () {AMap.plugin("AMap.DistrictSearch", () => {var opts = {subdistrict: 0,   //返回下一级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息};var district = new AMap.DistrictSearch(opts);district.search('中国', (status, result) => {var bounds = result.districtList[0].boundaries;// console.log('bounds', bounds);this.$nextTick(() => {if (bounds.length > 0) {for (var i = 0; i < bounds.length; i += 1) {this.mask.push([bounds[i]])}}})console.log('this.mask', this.mask);AMap.plugin("AMap.DistrictLayer", () => {this.disCountry = new AMap.DistrictLayer.World({zIndex: 1,rejectMapMask: true})})this.map = new AMap.Map('container', {mask: this.mask,center: [120.16263, 33.348176],viewMode: '3D',labelzIndex: 130,zoom: 3,cursor: 'pointer',layers: [new AMap.TileLayer.RoadNet({zIndex: 7}),this.disCountry,new AMap.TileLayer.Satellite()]});})})},//定位getLocation () {AMap.plugin("AMap.Geolocation", function () {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 2000});geolocation.getCurrentPosition();AMap.event.addListener(geolocation, "complete", onComplete);AMap.event.addListener(geolocation, "error", onError);function onComplete (data) {// data是具体的定位信息  精准定位console.log('定位', data);}function onError (data) {// 定位出错    非精准定位// console.log(data);}});/* 获取天气 */AMap.plugin('AMap.Weather', function () {//创建天气查询实例var weather = new AMap.Weather();//执行实时天气信息查询weather.getLive('南京', function (err, data) {// console.log('err', err);console.log('天气', data);});});/* 公交站点查询 */AMap.plugin(["AMap.StationSearch"], function () {//实例化公交站点查询类var station = new AMap.StationSearch({pageIndex: 1, //页码，默认值为1pageSize: 10, //单页显示结果条数，默认值为20，最大值为50city: '010' //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』});//执行关键字查询station.search('南京南站', function (status, result) {//打印状态信息status和结果信息result//status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误。console.log('公交信息', result);});});/* 查询公交线路 */AMap.plugin(["AMap.LineSearch"], function () {//实例化公交线路查询类var linesearch = new AMap.LineSearch({pageIndex: 1, //页码，默认值为1pageSize: 1, //单页显示结果条数，默认值为20，最大值为50city: "南京", //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』extensions: "all" //是否返回公交线路详细信息，默认值为『base』});//执行公交路线关键字查询linesearch.search('13路', function (status, result) {//打印状态信息status和结果信息resultconsole.log('公交线路', result);});});/* 根据坐标查询地址 */AMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: '010'})var lnglat = [118.856371, 32.005985]geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息console.log('坐标查询的地址', result);}})}),/* 行政区 */AMap.plugin('AMap.DistrictSearch', function () {var districtSearch = new AMap.DistrictSearch({// 关键字对应的行政区级别，country表示国家level: 'country',//  显示下级行政区级数，1表示返回下一级行政区subdistrict: 1})// 搜索所有省/直辖市信息districtSearch.search('中国', function (status, result) {// 查询成功时，result即为对应的行政区信息console.log('行政区', result);})})},}
}
</script>
<style  scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 100vh;background-color: rgb(119, 194, 216);
}

vue 实现高德地图 api 掩模、定位、天气相关推荐

Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
利用高德地图api进行定位
一.精准定位,需要https,需要用户手动同意. 在初次进入时进行定位,定位成功,保存定位所在城市.再次进入不定位,使用上一次的定位. 1.首先引入高德地图api <script type=&q ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Vue 使用高德地图，精确定位ip定位，获取城市、地区位置
1.高德地图开放平台-注册账号并申请Key 1) 首先,注册开发者账号,成为高德开放平台开发者 2)登陆之后,在进入「应用管理」页面「创建新应用」 3)为应用添加 Key,「服务平台」一项请选择「 ...
vue使用高德地图，精确定位ip定位，获取城市、地区位置
1.高德地图准备点进入网址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare (1)注册开发者账号 (2)进入控制台 (3)申请高德 ...
vue引用高德地图实现选择定位，根据经纬度标注功能
引用vue-amap yarn add vue-amap main配置 // 引入vue-amap import VueAMap from 'vue-amap';Vue.use(VueAMap);// ...
js应用高德地图API精确定位到门牌号标注并输出当前地址和经纬度
主要就是两个方法,逆地址解析和地址解析过程,以及Chrome只支持https的定位. <head><meta charset="utf-8"><met ...

vue 实现高德地图 api 掩模、定位、天气

vue渲染掩模、定位、天气、

vue 实现高德地图 api 掩模、定位、天气相关推荐

最新文章

热门文章

vue 实现 高德地图 api 掩模、定位、天气

vue渲染掩模、定位、天气、

vue 实现 高德地图 api 掩模、定位、天气相关推荐

最新文章

热门文章

vue 实现高德地图 api 掩模、定位、天气

vue 实现高德地图 api 掩模、定位、天气相关推荐