amap_amap地图 - CSDN
精华内容
参与话题
  • 通过vue-amap在vue项目中使用高德地图

    千次阅读 热门讨论 2020-03-20 11:09:23
    有些项目我们需要用到地图相关的能力,当我们在vue项目中需要使用高德地图的时候,vue-amap是个比较好的选择,vue-amap是一套基于Vue 2.0和高德地图的地图组件,它帮你封装了一遍,相对直接使用高德地图,它使用起来...

    有些项目我们需要用到地图相关的能力,当我们在vue项目中需要使用高德地图的时候,vue-amap是个比较好的选择,vue-amap是一套基于Vue 2.0和高德地图的地图组件,它帮你封装了一遍,相对直接使用高德地图,它使用起来更加简单。用起来难免会遇到一些坑,在此记录一下:

    1.使用的时候有时候会报 TypeError: v.w.uh is not a constructor ,然后地图就显示不出来,刷新又好了。这是由于地图实例是异步加载的当使用地图的页面开始加载地图的时候地图还没完成初始化而获取不到地图实例造成的。

     
    解决办法:不在main.js中初始化而在使用地图的页面中初始化地图,并且要在该页面初始化之前。

    <script>
    import VueAMap from 'vue-amap';
    
    VueAMap.initAMapApiLoader({
      key: '....',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });
    
      export default {
       ...
      }
    
    </script>

    2.在一个页面中使用了两次相同的地图,但只显示了一个地图出来,另一个无法显示。

    那很有可能是因为你的组件vid是同一个,我们在使用时传入不同的vid值就可以了

    <el-amap :vid="vid" :center="mapCenter" :zoom="12" class="amap-demo">
       <el-amap-marker
           v-for="(marker, index) in markers"
           :key="index"
            :position="marker"
       ></el-amap-marker>
     </el-amap>

    3.搜索组件 不限定城市,可以搜索全国

    searchOption: {
       city: '全国',
       citylimit: true
     },
    
    //或
    searchOption: {
      city: '深圳', //某个城市
      citylimit: false
    }

    4.AMap.Geocoder地理编码与逆地理编码类,用于地址描述与坐标之间的转换,即实现通过地址名称获取经纬度或通过经纬度获取地址信息。具体看文档

    //使用方法:在初始化地图的时候的 plugins选项加上 AMap.Geocoder
    
    VueAMap.initAMapApiLoader({
      key: 'xxx',
      plugin: [xxxxx, 'AMap.Geocoder'],
      v: '1.4.4'
    });
    
    //模版上使用 以搜索组件为例
    
    <el-amap :vid="vid" :center="mapCenter" :zoom="12" class="amap-demo" :events="events">
       <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker"
       ></el-amap-marker>
    </el-amap>
    
    //data中定义事件处理程序
     data() {
       return {
         events: {
              click: e => { 
                //获取经纬度
                let arr = [e.lnglat.lng, e.lnglat.lat];
                let geocoder = new AMap.Geocoder({
                  radius: 1000,
                  extensions: 'all'
                })
                geocoder.getAddress(arr, function(status, result) {
                  if (status === 'complete' && result.info === 'OK') {
                    //result字段就是根据经纬度解析后的地址信息
                  }
                })
              }
            }
          };
        },
    
    //如果需要通过地址名称来解析经纬度,使用geocoder.getLocation方法即可

    5.AMap.Autocomplete is not a construct; AMap.Geocoder is not a construct报错;

    //在index.html引入 
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.4&key=xxx&plugin=AMap.Geocoder&plugin=AMap.Autocomplete"></script>

     

    展开全文
  • Amap:高德地图使用

    2019-03-20 18:16:04
    1.申请密匙 <script src="https://webapi.amap.com/maps?v=1.3&key=您的值 &plugin=AMap.Autocomplete,AMap.Walking,AMap....AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.Cit...

    1.申请密匙

    <script src="https://webapi.amap.com/maps?v=1.3&key=您的值
    &plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,
    AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch"
    

    2.定义页面位置

    <div id="mapContainer" style="width: 100%; height: 100%;position: absolute"></div>
    

    3.初始化地图

    $(document).ready(function () {
     map = new AMap.Map("mapContainer", {
            view: new AMap.View2D({//创建地图二维视口
                zoom: 17, //设置地图缩放级别
                rotation: 0
                //设置地图旋转角度
            }),
            lang: "zh_cn"//设置地图语言类型,默认:中文简体
        });//创建地图实例
    
        //在地图中添加ToolBar插件
        map.plugin(["AMap.ToolBar"], function () {
            toolBar = new AMap.ToolBar();
            map.addControl(toolBar);
        });
    });
    

    4.标记点

    function markerLatlng(lng,lat) {
        marker = new AMap.Marker({
            map: map,
            position: [lng, lat],
            // icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,//是否自动旋转。  // 广泛用于自动调节车辆行驶方向。
            angle:-90,//点标记的旋转角度
        });
    }
    

    5.描绘轨迹

    function polylineGps() {
        // 使用clearMap方法删除所有覆盖物
        map.clearMap();
        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });
        map.setFitView();
    }
    注释:
    lineArr = [];//经纬度数组
    $.each(data, function (i, val) {
        var line = [val.lng,val.lat];
        lineArr.push(line);
    });
    
    展开全文
  • 使用vue-amap

    千次阅读 2019-05-06 19:04:44
    (图一) 页面预览 :当前位置(红色 图标处) (图二)页面预览: 文字设置 + 弹框设置 (图三) 搜索插件 + toolBar 插件 (图四) 时间轴插件 &lt;template&...amap-page-container&...el-amap-search-box c...

    在这里插入图片描述
    (图一) 页面预览 :当前位置(红色 图标处)
    在这里插入图片描述
    (图二)页面预览: 文字设置 + 弹框设置

    在这里插入图片描述

    (图三) 搜索插件 + toolBar 插件

    在这里插入图片描述

    (图四) 时间轴插件

    <template>
        <div class="amap-page-container">
          <!-- 搜索框 -->
          <el-amap-search-box class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult">
          </el-amap-search-box>
          <el-amap
            ref="map"
            vid="amapDemo"
            :center="center"
            :map-manager="amapManager"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo">
            <!-- 在地图上标记点 -->
            <el-amap-marker
              v-for="(marker,index) in markers"
              :key="index"
              :position="marker" >
            </el-amap-marker>
            <!-- 坐标点 -->
            <el-amap-marker vid="amapDemo" :position="center"></el-amap-marker>
            <el-amap-info-window
              :position="currentWindow.position"
              :content="currentWindow.content"
              :visible="currentWindow.visible"
              :events="currentWindow.events">
            </el-amap-info-window>
            <!-- 放置图片 -->
            <el-amap-ground-image v-for="(groundimage,index) in groundimages"
              :url="groundimage.url"
              :key="index"
              :bounds="groundimage.bounds"
              :events="groundimage.events">
            </el-amap-ground-image>
            <!-- 文字 -->
             <el-amap-text v-for="(text,index) in texts"
              :text="text.text"
              :key="index"
              :offset="text.offset"
              :position="text.position"
              :events="text.events">
             </el-amap-text>
              <el-amap-text v-for="(text,index) in texts2"
              :text="text.text"
              :key="index"
              :offset="text.offset"
              :position="text.position"
              :events="text.events">
             </el-amap-text>
              <el-amap-text v-for="(text,index) in texts3"
              :text="text.text"
              :key="index"
              :offset="text.offset"
              :position="text.position"
              :events="text.events">
             </el-amap-text>
          </el-amap>
          <!-- 点击地图的按钮 -->
          <div class="toolbar">
            <button @click="getMap()">获取地图信息</button>
            <button @click="switchWindow(0)">展示第一个位置</button>
            <button @click="switchWindow(1)">展示第二个位置</button>
          </div>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    
    let amapManager = new VueAMap.AMapManager()
    export default {
      name: 'Gaode',
      created () {
        VueAMap.initAMapApiLoader({
          key: '你的开发者key',
          plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
            'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
          uiVersion: '1.0.11' // 版本号
        })
      },
      mounted () {
        this.currentWindow = this.windows[1]// 初始化窗口信息
      },
      data: function () {
        let me = this
        me.city = me.city || '上海'
        return {
          zoom: 12,
          center: [121.59996, 31.197646], // 中心位置
          makerConf: {
            position: [121.59996, 31.197646],
            content: ''
          },
          amapManager,
          events: {
            init: (o) => {
              // 将当前位置标记为A
              AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
                const marker = new SimpleMarker({
                  iconLabel: 'A',
                  iconStyle: 'red',
                  map: o,
                  position: o.getCenter()
                })
              })
              console.log('当前位置的坐标', o.getCenter())
              console.log('方法', this.$refs.map.$$getInstance())
              o.getCity(result => {
                console.log(result)
              })
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              console.log(e)
              this.center = [e.lnglat.lng, e.lnglat.lat]// 点击选择新地址为中心点
              const msg = {
                key: '3df604a614d7f0e325f79bb25cdee15c',
                location: this.center.join()
              }
              // 获取当前地址
              console.log(this, 'this')
              this.$$.ajax({
                url: 'https://restapi.amap.com/v3/geocode/regeo',
                data: msg,
                success: data => {
                  console.log(data)
                  let d = data.regeocode
                  if (d) {
                    this.address = d.formatted_address// 点击选择新地址并获取地址的名称
                  }
                }
              })
            }
          },
          markers: [
            [121.49996, 31.297646],
            [121.40018, 31.197622],
            [121.49991, 31.207649]
          ],
          searchOption: {
            city: '上海',
            citylimit: true
          },
          mapCenter: [121.40996, 31.197646],
          // ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
          plugin: ['ToolBar', {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init (o) {
                console.log(o)
              }
            }
          }, {
            pName: 'Scale',
            events: {
              init (instance) {
                console.log(instance)
              }
            }
          }, {
            pName: 'OverView',
            events: {
              init (instance) {
                console.log(instance)
              }
            }
          }],
          windows: [ // 窗口信息框
            {
              position: [121.69996, 31.237646],
              content: `<img style="width:50px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543494665847&di=152e6f241b64580684a1c048ec9acd7e&imgtype=0&src=http%3A%2F%2Fp0.so.qhmsg.com%2Ft017668631465b251d5.gif"><p style="color:red">Hi!  马优晨,我在这里呢 !</p>`,
              visible: true,
              events: {
                close () {
                  console.log('关闭窗口一!')
                }
              }
            }, {
              position: [121.5875285, 31.21515044],
              content: '<img style="width:50px;" src="https://b305.photo.store.qq.com/psb?/V12aHQSq1CQ6SF/jfM4Tyeelt4v09alIPSOBkDqUCRgwqCHQKMs5iV4x3A!/b/dDEBAAAAAAAA&bo=wAMABQAAAAARB*Y!&rf=viewer_4"><p style="color:red">我在国际博览中心!</p>',
              visible: true,
              events: {
                close () {
                  console.log('关闭窗口二!')
                }
              }
            }
          ],
          // 放置图片
          groundimages: [
            {
              url: 'https://imedl.sogoucdn.com/cache/skins/uploadImage/2018/11/12/15420362056827_former.gif',
              bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
              events: {
                click () {
                  alert('click groundimage')
                }
              }
            }
          ],
          // 放置文字
          texts: [
            {
              position: [121.5273285, 31.27515044],
              text: `<img style="width:50px;" src="http://imgsa.baidu.com/exp/w=500/sign=ce843cf58282b9013dadc333438ca97e/10dfa9ec8a13632763a8d5e1998fa0ec09fac79e.jpg"><p>探索宝藏的第一个线索!</p>`,
              offset: [0, 0],
              events: {
                click: () => {
                  alert('click text')
                }
              }
            }
          ],
          // 放置文字
          texts2: [
            {
              position: [121.6873285, 31.19515044],
              text: '<img style="width:50px;" src="http://cdn.duitang.com/uploads/item/201501/10/20150110172950_aenAB.thumb.700_0.gif"><p>探索宝藏的第二个线索!</p>',
              offset: [0, 0],
              events: {
                click: () => {
                  alert('click text')
                }
              }
            }
          ],
          // 放置文字
          texts3: [
            {
              position: [121.6873285, 31.29515044],
              text: '<img style="width:50px;" src="http://b-ssl.duitang.com/uploads/item/201710/05/20171005143631_5yZeJ.gif"><p>探索宝藏的第三个线索!</p>',
              offset: [0, 0],
              events: {
                click: () => {
                  alert('click text')
                }
              }
            }
          ],
          slotWindow: {
            position: [121.5163285, 31.21515044]
          },
          // 当前窗口
          currentWindow: {
            position: [0, 0],
            content: '',
            events: {},
            visible: false
          },
          // 个人定义的地址
          address: ''
        }
      },
      methods: {
        getMap () {
          console.log(amapManager._componentMap)
          console.log(amapManager._map)
        },
        // 切换信息窗口
        switchWindow (tab) {
          this.currentWindow.visible = false
          this.$nextTick(() => {
            this.currentWindow = this.windows[tab]
            this.currentWindow.visible = true
          })
        },
        // 在地图上添加标记的点
        addMarker: function () {
          let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
          let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
          this.markers.push([lng, lat])
        },
        // 搜索框输入
        onSearchResult (pois) {
          console.log(pois, '123456789')
          let me = this
          let latSum = 0
          let lngSum = 0
          if (pois.length > 0) {
            var poi = pois[0]
            let lng = poi['lng']
            let lat = poi['lat']
            me.center = [lng, lat]
            me.makerConf.position = [lng, lat]
            me.list = pois
            pois.forEach(poi => {
              let {lng, lat} = poi
              lngSum += lng
              latSum += lat
              this.markers.push([poi.lng, poi.lat])
            })
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            }
            this.mapCenter = [center.lng, center.lat]
          }
        }
      }
    }
    </script>
    
    <style scoped>
        .amap-demo {
          height: 1200px;
        }
        .search-box {
          position: absolute;
          top: 25px;
          left: 70px;
        }
        .amap-page-container {
          position: relative;
        }
        .toolbar button {
          background: #42b983;
          border: 0;
          color: white;
          padding: 8px;
          margin: 0 5px;
          border-radius: 3px;
          cursor: pointer;
          margin-top:10px;
        }
    </style>
    
    
    展开全文
  • AMap(创建基础地图)

    2020-01-10 11:14:32
    实现代码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...meta name="viewport" content="initial-scal...

    实现代码

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <title>AMap创建地图</title>
        <style>
            html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}
        </style>
    </head>
    <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script>
        var map = new AMap.Map('container', {
            /* 涉及到的布尔类型的属性
            animateEnable:地图平移过程中是否使用动画(默认为true)
            resizeEnable:是否监控地图容器尺寸变化(默认为false)
            isHotspot:是否开启地图热点和标注的hover效果(PC端默认为true,移动端默认为false) 
            rotateEnable:地图是否可旋转(3D视图默认为true,2D视图默认为false)
            dragEnable:地图是否可通过鼠标拖拽平移(默认为true)
            zoomEnable:地图是否可缩放(默认为true)
            doubleClickZoom:地图是否可通过双击鼠标放大地图(默认为true)
            keyboardEnable:地图是否可通过键盘控制(默认为true)
            jogEnable:地图是否使用缓动效果(默认为true)
            scrollWheel:地图是否可通过鼠标滚轮缩放浏览(默认为true)
            touchZoom:地图在移动终端上是否可通过多点触控缩放浏览地图(默认为true)
            showBuildingBlock: 地图显示3D楼块效果,移动端也可使用(默认为true) 【注】实测结果,语言类型为中文时才生效
            pitchEnable: 地图能否调节俯仰角度(3D视图默认为true,2D视图下无效)
            buildingAnimation: 楼块出现和消失的时候是否显示动画过程(3D视图有效,PC端默认为true,手机端默认为false) */
           
            // 地图默认的缩放级别,zooms属性可以用数组来规定缩放范围,PC端默认为[3,18],取值范围[3-18];移动端默认为[3,19],取值范围[3-19]
            zoom: 13,
            // 中心点经纬度坐标(默认为所在市区)
            center: [121.48612, 31.24166],
            // 使用3D视图(默认为2D)
            viewMode:'3D',
            // 地图俯仰角度(默认为0),取值范围为[0,83],2D地图下无效
            pitch:30,
            // 地图语言类型(默认为中文简体),可取值:'zh_cn'(中文简体),'en'(英文),zh_en中英文双语
            lang: 'zh_cn'          
        });
    </script>
    
    展开全文
  • 一、组成 使用高德地图 JS API 创建的地图通常由这几部分组成: 地图容器(Container)   即在准备阶段所创建的指定了id的div对象,这个div将作为承载所有图层、点标记、矢量图形、控件的容器。...
  • vue使用vue-amap

    2020-09-18 10:39:27
    vue-amap是一套基于Vue 2.0和高德地图的地图组件。 安装: cnpm install -S vue-amap 在main.js配置 ... plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
  • 这个问题说的是AMap.Map不是一个构造函数。原因就有于有一部分代码没有执行完毕。这是因为amap js里面有一部分是异步加载的,或者是我们在js中手动加载amap js导致的。amap js提供了一个callback回调,把创建地图的...
  • 项目简介前往项目首页 ...vue-amap ...vue-amap是基于Vue 2.0和高德地图的地图组件。...npm install -S vue-amap ...引入vue-amap ...import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.ini
  • var map = {}; map["a"] = 1; map["b"] = 2; console.log(Object.keys(map)); //[ 'a', 'b' ] console.log(map); //{ a: 1, b: 2 } delete map["a"]; console.log(map); ...
  • hive mapjoin使用

    万次阅读 2011-08-18 22:15:58
    今天遇到一个hive的问题,如下hive sql: select f.a,f.b from A t join B f on ( f.a=t.a and f.ftime=20110802)  该语句中B表有30亿行记录,A表只有100行记录,而且B表中数
  • shell中map的使用和遍历

    万次阅读 2015-01-20 16:55:04
    declare -A map=() 定义时初始化map declare -A map=(["100"]="1" ["200"]="2")输出所有key echo ${!map[@]}输出所有value echo ${map[@]}添加值map["300"]="3"输出key对应的值 echo ${map["100"]}遍历map ...
  • 遍历Map的方法, 我总结了5种, CoreJava中给出的是第一种使用forEach+lambda表达式, 我认为这种方法应该是最好的, 但是只能在Java8之后的版本使用;...aMap.forEach( (k,v)-&amp;amp;gt;{System.out.println...
  • vue 使用 vue-amap 生成高德地图

    万次阅读 2020-05-28 16:04:25
    首先说一下,什么是vue-amap, vue-amap 是 基于 Vue 2.x 与高德的地图组件,数据状态与地图状态单向绑定,开发者无需关心地图的具体操作 vue-amap 官网 ...
  • VUE——vue-amap简单使用

    万次阅读 热门讨论 2018-06-26 16:06:34
    一、 down一个vue webpack的模板vue init webpack vueamap根据提示完成模板下载,此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称模板下载后 安装依赖cnpm install依赖安装完成后 执行开发...
  • 在高德地图使用: amap is not defined

    万次阅读 2017-01-20 14:59:00
    amap is not defined 后来将 地图api的js 与JQuery的 调换下位置就好了  normal blue_night light fresh dark var map = new AMap.Map('conta
  • 示例代码package main import ( ... mainMapA := map[string]map[string]string{} subMapA := map[string]string{"A_Key_1": "A_SubValue_1", "A_Key_2": "...
  • 在main.js中initAMapApiLoader中写入:AMap.Geocoder,注意 官方文档中有提示: 所以插件中使用的依然是AMap,与导入名无关 不然会报错,Geocoder无法使用。 定位文档 照着文档写就行 注意在main.js中注...
  • Groovy集合(map

    万次阅读 2016-10-20 22:23:51
    声明mapMap的规范和上一篇博客提到的list类似,helist一样,Map保证可以通过下标来获取或者设置值,不同的是map可以使用任何类型作为下标操作符的参数,而list仅仅支持整数,list知道list中元素的顺序,而map一般不...
  • Map与JSON之间转换

    万次阅读 2017-05-16 23:03:26
    //Map转换成JSONMap map = new HashMap(); map.put("a","aaa"); map.put("b","bbb"); map.put("c","ccc"); String json=JSON.toJSONString(map); System.out.println(json);//输出{"a":"aaa","b":"bbb","c":...
  • 下面的代码报错TypeError: data.map is not a function let nameList = data.map(item => item.name); 原因1:data不是数组 解决方法:将data转换为数组 let data = Array.from(data); ...
1 2 3 4 5 ... 20
收藏数 1,254,453
精华内容 501,781
关键字:

amap