百度地图调用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0; font-size: 12px; font-family:"微软雅黑";}
#allmap{height:400px;width:800px;}
#r-result{width:100%; font-size:14px;}
</style>
<!-- 设置地图ak, api key 申请的密钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXX"></script>
<title>百度地图</title>
</head>
<body>
<div id="allmap" ></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
// 定义标注
var map = new BMap.Map("allmap");
var point = new BMap.Point(108.945587,34.168887);
map.centerAndZoom(point,18);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//定义标注图标
function theLocation(){
var city = document.getElementById("cityName").value;
if(city != ""){
map.centerAndZoom(city,18); // 用城市名设置地图中心点,显示比例级别
}
}
//鼠标滚动缩放
map.enableScrollWheelZoom(true);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为:" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
//添加定位到地图
function addGeolocation(){map.addControl(geolocationControl);}
var marker = new BMap.Marker(new BMap.Point(108.945587,34.168887)); // 创建点
map.centerAndZoom(point,18);//初始化地图,设置中心坐标点和地图级数
var marker = new BMap.Marker(point);//创建标注
map.addOverlay(marker);//方法addOverlay()
// 信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "<font size='3' color='#cc5522'>XXX文化传播有限公司</font>" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow('地址:x'x曲西街摩登小镇143号', opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
</script>