当前位置：文江博客话题详情

高德地图豆瓣

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

发布于 2022-08-27 11:54:41 字数 539 浏览 18 评论 0

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

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

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

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

请输入图片描述

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

谢谢。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

没有你我更好 2022-09-03 11:54:41

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

下面我贴出代码，只用到了 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>

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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

亚希

文章 0 评论 0

cyp

文章 0 评论 0

北漠

文章 0 评论 0

11223456

文章 0 评论 0

坠似风落

文章 0 评论 0

游魂

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文