700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 百度坐标拾取html 百度地图API获取地址拾取坐标代码

百度坐标拾取html 百度地图API获取地址拾取坐标代码

时间:2023-01-08 15:11:58

相关推荐

百度坐标拾取html 百度地图API获取地址拾取坐标代码

特效描述:百度地图 API获取地址 拾取坐标。js百度地图API调用输入地址获取位置,点击地图拾取坐标效果演示代码。

代码结构

1. 引入JS

2. HTML代码

地址:

经度:

纬度:

提交

// 在指定容器创建地图实例并设置最大最小缩放级别

var map = new BMap.Map("allmap", {

minZoom: 5,

maxZoom: 19

});

// 初始化地图,设置中心点和显示级别

map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);

// 开启鼠标滚轮缩放功能,仅对PC上有效

map.enableScrollWheelZoom(true);

// 将控件(平移缩放控件)添加到地图上

map.addControl(new BMap.NavigationControl());

// 为地图增加点击事件,为input赋值

map.addEventListener("click", function(e) {

document.getElementById('lat').value = e.point.lat;

document.getElementById('lng').value = e.point.lng;

});

// 创建位置检索、周边检索和范围检索

var local = new BMap.LocalSearch(map, {

renderOptions: {

map: map

}

});

// 发起检索

function theLocation() {

var city = document.getElementById("cityName").value;

if (city != "") {

local.search(city);

}

};

// 弹出经纬度

function submit() {

var lat = document.getElementById('lat');

var lng = document.getElementById('lng');

alert("经度:" + lng.value + "\n" + "纬度:" + lat.value);

};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。