欢迎光临
感谢一路有你

实例 | 百度地图在线标点使用(含信息窗口)

如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
 
 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ED2d59e127427eba231c96ba1b49af84"></script>
      <div id="allmap" style="width:100%; height:480px; line-height:24px;"></div>  
    </div>
    

<script type="text/javascript">  
    var iscreatr=false;  
    function initialize() {  
        //---------------------------------------------基础示例---------------------------------------------  
        var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例  
        map.centerAndZoom(new BMap.Point(121.45734,31.23637),19);  //初始化时,即可设置中心点和地图缩放级别。  
        map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动  
          
  
        //---------------------------------------------信息窗口(地图上由此只有1个)---------------------------------------------  
        var sContent =  
		"<h4 style='margin:0 0 5px 0;'>王明昌博客</h4>" +   
		"<p>地址:</p>" +   
		"<p>邮编:</p>" +   
		"<p>电话:</p>" +   
		"<p>传真:</p>" +   
    "<p>手机:+86-18751330006</p>" +   
		"<p>邮箱: </p>" +   
		"</div>";  
        var point = new BMap.Point(121.4534,31.2637);//默认  
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象  
  
        map.openInfoWindow(infoWindow,point);  
  
  
  
        //---------------------------------------------创建标注---------------------------------------------  
        var point = new BMap.Point(121.7734,31.2637);//默认  
        // 创建标注对象并添加到地图    
        var marker = new BMap.Marker(point);    
        map.addOverlay(marker);    
          
        //---------------------------------------------点击标注弹出信息窗口---------------------------------------------  
        var infoWindow = new BMap.InfoWindow("<h4 style='margin:0 0 5px 0;'>王明昌博客</h4>
<p>地址:</p>
<p>邮编:</p>
<p>电话:</p>
<p>传真:</p>
<p>手机:</p>
<p>邮箱: </p>");  
      
        marker.addEventListener("click", function(e){   
            this.openInfoWindow(infoWindow);  
        });  
      
    }  
    function loadScript() {  
       var script = document.createElement("script");  
       script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  
       document.body.appendChild(script);  
    }  
    window.onload = loadScript;  
</script>

 

赞(0) 打赏
未经允许不得转载:王明昌博客 » 实例 | 百度地图在线标点使用(含信息窗口)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏