百度地图JS

若要转载请注明出处

本文为原创

作者:injuer

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


</pre><pre code_snippet_id="368934" snippet_file_name="blog_20140529_1_6382235" name="code" class="html"><!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{
	        width: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);
	    			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){
	    		marke.addEventListener("click", function(event){
    				var overs = map.getOverlays();
    				var point = null;
    				for(var i = 0; i < overs.length; i++){
    					if(overs[i] instanceof BMap.Label){
    						point = new BMap.Point(event.target.getPosition().lng - 0.5 / 1000, event.target.getPosition().lat);
	    					if(point.equals(overs[i].getPosition())){
	    						overs[i].show();
	    					}else{
	    						overs[i].hide();
	    					}
    					}
    				}
    			});
    			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.hide();
				map.addOverlay(label);
	    	}
	    }

	    var data = new Array();

	    for(var i = 0; i < 3; i++){
	    	data.push({
	    		lng : 102.711 + (i /1000),
	    		lat : 25.05,
	    		icon : null,
	    		text : "这是内容",
	    		title : "这是标题",
	    		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>

百度地图JS,布布扣,bubuko.com

时间: 2024-10-15 23:49:24

百度地图JS的相关文章

百度地图js小结

1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 假设须要限制区域,那么须要引入以下的js <!-- 区域限制js --> <script type="text/j

百度地图JS API移动端,phonegap 自定义覆盖物Click事件无法执行 的 bug 解决方法

当你为自定义覆盖物添加了click事件后,你会发现在移动端是无论如何也触发不了的,这算是一个BUG. 最近我在为我的地图APP开发第二版,在为一个覆盖物添加行为事被困扰到了,自定义覆盖物的click事件竟然无法在iPhone端触发,以及百度地图JS API里面的开源库涉及到自定义覆盖物click事件的均无效. 我为这个BUG烦恼了很久,直到今天,在QQ群里网友(在此要先感谢这位网友mooring)告诉了我解决方法:iPhone上的自定义覆盖物事件默认会触发map的click事件,如果map定义了

外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)

可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=",function(){ //获取百度地图js成功后 会执行此方法 initMap(); }); 这个方法等价于 $.ajax({ url: url, dataType: "script", success

百度地图 js使用

在网页中展现地图及位置信息,可使用百度地图.参阅 http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction 1.获取秘钥 秘钥是为了用在百度地图api的js引用中.我的秘钥是3GFi2F04wXaVuwmGu8fN49kL1234567890 <script src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" type="t

百度地图JS API

1.百度地图api的使用 1)申请百度账号和ak 2)引用百度地图API文件 <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 3)获取当前位置的经纬度 //获取当前位置的经纬度 getCurrentPosition:function(context,params){ //navigator.geolocation部分手机有权限问题 Vue.prototype.$comm

关于百度地图js api的getCurrentPosition定位不准确的解决方法

很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. 1 //创建查询对象 2 var geolocation = new BMap.Geolocation(); 3 4 //调用getCurrentPosition函数 5 geolocation.getCurrentPosition(function (position) { 6 7 //如果查询成功 8 if (this.getStatu() == 'B

百度地图JS调用示例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script typ

百度地图js 基本用法介绍

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>完整demo</title> <meta http-equiv="Content-Type" content="text/ht

解决百度地图js在移动端点击无效

添加触摸事件 //触摸事件(解决点击事件无效)--触摸开始,开启拖拽map.addEventListener('touchmove', function(e) {map.enableDragging();});//触摸结束始,禁止拖拽map.addEventListener("touchend", function(e) {map.disableDragging();}); 原文地址:https://www.cnblogs.com/yeyuqian/p/11969161.html