首页 > 其他分享 >利用百度地图api解析地址的地理坐标

利用百度地图api解析地址的地理坐标

时间:2023-03-01 10:47:51浏览次数:39  
标签:console log script ak api 地理坐标 解析 百度

1、封装一个js文件

// bmpgl.js
export function BMPGL (ak) { // ak为百度地图api申请应用后获得
  return new Promise(function (resolve, reject) {
    window.init = function () {
      // eslint-disable-next-line
        resolve(BMapGL)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

2、在需要的页面引入js文件

import { BMPGL } from '@/assets/js/bmpgl'

 

3、封装为一个方法

    getGeo (location) { // 解析省份地理坐标
      console.log('解析省份地理坐标内部', location)
      return new Promise((resolve, reject) => {
        BMPGL(this.ak).then((BMapGL) => {
          const myGeo = new BMapGL.Geocoder()
          // eslint-disable-next-line no-unused-vars
          const p = null
          myGeo.getPoint(location, p => {
            if (p) {
              console.log('解析成功', p)
              resolve(p)
            } else {
              console.log('解析失败')
            }
          })
        }).catch(err => {
          console.log('errrrr', err)
          reject(err)
        })
      })
    }

 

4、方法的调用

 await that.getGeo('北京').then(res => {
   console.log('解析的地理坐标', res)
 })    

 

标签:console,log,script,ak,api,地理坐标,解析,百度
From: https://www.cnblogs.com/p201821460026/p/17167230.html

相关文章

  • javaapi在线查查询有哪些网站
    java8oracle官网在线api:​​​https://docs.oracle.com/javase/8/docs/api/​​​matools网(感觉这个是映射了oracle官网):​​http://www.matools.com/api/java8​​w3c......
  • 常用API&日期类
    1,常用APIString类型每次操作新的对象,而StringBuilder是在原有的基础基础进行修改,所以如果对于不常修改的变量可以设为String类型,而假如是易修改的数据尽量使用StringBuild......
  • 快学会这个技能-.NET API拦截技法
    大家好,我是沙漠尽头的狼。本文先抛出以下问题,请在文中寻找答案,可在评论区回答:什么是API拦截?一个方法被很多地方调用,怎么在不修改这个方法源码情况下,记录这个方法调用的......
  • vue api 模块自动化 加载
    1.创建一个index。js文件//api模块化自动加载constfiles=require.context('./',true,/\Api.js$/)//eslint-disable-next-lineimport/no-mutable-export......
  • kaufland平台api
    classKauflandapiControllerextendsYbController{public$header,$url,$secretKey,$ClientKey;/***GetDiscussionMailListResponseconstr......
  • openApi 使用
    1、先登录获取token  2、调用标准的费用报销单接口  {"api":"cpbcOpenAPI_importBill","data":["4A44F49F",[{"overAmountDesc":"1111","bosType":"4A44F49F","is......
  • 使用 “apifm-wxapi” 快速开发小程序
    步骤一、安装apifm-wxapi1、npminit初始化项目先你需要检查一下你的小程序项目是否支持npm,判断标准很简单,你看一下你的小程序根目录下有没有“package.json”......
  • scheduler API All In One
    schedulerAPIAllInOneschedulerAPI/专用的调度程序APIhttps://wicg.github.io/scheduling-apis/#dom-windoworworkerglobalscope-schedulerSchedulerAPI:......
  • ChatGPT API 简单使用
    关于ChatGPT和API获取我:请你做一个自我介绍ChatGPT:当然可以!您好,我是ChatGPT,是一款由OpenAI训练的大型语言模型。我可以回答各种各样的问题,包括但不限于自然语言......
  • dingo api passport
    配置阿里源composerconfig-grepo.packagistcomposerhttps://mirrors.aliyun.com/composer/创建项目composercreate-project--prefer-distlaravel/laravel=6.*......