前端内网开发 地图选点获取坐标和具体省市区地址 免费api及开发
时间: 2023-06-24 10:07:41 浏览: 171
微信小程序 地图选点 获取用户选择的定位信息 wx.chooseLocation
5星 · 资源好评率100%
您可以使用百度地图API来实现前端内网开发的地图选点获取坐标和具体省市区地址。以下是实现步骤:
1. 注册百度地图开发者账号,创建应用,获取密钥。
2. 在前端页面中引入百度地图API的JavaScript库:
```
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
3. 创建地图容器:
```
<div id="map" style="width: 100%; height: 500px;"></div>
```
4. 初始化地图:
```
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和缩放级别
map.enableScrollWheelZoom(true); // 启用滚轮缩放
```
5. 添加地图控件:
```
var geolocationControl = new BMap.GeolocationControl(); // 定位控件
var navigationControl = new BMap.NavigationControl(); // 缩放平移控件
var overviewMapControl = new BMap.OverviewMapControl(); // 缩略图控件
var scaleControl = new BMap.ScaleControl(); // 比例尺控件
map.addControl(geolocationControl);
map.addControl(navigationControl);
map.addControl(overviewMapControl);
map.addControl(scaleControl);
```
6. 添加地图事件监听:
```
map.addEventListener("click", function(e) {
var point = e.point; // 获取点击的点坐标
var geoc = new BMap.Geocoder(); // 创建地理编码实例
geoc.getLocation(point, function(rs) {
var addComp = rs.addressComponents; // 获取地址信息
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; // 拼接地址信息
console.log(point.lng + ", " + point.lat); // 输出坐标
console.log(address); // 输出地址
});
});
```
以上就是实现前端内网开发的地图选点获取坐标和具体省市区地址的步骤。百度地图API提供了丰富的功能和文档,您可以参考官方文档进行更详细的开发。
阅读全文