码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图第一篇

时间:2016-06-28 00:42:57      阅读:632      评论:0      收藏:0      [点我收藏+]

标签:

如果使用高德地图的API,首先需要引入高德地图的API

1、页面引入高德地图API

 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=59cc615a40d6b98b7f3756a0f6f8721d"></script>

2、页面上需要有个容器进行承载

<div id="container" class="container abs">
                    
</div>

3、然后就可以在JS中声明并进行调用了

// 地图对象
var map = null;
// 地图上的所有自定义点
var markers = [];


var icon1 = new AMap.Icon({
    size: new AMap.Size(52, 56),
    image: "/Assest/tour/images/icon1.png",
    imageOffset: new AMap.Pixel(0, 0)
});

var icon2 = new AMap.Icon({
    size: new AMap.Size(40, 50),
    image: "/Assest/tour/images/icon2.png",
    imageOffset: new AMap.Pixel(0, 0)
});
$(function () {
    // 初始化地图对象        
    map = new AMap.Map(‘container‘, {
        resizeEnable: true,
        dragEnable: true, //是否可以拖动
        view: new AMap.View2D({
            zoom: 20
        })
    });

}

4、marker的使用

// 标记点
        var marker = new AMap.Marker({
            map: map,
            content: i == 0 ? ‘<div class="icon1"><div class="text">‘ + (i + 1) + ‘</div></div>‘ : ‘<div class="icon2"><div class="text">‘ + (i + 1) + ‘</div></div>‘,
            position: [pointinfo[i].lon, pointinfo[i].lat],
            offset: { x: -20, y: -20 }  //偏移量
        });

// 信息窗口
        marker.infoWindow = new AMap.InfoWindow({
            content: ‘<div class="tit">‘ + pointDescName + ‘</div><div class="generalInfo" 
onclick="openOrJump(\‘‘ + pointinfo[i].lon + ‘\‘,\‘‘ + pointinfo[i].lat + ‘\‘,\‘‘ + pointDescName + ‘\‘)"><img src=\‘‘ + navigationIcon + ‘\‘ alt=\"\"></div>‘, offset: { x: -18, y: -10 } }); marker.id = pointinfo[i].id; AMap.event.addListener(marker, ‘click‘, function (e) { e.target.infoWindow.open(map, e.target.getPosition()); map.setFitView(); }); marker.setContent(‘<div class="icon1"><div class="text">‘ + (1) + ‘</div></div>‘); marker.infoWindow.open(map, marker.getPosition()); map.setFitView();

5、在地图上画轨迹图

function showTrack(track) {
    var path = [];
    var arr = track.split("|");
    for (var i = 0; i < arr.length / 2; i++) {
        path.push([arr[i * 2], arr[i * 2 + 1]]);
    }

    var polyline = new AMap.Polyline({
        path: path,
        strokeColor: "#3366FF",
        strokeOpacity: 0.5,//线透明度
        strokeWeight: 4,//线宽
        strokeStyle: "solid",//线样式
        isOutline: true,
        outlineColor: "#3366FF"
    });
    polyline.setMap(map);
    map.setFitView();
}

 

高德地图第一篇

标签:

原文地址:http://www.cnblogs.com/ck168/p/5621904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!