準(zhǔn)備工作
1. 先進(jìn)入高德開發(fā)平臺(tái)注冊(cè)登錄
2.進(jìn)入地圖 js Api 按照步驟申請(qǐng)key
3 使用npm安裝依賴包 npm i @amap/amap-jsapi-loader --save
4. 高德api 都有說(shuō)明 下面看下我實(shí)現(xiàn)的功能和代碼文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-522667.html
彈窗地圖
1. 初始化地圖加載地圖將自動(dòng)定位到您所在城市并顯示,點(diǎn)擊地圖實(shí)現(xiàn)了打點(diǎn)獲取經(jīng)緯度和詳情地址。
2.輸入提示
使用了輸入提示插件–在地圖 js api 里服務(wù)模塊里。
3.彈窗組件的全部代碼文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-522667.html
<template>
<div class="app-container">
<el-dialog
title="打點(diǎn)"
:append-to-body="true"
:visible.sync="isShow"
width="940px"
top="15px"
:close-on-click-modal="false"
:before-close="beforeClose"
:class="{textAlign:'center'}"
>
<div class="flex-ar mb15">
<span>經(jīng)度: {
{
form.lng }}</span><span> 緯度 {
{
form.lat }}</span><span> 地址 {
{
form.address }}</span>
</div>
<div id="container">
</div>
<div class="flex-bt" style="width: 400px;position: absolute;top:125px;left: 50px">
<el-select v-model="address" clearable placeholder="請(qǐng)輸入關(guān)鍵詞" style="width: 400px;"
:remote-method="remoteMethod"
filterable
remote
@change="currentSelect"
class="one-text"
:loading="loading"
>
到了這里,關(guān)于高德地圖的簡(jiǎn)單使用:點(diǎn)擊標(biāo)記獲取經(jīng)緯度和詳細(xì)地址的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!