目次
第 1 章 レンダリング
- Amap は検索関連付けと検索結果タグを提供します。今回のケースで基本的な機能が公開されました。将来的には間違いなく機能を修正します。望む効果を実現したい場合は、基本的に Amap ドキュメントを参照してください。変更するだけです。 (他のツールを使用するのと同じ方法で実行してください)
第 2 章 ソースコード
- コードは次のように記述されます。
<template>
<div>
// 用了蚂蚁金服组件
<a-input id='tipinput' type="text"></a-input>
// 地图容器
<div id="container" ref="amap"></div>
// 该容器是搜索结果容器，分页，但是需要配置
<div id="panel"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
data() {
return {
map: null,
placeSearch: null,
mapModule: null // AMap
}
},
mounted() {
window._AMapSecurityConfig = {
securityJsCode: 'key密钥' // 申请key对应的秘钥 -> 注意了，如果不搭配密钥使用，搜索将没有结果
}
// 初始化地图
this.initAMap()
},
destroyed() {
// 销毁地图
this.map.destroy()
},
methods: {
// 初始化地图函数
initAMap() {
const _this = this
AMapLoader.load({
key: '申请的key', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: []
})
.then((AMap) => {
// 保存AMap实例
_this.mapModule = AMap
const map = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 默认2d地图模式
zoom: 12, // 初始化地图级别
zooms: [5, 30],
// 可以设置初始化当前位置
center: [116.397428, 39.90923],
resizeEnable: true
})
// 添加控件
AMap.plugin(
[
'AMap.ElasticMarker',
'AMap.Scale',
'AMap.ToolBar',
'AMap.HawkEye',
'AMap.MapType',
'AMap.Geolocation',
'AMap.AutoComplete',
'AMap.PlaceSearch'
],
() => {
map.addControl(new AMap.ElasticMarker())
map.addControl(new AMap.Scale())
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.HawkEye())
map.addControl(new AMap.MapType())
map.addControl(new AMap.Geolocation())
}
)
_this.map = map
// 搜索功能
_this.toSearch()
})
.catch((e) => {
console.log(e)
})
},
toSearch() {
const _this = this
// 实例化AutoComplete
const autoOptions = {
// input 为绑定输入提示功能的input的DOM ID,注意这个id要个搜索输入框的id一致
input: 'tipinput'
}
const autoComplete = new _this.mapModule.AutoComplete(autoOptions)
autoComplete.on('select', _this.select)// 注册监听，当选中某条记录时会触发
},
select(e) {
const _this = this
// 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
// { map: _this.map } ==> 这个对象是能配置的 --> 根据官方文档配置即可，需要什么配置什么
const placeSearch = new _this.mapModule.PlaceSearch({
map: _this.map
})
placeSearch.setCity(e.poi.adcode)
placeSearch.search(e.poi.name) // 关键字查询查询
}
}
</script>
<style lang='less' scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 900px;
}
</style>
- 予防：
- アプリケーションキーおよびキー キーと一緒に使用する必要があります
- Map 2.0 は AMap を使用します。オートコンプリート1.x を区別することを忘れないでくださいオートコンプリート
- AMAP コンポーネントはすでに検索イベントを実装できるため、入力ボックス ID を入力するだけで済みます。
- 検索機能にも多くの機能があり、サンプルを基にパラメータを理解することができます (インターフェースドキュメントよりも上記の説明の方が詳しいと思います)。
- インターフェースのドキュメントは次のとおりです。
サンプル ドキュメント:検索データの取得 - POI 検索 - サンプル センター - JS API 2.0 の例 | Amap API
インターフェイス ドキュメント:リファレンス マニュアル - Map JS API 2.0 | Amap API