【HTML】百度地图webAPI使用
2021-02-15 19:18
标签:dev span api open control scroll 百度地图api style function 1、登录百度地图,创建WEB应用,设置白名单、获取该WEB应用的ak 2、在页面引入相应的js和ak 3、效果(CSS不提供): 4、实例化地图map,并给map添加相应的搜索和确定坐标事件 【HTML】百度地图webAPI使用 标签:dev span api open control scroll 百度地图api style function 原文地址:https://www.cnblogs.com/xuzhengzong/p/8427330.htmlscript type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("container"); // 创建Map实例
map.enableScrollWheelZoom(); //鼠标滑动设置地图级别,默认15
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); //默认指向天安门
map.addEventListener("click", function(e){ //地图添加点击事件
$(‘#lat‘).val(e.point.lat);
$(‘#lng‘).val(e.point.lng);
if($(‘#coordinate‘)){
$(‘#coordinate‘).val($(‘#lng‘).val()+‘,‘+$(‘#lat‘).val());
}
map.clearOverlays(); // 清空所有标注
map.addOverlay(new BMap.Marker(e.point));// 将标注添加到地图中
})
//地图搜索,传入参数为一个详细地址的字符串
function localSearch(address){
var options = {
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS) { // 判断状态是否正确
map.clearOverlays();
marker = new BMap.Marker(results.getPoi(0).point);
map.addOverlay(marker); //添加标注
//map.centerAndZoom(results.getPoi(0).point,15);
map.panTo(results.getPoi(0).point)
$("#lat").val(results.getPoi(0).point.lat);
$("#lng").val(results.getPoi(0).point.lng);
if($(‘#coordinate‘)){
$(‘#coordinate‘).val($(‘#lng‘).val()+‘,‘+$(‘#lat‘).val());
}
}
},renderOptions: {map: map, panel: "r-result"}
};
var local = new BMap.LocalSearch(map, options);
local.search(address);
}
//地图坐标显示
function pointSearch(){
map.clearOverlays();
var point2 = new BMap.Point($(‘#lng‘).val(),$(‘#lat‘).val());
var marker2 = new BMap.Marker(point2); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
map.panTo(point2);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "店铺地址" , // 信息窗口标题
enableMessage:false,//设置允许信息窗发送短息
message:""
}
var infoWindow = new BMap.InfoWindow("省份:{$province}
城市:{$city}
地址:{$shopInfo[‘address‘]}", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point2); //开启信息窗口
}
script>
文章标题:【HTML】百度地图webAPI使用
文章链接:http://soscw.com/index.php/essay/55765.html