android 仿饿了吗地图,仿饿了么LBS移动地图点餐系统代码

这篇博客介绍了如何使用JavaScript和高德地图API(AMap.js)来初始化地图、设置城市、添加地图操作插件及鼠标工具。同时,详细展示了如何创建自定义的右键菜单,包括缩放地图、测量距离和添加Marker等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JS代码

var map, toolBar, mouseTool, contextMenu;

//初始化地图对象,加载地图

map = new AMap.Map("Map", {

resizeEnable: true

});

//设置城市

document.getElementById('query').onclick = function(){

var cityName = document.getElementById('cityName').value;

if(!cityName){

cityName = '北京市';

}

map.setCity(cityName);

};

//地图中添加地图操作ToolBar插件、鼠标工具MouseTool插件

map.plugin(["AMap.ToolBar","AMap.MouseTool"], function(){

toolBar = new AMap.ToolBar();

map.addControl(toolBar);

mouseTool = new AMap.MouseTool(map);

});

//自定义右键菜单内容

var menuContent = document.createElement("div");

menuContent.innerHTML = "

"

//创建右键菜单

contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContent});//通过content自定义右键菜单内容

//地图绑定鼠标右击事件——弹出右键菜单

AMap.event.addListener(map, 'rightclick', function(e){

contextMenu.open(map, e.lnglat);

contextMenuPositon = e.lnglat; //右键菜单位置

});

contextMenu.close();

//右键菜单缩放地图

function zoomMenu(tag){

if(tag === 0){map.zoomOut();}

if(tag === 1){map.zoomIn();}

contextMenu.close();

}

//右键菜单距离量测

function distanceMeasureMenu(){

mouseTool.rule();

contextMenu.close();

}

//右键菜单添加Marker标记

function addMarkerMenu(){

mouseTool.close();

var marker = new AMap.Marker({

map: map,

position: contextMenuPositon, //基点位置

icon: "http://webapi.amap.com/images/marker_sprite.png", //marker图标,直接传递地址url

offset: {x:-8,y:-34} //相对于基点的位置

});

contextMenu.close();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值