豆瓣同城活动地图标注拖拽是如何实现的？

我在用django做一个活动类的站，需要使用下地图，需求是：

那建活动时，用户可以点击地图上的红点定位到需要的位置
数据库记录下坐标
访问用户在查看活动时，能看到地图上的红点标识

具体功能，类似于豆瓣的同城活动中的地图，我查看过高德地图的API，上面有关于鼠标的点位，点击能得到鼠标，但如何把红点也放上去呢？

豆瓣同城：http://www.douban.com/event/20165351/

我自己javascript只知道一些简单的东西，这类东西对我来说还是复杂了，但必须得解决，所以麻烦各位说说如何解决，如果在搞定这个问题的话，需要学哪类知识。

谢谢。

这个很简单，看一下文档，几分钟搞定了。不过感觉楼主是来要源码，而不是解答问题的..

下面我贴出代码，只用到了 JavaScript 的知识，如果是动态的话(你应该不是)就要用到后端的知识了，这个不是我们讨论的范围了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义点标记图标</title>
<link rel="stylesheet" type="text/css" href="/Public/css/demo.Default.css" /> 
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=您申请的key值"></script>
<script language="javascript">
var mapObj,marker;
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
    center:new AMap.LngLat(116.397428,39.90923), //地图中心点
    level:13  //地图显示的比例尺级别
    }); 

    //添加点标记，并使用自己的icon
    addMarker();
}

//在地图上添加点标记函数
function addMarker(){
    marker=new AMap.Marker({                  
    icon:new AMap.Icon({    //复杂图标
            size:new AMap.Size(28,37),//图标大小
            image:"http://webapi.amap.com/images/custom_a_j.png", //大图地址
            imageOffset:new AMap.Pixel(-28,0)//相对于大图的取图位置
        }),
    position:new AMap.LngLat(116.405467,39.907761)
    });
    marker.setMap(mapObj);  //在地图上添加点
}
</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
</body>
</html>

这个是来自于高德地图文档的代码。

然后参考了 Marker的文档。改成

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义点标记图标</title>
<link rel="stylesheet" type="text/css" href="/Public/css/demo.Default.css" /> 
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=您申请的key值"></script>
<script language="javascript">
var mapObj,marker;
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
    center:new AMap.LngLat(116.397428,39.90923), //地图中心点
    level:13  //地图显示的比例尺级别
    }); 

    //添加点标记，并使用自己的icon
    addMarker();
}

//在地图上添加点标记函数
function addMarker(){
    marker=new AMap.Marker({                  
    icon:new AMap.Icon({    //复杂图标
            size:new AMap.Size(28,37),//图标大小
            image:"http://webapi.amap.com/images/custom_a_j.png", //大图地址
            imageOffset:new AMap.Pixel(-28,0)//相对于大图的取图位置
        }),
    position:new AMap.LngLat(116.405467,39.907761),
    draggable:true //***修改了这里***
    });
    marker.setMap(mapObj);  //在地图上添加点
}
</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
</body>
</html>

如果还有什么不会就问我吧~记得采纳哦亲！
如果你不会，你出钱给我做吧！！我穷！

【热门文章】