zoukankan      html  css  js  c++  java
  • 百度地图JS--2

    转载请注明出处

    本文为原创

    作者:injuer

    严禁用于商业用途,仅学习交流

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        
        <title>My JSP 'index.jsp' starting page</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<style type="text/css">
    		#container{
    	        100%;
    	        height:100%;
    		}
    	</style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******"></script>
      </head>
      
      <body>
        <div id="container"></div>
      </body>
      <script type="text/javascript">
    	    var extMap = {
    	    	load : function(data, controls){
    	    		var map = new BMap.Map("container");
            		map.centerAndZoom(new BMap.Point(data.lng, data.lat), 12);
            		if(null != controls){
            			for(var i = 0; i < controls.length; i++){
            				map.addControl(controls[i]);
            			}
            		}
            		return map;
    	    	},
    	    	addData : function(map,data){
    	    		var marke = null;
    	    		var label = null;
    	    		var temp = null;
    	    		for(var i = 0; i < data.length; i++){
    	    			temp = data[i];
    	    			marke = new BMap.Marker(new BMap.Point(temp.lng, temp.lat));
    	    			marke.setTitle(temp.title);
    	    			if(null != temp.icon && "" != temp.icon){
    	    				marke.setIcon(new BMap.Icon(temp.icon, new BMap.Size(temp.icon_width, temp.icon_height)));
    	    			}
    	    			this.addMenu(marke, temp);
    	    			this.addMarkerEventListener(map, marke, temp);
    	    			this.addLabel(map, marke, temp);
    	    		}
    	    		return map;
    	    	},
    	    	addMenu : function(marke, data){
    	    		var ms = data.menu;
    	    		var m = null;
    	    		m = new BMap.ContextMenu();
    	    		for(var i = 0; i < ms.length; i++){
    	    			m.addItem(new BMap.MenuItem(ms[i].root, ms[i].fun));
    	    		}
    	    		marke.addContextMenu(m);
    	    	},
    	    	addMarkerEventListener : function(map, marke, data){
    	    		marke.addEventListener("click", function(event){
    	    			var w = extMap.createWindow(data);
    	    			marke.openInfoWindow(w);
        			});
        			map.addOverlay(marke);
    	    	},
    	    	addLabel : function(map, marke, data){
    	    		label = new BMap.Label(data.text);
    				label.setPosition(new BMap.Point(data.lng  - 0.5 / 1000, data.lat));
    				label.show();
    				map.addOverlay(label);
    	    	},
    	    	createWindow : function(data){
    	    		var w = new BMap.InfoWindow(data.des, {
    	    			height : 0,
    	    			maxWidth : 0,
    	    			title : data.title,
    	    			enableMessage : true,
    	    			message : data.msg
    	    		});
    	    		return w;
    	    	}
    	    }
    	    
    	    var data = new Array();
    	    
    	    for(var i = 0; i < 3; i++){
    	    	data.push({
    	    		lng : 102.711 + (i /1000),
    	    		lat : 25.05 + (i /1000),
    	    		icon : null,
    	    		text : "这是内容" + i,
    	    		title : "<h5>这是标题</h5>" + i,
    	    		des : "这是描写叙述" + i,
    	    		msg : "这是短信" + i,
    	    		icon_width : 0,
    	    		icon_height : 0,
    	    		menu : [
    	    			{
    	    				root : "根文件夹0",
    	    				fun : function(){
    	    					alert("点击了根文件夹0");
    	    				},
    	    			},
    	    			{
    	    				root : "根文件夹1",
    	    				fun : function(){
    	    					alert("点击了根文件夹1");
    	    				}
    	    			},
    	    			{
    	    				root : "根文件夹2",
    	    				fun : function(){
    	    					alert("点击了根文件夹2");
    	    				}
    	    			}
    	    		]
    	    	});
    	    }
    	    
    	    var map = extMap.addData(extMap.load(data[0], [
    	    	new BMap.ScaleControl(),
    	    	new BMap.OverviewMapControl(),
    	    	new BMap.NavigationControl()
    	    ]), data);
    	    
      </script>
    </html>


  • 相关阅读:
    SQL Server 存储过程
    Prettier
    VSCode常用插件之open in browser使用
    VSCode常用插件之vscode-fileheader使用
    (四)Vue面试题解析,目标高级前端开发者必经之路
    (三)Vue必考面试题解析,继续向高级前端迈进
    (二)Vue常见面试题,向高级前端开发迈进
    (一)Vue常见面试题,看看你都会了吗?
    Vue2.x 开发必须知道的 36 个技巧
    开箱即用 vue-cli4 vant rem 移动端框架方案
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/8328026.html
Copyright © 2011-2022 走看看