高德地图开放平台(js免费引入)

高德地图开放平台官网

简介

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。

JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。

异步加载

异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下我们也建议使用异步方式：

// map.vue
<template>
  <div :id="id" :style="{width:width+'px',height:height+'px',margin:'34px auto'}" class="m-map" />
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    point: {
      type: Array,
      default() {
        return [116.46, 39.92]
      }
    }
  },
  data() {
    return {
      id: `map`,
      // 高德地图开放平台注册可以获得
      key: '8045e357ca32e7c2faaf8967b4b5884f'
    }
  },
  watch: {
    point: function(val, old) {
      console.log('point:')
      // [113.764040, 23.623335]  广州石门国家森林公园经纬度
      console.log(point)
      this.map.setCenter(val)
      this.marker.setPosition(val)
    }
  },
  mounted() {
    this.id = `map${Math.random()
      .toString()
      .slice(4, 6)}`

    window.onmaploaded = () => {
      let map = new window.AMap.Map(this.id, {
        resizeEnable: true,
        zoom: 11,
        center: this.point
      })
      this.map = map
      window.AMap.plugin('AMap.ToolBar', () => {
        let toolbar = new window.AMap.ToolBar()
        map.addControl(toolbar)
        let marker = new window.AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: this.point
        })
        this.marker = marker
        marker.setMap(map)
      })
    }
    const url = `https://webapi.amap.com/maps?v=1.4.10&key=${this.key}&callback=onmaploaded`
    let jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  }
}
</script>

// point为经纬度的数组   [113.764040, 23.623335]  广州石门国家森林公园经纬度
<amap 
	-if="point.length" 
	:width="230" 
	:height="290" 
	:point="point"
	>
</amap>

import Amap from '@/components/public/map'

效果如下:

---

谢谢你阅读到了最后
期待你,点赞、评论、交流