在线地图开发

最新推荐文章于 2024-08-12 02:49:50 发布

Hellowongwong

最新推荐文章于 2024-08-12 02:49:50 发布

阅读量115

点赞数

文章标签： php 嵌入式 javascript ViewUI

原文链接：http://www.cnblogs.com/littlemeng/p/5952438.html

版权

最近需要做一些在线地图的应用，于是去看了百度的在线地图API，发现还不错。

先看看对应js的api。

首先需要申请一个apikey，然后在页面的head里加入：

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

之后加入显示地图的div，id="allmap"，之后在html标签后增加创建具体地图的js：

 1 <script type="text/javascript">
 2     // 百度地图API功能
 3     var map = new BMap.Map("allmap");
 4     map.enableScrollWheelZoom();
 5     map.centerAndZoom("北京天安门",16);
 6     map.addEventListener("load",function(){
 7         //alert("地图加载完毕");
 8         var marker = new BMap.Marker(map.getCenter());
 9         map.addOverlay(marker); 
10         marker.show();
11         
12         var opts = {
13           position : map.getCenter(),    // 指定文本标注所在的地理位置
14           offset   : new BMap.Size(-43, -45)    //设置文本偏移量
15         }
16         var label = new BMap.Label("我爱北京天安门", opts);  // 创建文本标注对象
17         label.setStyle({
18              backgroundColor: "transparent",
19              border: "0px",
20              color : "black",
21              fontWeight: "bold",
22              fontSize : "12px",
23              height : "20px",
24              lineHeight : "20px",
25              fontFamily:"微软雅黑"
26          });
27         map.addOverlay(label); 
28         });
29     
30     map.addControl(new BMap.MapTypeControl());
31     map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
32 </script>