高德地图 鼠标点击后 地图地图上点标记跟着变化
高德地图 鼠标点击后 地图地图上点标记跟着变化
高德地图 鼠标点击后 地图地图上点标记跟着变化
吐槽下,什么鬼标题
高德地图marker 类中有方法 setPosition 只要在点击地图的时候 将地图经纬度传递到该方法中即可
另外，主要查看官方手册中关于marker类的介绍
Boolean 设置点标记是否可拖拽移动，默认为false
raiseOnDrag
Boolean 设置拖拽点标记时是否开启点标记离开地图的效果
cursor String
指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持
Boolean 点标记是否可点击
代码如下：
function initGDmap(){
var longitude
"121.503396";
var latitude
"31.277239";
var map = new AMap.Map("map", {
resizeEnable: true,
center: [longitude, latitude]
var marker
new AMap.Marker({
position: [longitude, latitude]
var clickEventListener = map.on('click', function(e) {
document.getElementById("longitude").value = e.lnglat.getLng();
document.getElementById("latitude").value = e.lnglat.getLat();
lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];
marker.setPosition(lnglatXY);
regeocoder(lnglatXY);
AMap.plugin('AMap.Autocomplete',function(){
var auto = new AMap.Autocomplete({
input: "keywords"
AMap.event.addListener(auto, "select", select);
function select(e) {
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
function regeocoder(lnglatXY) {
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' &&
=== 'OK') {
var address = result.regeocode.formattedA
document.getElementById("address").value =
var marker = new AMap.Marker({
position: lnglatXY
map.setFitView();
我的热门文章
即使是一小步也想与你分享1141人阅读
百度地图API（5）
1.实现功能：通过给定的坐标点，往地图中添加标注点，点击标注点，显示改点的详细信息。
2.效果图：
演示链接：
3.核心方法：
手动创建数据，实际项目则是接受GPS信息
var points = [
{"lng":112.58,"lat":26.89,"url":"","id":1,"name":"p1"},
{"lng":112.59,"lat":26.90,"url":"","id":2,"name":"p2"},
{"lng":112.57,"lat":26.88,"url":"","id":3,"name":"p3"}
创建添加标注点到地图，并为标注点添加点击事件
function addMarker(points) {
for(var i=0, pointsLen = points. i&pointsL i++) {
var point = new BMap.Point(points[i].lng, points[i].lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
编写信息显示方法
function showInfo(thisMarker,point) {
var sContent =
'&ul style="margin:0 0 5px 0;padding:0.2em 0"&'
+'&li style="line-height: 26font-size: 15"&'
+'&span style="width: 50display: inline-"&id：&/span&' + point.id + '&/li&'
+'&li style="line-height: 26font-size: 15"&'
+'&span style="width: 50display: inline-"&名称：&/span&' + point.name + '&/li&'
+'&li style="line-height: 26font-size: 15"&&span style="width: 50display: inline-"&查看：&/span&&a href="'+point.url+'"&详情&/a&&/li&'
var infoWindow = new BMap.InfoWindow(sContent);
thisMarker.openInfoWindow(infoWindow);
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.centerAndZoom( "衡阳");
map.setCurrentCity("衡阳");
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);
Tip: 想使用百度地图api需要申请一个ak，申请方法就不介绍了，百度一大堆.
完整代码(不包括api的ak 需要自己申请)：
&!DOCTYPE html&
http-equiv="Content-Type" content="text/ charset=utf-8" /&
name="viewport" content="initial-scale=1.0, user-scalable=no" /&
type="text/css"&
, ,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
type="text/javascript"
//ak填自己申请的ak
src="http://api./api?v=2.0& ak=你申请的AK"&
&百度地图api展示&
id="allmap"&&
type="text/javascript"&
var points = [
{"lng":112.58,"lat":26.89,"url":"","id":1,"name":"p1"},
{"lng":112.59,"lat":26.90,"url":"","id":2,"name":"p2"},
{"lng":112.57,"lat":26.88,"url":"","id":3,"name":"p3"}
function addMarker(points) {
for(var i=0, pointsLen = points. i&pointsL i++) {
var point = new BMap.Point(points[i].lng, points[i].lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
function showInfo(thisMarker,point) {
var sContent =
'&ul style="margin:0 0 5px 0;padding:0.2em 0"&'
+'&li style="line-height: 26font-size: 15"&'
+'&span style="width: 50display: inline-"&id：&/span&' + point.id + '&/li&'
+'&li style="line-height: 26font-size: 15"&'
+'&span style="width: 50display: inline-"&名称：&/span&' + point.name + '&/li&'
+'&li style="line-height: 26font-size: 15"&&span style="width: 50display: inline-"&查看：&/span&&a href="'+point.url+'"&详情&/a&&/li&'
var infoWindow = new Window(sContent);
thisMarker.openInfoWindow(infoWindow);
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.centerAndZoom( "衡阳");
map.setCurrentCity("衡阳");
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);
参考资料：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：115459次
积分：1014
积分：1014
排名：千里之外
原创：43篇
转载：10篇
评论：60条
(4)(1)(6)(3)(8)(8)(2)(8)(10)(3)当前位置： &
& 百度地图电脑版怎么同时标注多个地点?
百度地图电脑版怎么同时标注多个地点?
类别：&&大小：29.58MB语言：简体中文&&授权：免费软件
　　百度地图中怎么同时标注多个地点?相信大多数朋友去外面旅游都会借助百度地图工具使用，在地图上标注地点以便于我们选择，那我们该如何在百度地图中标注多个地点以供选择呢?下面小编就为用户们介绍百度地图同时标注多个地点的操作方法，具体请看下文!　　百度地图中怎么同时标注多个地点的操作方法介绍：　　1、打开百度地图，我们以台湾岛区域为例，如图1所示：　　(图1)　　2、选择需要去的地点，如单击“长庚大学”会出现对话框，如图2所示：　　(图2)　　3、我们点选收藏(即“五角星”)后，左上角会出现“添加成功”的提示，如图3所示：　　(图3)　　4、我们同样的方式再添加一个，之前添加的“长庚大学”上已经有个五角星的标识了，如图4所示：　　(图4)　　5、我们添加后，可以再左侧“收藏”内看到我们选择的地点，单击可查看，如图5所示：　　(图5)　　6、对于去过的地方，可以进行“重命名”或贴上“标签”或者删除，如图6所示：　　(图6)　　以上就是关于百度地图同时标注多个地点的使用教程，希望对大家有所帮助! & &小编推荐： & & & & &
上一篇 &：
下一篇 &：
文章链接：/tutorials/55470.html
(转载时请注明本文出处及文章链接)var sogou_ad_id=731545;
var sogou_ad_height=90;
var sogou_ad_width=980;}