vue 中使用高德地图, 地图选点

Easter79
• 阅读 713

####功能简述: 网页版高德地图开发,主要支持地图选点(没做导航),搜索选点.(功能类似微信与好友聊天中的选择位置,发送位置,如下图) vue 中使用高德地图, 地图选点

###第一步:先成为高德地图的开发者(获取高德地图的key);获取key


###第二步:引入高德地图js文件

  <!-- 高德地图 -->
    <script src="https://webapi.amap.com/maps?v=1.4.14&key=你申请到高德地图开发者key&plugin=AMap.Driving"></script>
    <!-- UI组件库 -->(这个看情况引入,不要则不引入)
    <script src="https://my.oschina.net//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

###第三部:po代码

(1) html部分的:

<div class="map-container" v-if="showMapContainer">
            <div class="map-nav">
                <div class="cancel-btn" @click="cancelChooseAdress"> 取消 </div>
                <div class="map-title"> 位置 </div>
                <div class="confirm-btn" @click="confirmAdress"> 确定 </div>
                <div id="pickerBox">
                    <input id="pickerInput" placeholder="输入关键字选取地点" />
                    <div id="poiInfo"></div>
                </div>
            </div>
            <div id="container" style="width:100%;height:8rem;" class="map" tabindex="0"></div>

            <div class="adress">
                <div style="display:none">
                    <div>
                        <div class='title'>选择模式</div>
                        <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
                        </br>
                        <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input>
                    </div>
                    <div>
                        <button id='start'>开始选点</button>
                        <button id='stop'>关闭选点</button>
                    </div>
                </div>
                <div class="adress-info">
                    <div class='title'>选址结果</div>
                    <div class='c'>
                        <span class="adress-info-label">经纬度:</span>
                        <span id='lnglat' v-model="addressInfo.position"></span>
                    </div>
                    <div class='c'>
                        <span class="adress-info-label">地址:</span>
                        <span id='address'></span>
                    </div>
                    <div class='c'>
                        <span class="adress-info-label">最近的路口:</span>
                        <span id='nearestJunction'></span>
                    </div>
                    <div class='c'>
                        <span class="adress-info-label">最近的路:</span>
                        <span id='nearestRoad'></span>
                    </div>
                    <div class='c'>
                        <span class="adress-info-label">最近的POI:</span>
                        <span id='nearestPOI'></span>
                    </div>
                </div>
            </div>
        </div>

(2) ts部分的(有一些变量没有放,大家自己补充哈.注意:::::declare const AMapUI: any; declare const AMap: any;这两句在typescript中必须写,不写功能虽然正常,但是会报语法错误 ):

declare const AMapUI: any;
declare const AMap: any;

getLocation() {
            var self = this
            AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function (PositionPicker: any, PoiPicker: any) {

                var poiPicker = new PoiPicker({
                    input: 'pickerInput' //输入框的id
                });

                var map = new AMap.Map('container', {
                    zoom: 15,  //缩放层级
                    center: self.postionArray //[121.596739, 31.194049],//当前地图中心点
                })

                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: map,
                });

                positionPicker.on('success', function (positionResult: any) {
                    document.getElementById('lnglat')!.innerHTML = positionResult.position;
                    document.getElementById('address')!.innerHTML = positionResult.address;
                    document.getElementById('nearestJunction')!.innerHTML = positionResult.nearestJunction;
                    document.getElementById('nearestRoad')!.innerHTML = positionResult.nearestRoad;
                    document.getElementById('nearestPOI')!.innerHTML = positionResult.nearestPOI;
                    
                    self.addressInfo.address = positionResult.address;
                    self.addressInfo.position = positionResult.position;
                });
                positionPicker.on('fail', function (positionResult: any) {
                    document.getElementById('lnglat')!.innerHTML = ' ';
                    document.getElementById('address')!.innerHTML = ' ';
                    document.getElementById('nearestJunction')!.innerHTML = ' ';
                    document.getElementById('nearestRoad')!.innerHTML = ' ';
                    document.getElementById('nearestPOI')!.innerHTML = ' ';
                    
                    self.addressInfo.address = positionResult.address;
                    self.addressInfo.position = positionResult.position;
                });
                positionPicker.start();
                map.panBy(0, 1);
                
                
                //初始化poiPicker
                poiPickerReady(poiPicker);
                // 搜索框
                function poiPickerReady(poiPicker: any) {
                    (window as any).poiPicker = poiPicker;
                    var marker = new AMap.Marker();
                    var infoWindow = new AMap.InfoWindow({
                        offset: new AMap.Pixel(0, -20)
                    });
                    //选取了某个POI
                    poiPicker.on('poiPicked', function (poiResult: any) {
                        var source = poiResult.source,
                            poi = poiResult.item,
                            info = {
                                source: source,
                                id: poi.id,
                                name: poi.name,
                                location: poi.location.toString(),
                                address: poi.address
                            };
                        infoWindow.setMap(map);
                        marker.setPosition(poi.location);
                        infoWindow.setPosition(poi.location);
                        infoWindow.open(map, marker.getPosition());
                        map.setCenter(marker.getPosition());
                    });
                }
            });
        }

(3)css部分:

.map-container {
        width: 100%;
        overflow: scroll;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 10;
        overflow: hidden;

        .map-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 0.2rem;
            padding-bottom: 0;
            background-color: #EDEDED;
            height: 2.5rem;

            .map-title {
                font-size: 0.4rem;
                height: 0.7rem;
                font-weight: bold;
            }

            .confirm-btn {
                background-color: #57BE69;
                color: #fff;
                padding: 0.1rem 0.2rem;
                border-radius: 4px;
                font-size: 0.377rem;
            }

            .cancel-btn {
                font-size: 0.377rem;
                padding: 0.1rem 0.2rem;
                border-radius: 4px;
            }
        }
    }

###最后在po一张搜索的图 vue 中使用高德地图, 地图选点

####整个复制我也不知道能不能跑起来,有什么问题也随时可以交流.你若是喷我,不好意思,你是小狗.

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
tableau地图源之高德地图
Tableau必知必会之如何导入其它地图源地图分析是我们常用的分析之一,虽然Tableau已经有很不错的地图,但很多人还是希望有更多的选择。那么,在Tableau里可以导入别的地图源吗?答案是肯定的:当然可以。下面我们以高德地图为例,看看如何把高德地图导入Tableau中使用。具体步骤如下:
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
2年前
Android Native 内存泄漏系统化解决方案
导读:C内存泄漏问题的分析、定位一直是Android平台上困扰开发人员的难题。因为地图渲染、导航等核心功能对性能要求很高,高德地图APP中存在大量的C代码。解决这个问题对于产品质量尤为重要和关键,高德技术团队在实践中形成了一套自己的解决方案。分析和定位内存泄漏问题的核心在于分配函数的统计和栈回溯。如果只知道内存分配点不知道调用栈会
Stella981 Stella981
2年前
OpenCV检测轮廓极点(Python C++)
    今天分享一个OpenCV检测轮廓极点实例,原图如下,我们需要检测出地图中最大轮廓的上下左右四个极点,并进行标注显示。!(https://oscimg.oschina.net/oscnet/ae374a72c5404b00b0e976e499eedf36.png)    第一步:阈值处理分割出地图轮廓!(ht
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Android中直接打开高德APP进行导航
1、判断是否安装有高德APP//高德APPprivatePackageManagermPackageManager;privatestaticList<StringmPackageNamesnewArrayList<();privatestaticfinalStringGAODE_PACKAGE_NAME"co
Wesley13 Wesley13
2年前
JAVA项目实战
本节分享高德地图API实现web服务端导航和定位等功能packagecom.example.combat.gaodemapUtils;importcn.hutool.core.io.FileUtil;importcom.alibaba.fastjson.JSON;importcom.alibaba.
Stella981 Stella981
2年前
Google Map 开发(三):Google Map 地点搜索功能
开发国内应用当我们需要使用到地图时,首选肯定是高德地图或者百度地图,这是因为它们的地图功能足够强大,对于开发人员来说,更是因为API封装的完善和简单的调用实现,扩展功能强大。如果要开发全球通用的APP,需要集成地图,我们难免会对需要使用的地图SDK进行一番调研,百度和高德并没有全世界范围的地图数据,在亚洲或许还能使用以下,对于需要全球范围内都要
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k