[Liferay]基于liferay开发百度地图portlet

最新推荐文章于 2017-10-28 20:44:59 发布

一纯粹的paranoid

最新推荐文章于 2017-10-28 20:44:59 发布

阅读量1.4k

点赞数

分类专栏： liferay-portlet 文章标签： liferay 百度地图 portlet

本文链接：https://blog.csdn.net/Paranoid_Android/article/details/8988837

版权

liferay-portlet 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

liferay version           :  Liferay Portal Community Edition 6.2.0 CE 
   
   plugin sdk version      : 6.2.0 
   
   
   server                      : tomcat 7.0.25 
   
   
   db                            : mySql 5.5.21 
   
   
   IDE                           : Liferay Developer Studio 1.6.1 
   
   
   baidu maps API          : JavaScript API v1.5 (http://developer.baidu.com/map/jshome.htm) 
   
   
   
   1. Create a new plugin project "baidu-maps-portlet" 
   
   
    
   
   
    
   
   
   2. view.jsp ， 对百度地图API最简单的调用， 红色字体为 ak 我的密匙 ， 官方文档提示JavaScript API v1.5之后的版本必须添加密匙

<%@ include file="/init.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=629ce9d0cdcff81132e1151a6d33341d"></script>

<div style="padding-top: 5px;"></div>

<div class= "maps-content" id="maps-content" style="height: <%= height %> px; width: 100%;" />

<script type="text/javascript" >
       var map = new BMap.Map( "maps-content" );
       var point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
</script> 
    
    
    
 
    
    
    3. portlet中应该使用的百度地图API 
    
    
    
 
    
    
    创建地图实例  
    
    
    var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}  
    
 
    创建点坐标 
    
    
    var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}  
    
    
    
  
    
    
    地图初始化 
    
    
    map.centerAndZoom(point, 15);   
    
    
    
  
    
    
    添加控件 
    
    
     
    map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用  // 这个不确定，应该不加这条代码也能正常 
    
 
    创建标注 
    
    
    var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker); 
    
 
    信息窗口 
    
    
     
    var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口   
    
    
    
  
    
    
    激活滚轮调整大小功能 
    
    
    map.enableScrollWheelZoom();