腾讯地图之Marker

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>Map</title>

    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

    <script charset="utf-8" src="jquery-1.9.0.min.js"></script>

    <script>

var init = function() {

    var map = new qq.maps.Map(document.getElementById('container'));

    var myLatLng = new qq.maps.LatLng(39.916527,116.397128);

    map.panTo(myLatLng);

}

$(function(){

 // var map=new qq.maps.Map($('#container')[0]);//$('#container')是一个jQuery对象 这里需要的是DOM元素

 //    var myLatLng = new qq.maps.LatLng(39.916527,116.397128);

 //    map.panTo(myLatLng);

    var center = new qq.maps.LatLng(39.916527,116.397128);

    //第二种创建地图的方式

    var map = new qq.maps.Map($('#container')[0],{

        center: center,

        zoom: 13

    });

    var marker = new qq.maps.Marker({

        position: center,

        map: map

    });

    var info = new qq.maps.InfoWindow({

        map: map

    });

    qq.maps.event.addListener(marker, 'mouseover', function() {

        info.open();

        info.setContent('<div style="text-align:center;white-space:nowrap;'+

        'margin:10px;">hover标记</div>');

        info.setPosition(center);

    });

    qq.maps.event.addListener(marker, 'mouseout', function() {

        info.close();

    });

});

</script>

</head>

<body>

    <div id="container" style="width:500px; height:300px"></div>

</body>

</html>
巴特西

腾讯地图之Marker

最新文章

热门文章
