目次
ジオコーディング
必要
クリックされたポイントを特定のアドレスに解析します。
技術的なポイント
公式 Web サイトのアドレス: JavaScript API - クイック スタート | Baidu Map API SDK
開発ドキュメント: Baidu Map JSAPI 3.0 クラス リファレンス
成し遂げる
ステップ 1: パブリックの Index.html に導入します。
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>ステップ 2: コンポーネントで使用する
<template>
<div>
<div id="map"></div>
<p>{
{ address }}</p>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
point: null,
address: ''
};
},
mounted() {
let that = this
this.map = new BMap.Map("map");
this.point = new BMap.Point(116.404, 39.915)
this.map.centerAndZoom(this.point, 17);
this.map.enableScrollWheelZoom();
this.map.addEventListener("click", function(e){
// 地址解析
let geoc = new BMap.Geocoder();
geoc.getLocation(e.point, function(rs) {
let addr = rs.addressComponents;
that.address = addr.province + addr.city + addr.district + addr.street + addr.streetNumber; // 地址：省市区街道门牌号
})
},
}
</script>
<style lang="less">
#map {
width: 300px;
height: 300px;
}
</style>解析する
geoc.getLocation()
逆ジオコーディング
必要
アドレスを入力した後、検索ボタンをクリックしてポイントに解析します。
技術的なポイント
公式 Web サイトのアドレス: JavaScript API - クイック スタート | Baidu Map API SDK
開発ドキュメント: Baidu Map JSAPI 3.0 クラス リファレンス
成し遂げる
ステップ 1: パブリックの Index.html に導入します。
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>ステップ 2: コンポーネントで使用する
<template>
<div>
<!-- 搜索框 -->
<div style="display:flex; align-items: center;">
<el-input v-model="keyword" style="width: 210px; margin-right: 15px"></el-input>
<el-button type="primary" @click="search()">搜索</el-button>
</div>
<!-- 地图 -->
<div id="map"></div>
<!-- 经纬度 -->
<p>{
{ latlng }}</p>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
point: null,
keyword: '',
latlng: ''
};
},
mounted() {
this.map = new BMap.Map("map");
this.point = new BMap.Point(116.404, 39.915)
this.map.centerAndZoom(this.point, 17);
this.map.enableScrollWheelZoom();
},
methods: {
search() {
let that = this
if(this.keyword) {
let geoc = new BMap.Geocoder();
geoc.getPoint(this.keyword, function(rs) {
that.latlng = 'lat:' + rs.lat + 'lng:' + rs.lng
});
}
},
}
}
</script>
<style lang="less">
#map {
width: 300px;
height: 300px;
}
</style>解析する
geoc.getPoint()