百度地图api新手尝试，个性化定制，查询定位
2017-07-02 10:22
267 查看
刚开始学js的百度地图api，尝试了一下，把自己的第一个新手例子贴出来
一、首先得申请一个AK
二、官方有许多的demo，可以熟悉下
<!DOCTYPE html>
<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:90%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
<title>个性化地图设置页</title>
</head>
<body>http://write.blog.csdn.net/postedit/74091808
<div id="allmap"></div>
<!--<p>底图样式可通过<a href='http://developer.baidu.com/map/custom/' target="_blank">个性化在线编辑器</a>编辑获取</p>
-->
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />http://write.blog.csdn.net/postedit/74091808
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map('allmap');
//map.centerAndZoom(new BMap.Point(116.404, 39.915）14); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("kunming"); // 设置地图显示的城市 此项是必须设置的
var point = new BMap.Point(102.746056,25.082944);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.disable3DBuilding();
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
//定位函数
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
//map.centerAndZoom(point, 15);
}
}
//个性化在线编辑器地址：http://developer.baidu.com/map/custom/
var styleJson = [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#021019"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#147a92"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#0b3d51"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -70
}
},
{
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#857f7f"
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#022338"
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#062032"
}
},
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#1e1c1c"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"color": "#022338"
}
}
]
map.setMapStyle({styleJson:styleJson});
</script>
一、首先得申请一个AK
二、官方有许多的demo，可以熟悉下
<!DOCTYPE html>
<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:90%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
<title>个性化地图设置页</title>
</head>
<body>http://write.blog.csdn.net/postedit/74091808
<div id="allmap"></div>
<!--<p>底图样式可通过<a href='http://developer.baidu.com/map/custom/' target="_blank">个性化在线编辑器</a>编辑获取</p>
-->
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />http://write.blog.csdn.net/postedit/74091808
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map('allmap');
//map.centerAndZoom(new BMap.Point(116.404, 39.915）14); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("kunming"); // 设置地图显示的城市 此项是必须设置的
var point = new BMap.Point(102.746056,25.082944);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.disable3DBuilding();
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
//定位函数
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
//map.centerAndZoom(point, 15);
}
}
//个性化在线编辑器地址：http://developer.baidu.com/map/custom/
var styleJson = [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#021019"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#147a92"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#0b3d51"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -70
}
},
{
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#857f7f"
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#022338"
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#062032"
}
},
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#1e1c1c"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"color": "#022338"
}
}
]
map.setMapStyle({styleJson:styleJson});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图API之定位当前和公交查询
- arcgis api for flex开发Query查询定位与中心定位查询功能 弹出定制提示框
- 百度地图API之定位当前和公交查询
- 百度地图API之定位当前和公交查询
- 本市天气(百度定位与车联网之天气查询)
- 百度地图API的IP定位城市和浏览器定位（转）
- 淘宝新手——店铺定位
- js调用百度地图api实现定位
- 关于个性化主页定制分析
- 转：Java学习路线图，专为新手定制的Java学习计划建议
- ios百度地图api定位不成功原因
- html5 geolocation / 百度地图api Geolocation 定位当前城市信息
- 9、find查询结果可点击定位
- Hibernate中Criteria查询简单例子新手上路第一案例
- 定制chart的DataTips个性化数据显示。
- Silverlight+WCF 新手实例 象棋 棋子定位与象棋类(四)
- MySQL定位慢查询以及索引优化
- 定制个性化屏保
- 用XML定制实现数据查询列表和数据分析及图表
- 当您尝试从 64 位 SQL Server 客户端上运行分布式的查询到链接的 32 位 SQL Server 时，您可能会收到一条错误消息