示例一：

API地址：http://developer.baidu.com/map/jsdemo.htm#a1_2

<!DOCTYPE html>

php地图导航功能PHP引用百度地图API制造一个地图导航 React

<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:\"大众微软雅黑\"大众;}

</style>

<!--调用百度api -->

<script type=\"大众text/javascript\"大众 src=\公众http://api.map.baidu.com/api?v=2.0&ak=你的密钥\"大众></script>

<title>舆图展示</title>

</head>

<body>

<div id=\"大众allmap\"大众></div>

</body>

</html>

<script type=\"大众text/javascript\公众>

// 百度舆图API功能

var map = new BMap.Map(\"大众allmap\"大众); // 创建Map实例

map.centerAndZoom(\"大众西安\"大众, 5); // 初始化舆图,用城市名设置舆图中央点

map.addControl(new BMap.MapTypeControl()); //添加舆图类型控件

map.setCurrentCity(\公众深圳\公众); // 设置舆图显示的城市 此项是必须设置的

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

var point = new BMap.Point(116.404, 39.915);

var marker = new BMap.Marker(point); // 创建点

map.addOverlay(marker); //添加点

map.removeOverlay(marker); //删除点

// 创建地址解析器实例

var myGeo = new BMap.Geocoder();

//批量解析

var adds = [\"大众长沙\"大众, \公众深圳\"大众, \公众喷鼻香港\公众, \"大众郑州 \公众, \"大众惠州\"大众, \"大众南昌\公众, \"大众赣州\公众, \"大众中山\"大众, \公众阳江\"大众, \公众上海\"大众, \"大众无锡\公众, \"大众南京\"大众];

for (var i = 0; i < adds.length; i++) {

myGeo.getPoint(adds[i], function (point) {

if (point) {

var address = new BMap.Point(point.lng, point.lat);

var marker = new BMap.Marker(address);

map.addOverlay(marker);

var opts = {

width: 120, // 信息窗口宽度

height: 70, // 信息窗口高度

title: \"大众项目信息\公众 // 信息窗口标题

}

var infoWindow = new BMap.InfoWindow(\"大众<a href='#' target='blank'>查看详情</a>\"大众, opts); // 创建信息窗口工具

marker.addEventListener(\公众click\"大众, function () {

map.openInfoWindow(infoWindow,address); //开启信息窗口

});

}

}, \"大众深圳市\公众);

}

getBoundary(\"大众中国\公众);

function getBoundary(sRegion) {

var bdary = new BMap.Boundary();

bdary.get(sRegion, function (rs) { //获取行政区域

var count = rs.boundaries.length; //行政区域的点有多少个

for (var i = 0; i < count; i++) {

var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: \公众#4A7300\"大众, fillColor: \"大众#FFF8DC\公众 }); //建立多边形覆盖物

map.addOverlay(ply); //添加覆盖物

}

});

}

</script>

效果如下：

示例二：

百度舆图API是由JavaScript措辞编写的，在利用之前须要将API引用到页面中： 现在新版本的须要密钥，下面用的是旧版的

<script src=\公众http://api.map.baidu.com/api?v=版本&services=true或者false\"大众 type=\公众text/javascript\"大众></script>

显示广州火车站大略实例：

<!DOCTYPE html>

<html>

<head>

<meta charset=\公众utf-8\公众/>

<title>百度舆图API的利用</title>

<!-- 百度舆图API-->

<script src=\"大众http://api.map.baidu.com/api?v=1.2\"大众 type=\公众text/javascript\"大众></script>

<script type=\"大众text/javascript\"大众>

function initialize() {

//创建舆图实例

var map = new BMap.Map('map');

//创建一个坐标

var point =new BMap.Point(113.264641,23.154905);

//舆图初始化，设置中央点坐标和舆图级别

map.centerAndZoom(point,15);

}

window.onload = initialize;

</script>

</head>

<body>

<!-- 百度舆图舆图容器-->

<div id=\"大众map\公众 style=\"大众width:500px;height:320px\公众></div>

</body>

</html>

舆图上添加控件：

//添加控件

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

MapTypeControl ---------舆图类型控件

CopyrightControl --------版权控件

ScaleControl --------比例尺控件

NavigationControl ------缩放控件

OverviewMapControl ----缩略图控件

创建标注：

var marker = new BMap.Marker(point); // 创建标注

map.addOverlay(marker); // 将标注添加到舆图中

创建信息窗口：

var infoWindow = new BMap.InfoWindow(\"大众I am here\"大众); // 创建信息窗口工具

map.openInfoWindow(infoWindow,point); //开启信息窗口

百度舆图偏移量：

经度校正值： 0.008774687519;

纬度校正值： 0.00374531687912;

如果想要学习视频，互换谈论，请按照下图所示输入私信“申请加入”获取加群链接~~~