地图插件代码——腾讯地图

腾讯地图在网页上的应用

过程十分简就是把div放在相应的地方设置相应的id就行了。
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>腾讯地图</title>  
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=AMZBZ-NBWAR-SCKWS-WSFQU-TZ4R6-YWBEV"></script>  
<script>  
    var init = function() {  
        var map_center = new soso.maps.LatLng(39.90927537429095,116.39838695526123);  
        var map = new soso.maps.Map(document.getElementById("container"), {  
            center : map_center,  
            zoom : 14,  
            panControl : true,  
            zoomControl : true,  
            zoomControlOptions : {  
                style : soso.maps.ZoomControlStyle.SMALL  
            }  
        });  
  
        var marker = new soso.maps.Marker( {  
            map : map,  
            position : map_center  
        });  
  
        var infoWin = new soso.maps.InfoWindow( {  
            map : map  
        });  
  
        soso.maps.event.addListener(  
                marker,  
                'click',  
                function(evt) {  
                    infoWin.open();  
                    infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">这里是天安门</div>');  
                    infoWin.setPosition(evt.latLng);  
                });  
          
     }  
</script>  
    </head>  
    <body onload="init()">  
        <div style="width: 603px; height: 300px; padding-top: 80px; padding-left: 80px;" id="container"></div>  
    </body>  
</html>

效果如下：
最终效果