百度地图 点击地图 获取点击位置的地址

引入百度接口

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c0MkXVrp6UBdOviTjRHUTns6yUheOkTu"></script>

html

<div class="map" id='amap'></div>

css

.map{

width:500px;height:300px;margin-left:167px;

margin-top: 10px;

display: none;

}

js

function map_init(e) {

// 百度地图API功能

let that = this

var map = new BMap.Map("amap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 添加带有定位的导航控件

var navigationControl = new BMap.NavigationControl({

// 靠左上角位置

anchor: BMAP_ANCHOR_TOP_LEFT,

// LARGE类型

type: BMAP_NAVIGATION_CONTROL_LARGE,

// 启用显示定位

enableGeolocation: true

});

map.addControl(navigationControl)

map.enableScrollWheelZoom()

map.enableInertialDragging()

map.enableContinuousZoom()

var geoc = new BMap.Geocoder()

 

function showInfo(e) {

layPoint(e)

geoc.getLocation(e.point, function (rs) {

var addComp = rs.addressComponents;

that.activity_form.address = addComp.province + addComp.city + addComp.district + addComp.street +

addComp.streetNumber

});

}

// 创建地址解析器实例

var myGeo = new BMap.Geocoder();

// 将地址解析结果显示在地图上,并调整地图视野

myGeo.getPoint(e.label, function (point) {

if (point) {

map.centerAndZoom(point, 16);

map.addOverlay(new BMap.Marker(point));

} else {

alert("您选择地址没有解析到结果!");

}

}, e.label);

// 添加挑中的点

function layPoint(e) {

// 清楚点

map.clearOverlays();

// 添加点

var point = new BMap.Point(e.point.lng, e.point.lat);

map.centerAndZoom(point, 15);

var marker = new BMap.Marker(point); // 创建标注

map.addOverlay(marker); // 将标注添加到地图中

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动

}

map.addEventListener("click", showInfo);

}

map_init('北京')

展示效果