对于在网站或者网页之内插入百度地图插件, 可能很多编程技术人员都知道如何来做, 但是做起来所花费的时间都比较长, 那么下面跟大家分享一下如何快速调用百度地图 API, 一件生成百度地图的方法, 这种方法适用于任何的编程语言, 所以有兴趣的编程开发者可以保存一下
body 之间源代码如下:
- <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>;
- <div id="map" class="map_cont" style="width:600px;height:400px"></div>
- <script type="text/javascript">
- // 创建和初始化地图函数:
- function initMap() {
- createMap();// 创建地图
- setMapEvent();// 设置地图事件
- addMapControl();// 向地图添加控件
- addMarker();// 向地图中添加 marker
- }
- // 创建地图函数:
- function createMap() {
- var map = new BMap.Map("map");// 在百度地图容器中创建一个地图
- var point = new BMap.Point(113.610508, 34.766151);// 定义一个中心点坐标
- map.centerAndZoom(point, 18);// 设定地图的中心点和坐标并将地图显示在地图容器中
- window.map = map;// 将 map 变量存储在全局
- }
- // 地图事件设置函数:
- function setMapEvent() {
- map.enableDragging();// 启用地图拖拽事件, 默认启用 (可不写)
- map.enableScrollWheelZoom();// 启用地图滚轮放大缩小
- map.enableDoubleClickZoom();// 启用鼠标双击放大, 默认启用 (可不写)
- map.enableKeyboard();// 启用键盘上下左右键移动地图
- }
- // 地图控件添加函数:
- function addMapControl() {
- // 向地图中添加缩放控件
- var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
- map.addControl(ctrl_nav);
- // 向地图中添加缩略图控件
- var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
- map.addControl(ctrl_ove);
- // 向地图中添加比例尺控件
- var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
- map.addControl(ctrl_sca);
- }
- // 标注点数组
- var markerArr = [{
- title: "什么什么网络科技有限公司",
- content: "地址: 郑州市中原区虎踞北路 10-2 号牛顿文创园 5 楼 503 室 < br/> 电话: 025-85615899",
- point: "113.610508|34.766151",
- // point: "118.762938|32.069151",
- isOpen: 0,
- icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 }
- }
- ];
- // 创建 marker
- function addMarker() {
- for (var i = 0; i <markerArr.length; i++) {
- var json = markerArr[i];
- var p0 = json.point.split("|")[0];
- var p1 = json.point.split("|")[1];
- var point = new BMap.Point(p0, p1);
- var iconImg = createIcon(json.icon);
- var marker = new BMap.Marker(point, { icon: iconImg });
- var iw = createInfoWindow(i);
- var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
- marker.setLabel(label);
- map.addOverlay(marker);
- label.setStyle({
- borderColor: "#808080",
- color: "#333",
- cursor: "pointer"
- });
- (function () {
- var index = i;
- var _iw = createInfoWindow(i);
- var _marker = marker;
- _marker.addEventListener("click", function () {
- this.openInfoWindow(_iw);
- });
- _iw.addEventListener("open", function () {
- _marker.getLabel().hide();
- })
- _iw.addEventListener("close", function () {
- _marker.getLabel().show();
- })
- label.addEventListener("click", function () {
- _marker.openInfoWindow(_iw);
- })
- if (!!json.isOpen) {
- label.hide();
- _marker.openInfoWindow(_iw);
- }
- })()
- }
- }
- // 创建 InfoWindow
- function createInfoWindow(i) {
- var json = markerArr[i];
- var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.jpg", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
- var iw = new BMap.InfoWindow("<b class=iw_poi_title title=" + json.title + ">" + json.title + "</b><div class=iw_poi_content>" + json.content + "</div>");
- return iw;
- }
- // 创建一个 Icon
- function createIcon(json) {
- }
- initMap();// 创建和初始化地图
- </script>
相信尝试过之后, 各位编程技术人员已经看到效果了, 如果有什么好的想法, 可以在下方评论区留言, 我们互相共同进步
来源: http://www.bubuko.com/infodetail-2548455.html