百度地图添加标记以及标记的点击

【百度地图系列教程五】给百度地图添加点标记(可自定义),并设置为可拖拽(可选) 1. **普通点标记**:直接在地图上添加多个点。 2. **可拖拽点标记**:允许用户拖动标记点。 3. **自定义图标标记**:使用自定义图片作为标记图标。 阅读详情

废话少说,直接上代码:
MapActivity.java

package com.wissea.trs.activity;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Point;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.baidu.mapapi.SDKInitializer;
import com.baidu.mapapi.map.BaiduMap;
import com.baidu.mapapi.map.BaiduMap.OnMarkerClickListener;
import com.baidu.mapapi.map.BitmapDescriptor;
import com.baidu.mapapi.map.BitmapDescriptorFactory;
import com.baidu.mapapi.map.InfoWindow;
import com.baidu.mapapi.map.MapStatus;
import com.baidu.mapapi.map.MapStatusUpdate;
import com.baidu.mapapi.map.MapStatusUpdateFactory;
import com.baidu.mapapi.map.MapView;
import com.baidu.mapapi.map.Marker;
import com.baidu.mapapi.map.MarkerOptions;
import com.baidu.mapapi.map.OverlayOptions;
import com.baidu.mapapi.model.LatLng;
import com.wissea.trs.R;
import com.wissea.trs.model.CameraLocation;

public class MapActivity extends BaseActivity {

    private MapView mMapView;
    private BaiduMap mBaiduMap;
    private BitmapDescriptor mMarker;
    private RelativeLayout rl_camera_description;
    private Context mContext;

    private TextView tv_name;
    private TextView tv_description;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 在使用SDK各组件之前初始化context信息,传入ApplicationContext
        // 注意该方法要再setContentView方法之前实现
        mContext = getApplicationContext();
        SDKInitializer.initialize(getApplicationContext());
        setContentView(R.layout.activity_map);

        // 模拟数据
        List<CameraLocation> cameraLocations = new ArrayList<CameraLocation>();
        cameraLocations.add(new CameraLocation(34.242652,108.971171,R.drawable.logo,"英伦贵族东旅馆", "距离209米","我是说明1"));
        cameraLocations.add(new CameraLocation(34.242952,108.972171,R.drawable.logo,"英伦贵族西旅馆", "距离209米","我是说明2"));
        cameraLocations.add(new CameraLocation(34.242852,108.973171,R.drawable.logo,"英伦贵族南旅馆", "距离209米","我是说明3"));
        cameraLocations.add(new CameraLocation(34.242152,108.971971,R.drawable.logo,"英伦贵族北旅馆", "距离209米","我是说明4"));

        initView();

        initMarker(cameraLocations);

    }

    /**
     * 初始化控件
     */
    private void initView() {
        // 初始化ActionBar
        setBackable(true);
        setTitle("拓扑图");

        // 获取地图控件引用
        mMapView = (MapView) findViewById(R.id.mv_map);
        mBaiduMap = mMapView.getMap();

        // 底部说明
        rl_camera_description = (RelativeLayout) findViewById(R.id.rl_camera_description);

        tv_name = (TextView) findViewById(R.id.tv_name);
        tv_description = (TextView) findViewById(R.id.tv_description);
    }

    /**
     * 点击地图上的标记
     * @param cameraLocations
     */
    private void initMarker(List<CameraLocation> cameraLocations) {
        // TODO Auto-generated method stub
        mMarker = BitmapDescriptorFactory.fromResource(R.drawable.marker);
        mBaiduMap.clear();
        LatLng latLng = null;
        Marker marker = null;
        OverlayOptions options;
        for(CameraLocation cameraLocation : cameraLocations) {
            // 经纬度
            latLng = new LatLng(cameraLocation.getLatitude(), cameraLocation.getLongtitude());

            // 图标
            options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);
            marker = (Marker) mBaiduMap.addOverlay(options);
            Bundle bundle = new Bundle();
            bundle.putSerializable("cameraLocation", cameraLocation);
            marker.setExtraInfo(bundle);
        }

        // 定义地图状态(精确到50米)
        MapStatus mMapStatus = new MapStatus.Builder().target(latLng).zoom(18).build();
        // 定义MapStatusUpdate对象,以便描述地图状态将要发生的变化
        MapStatusUpdate mapStatusUpdate = MapStatusUpdateFactory.newMapStatus(mMapStatus);
        // 移到第四个位置
        mBaiduMap.setMapStatus(mapStatusUpdate);

        // 点击地图上的标记
        mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {

            @Override
            public boolean onMarkerClick(Marker marker) {
                Bundle bundle = marker.getExtraInfo();
                CameraLocation cameraLocation = (CameraLocation) bundle.getSerializable("cameraLocation");
                //rl_camera_description.findViewById(id)查找该相对布局里的控件,使用cameraLocation这个bean的信息为控件设置内容
                tv_name.setText(cameraLocation.getName());
                tv_description.setText(cameraLocation.getDescription());

                InfoWindow infoWindow;
                TextView textView = new TextView(mContext);
                textView.setBackgroundResource(R.drawable.popup);
                textView.setPadding(30, 20, 30, 50);
                textView.setText("haha");
                textView.setTextColor(getResources().getColor(R.color.black));

                final LatLng latLng = marker.getPosition();
                Point point = mBaiduMap.getProjection().toScreenLocation(latLng);
                point.y -= 160;
                LatLng latLng2 = mBaiduMap.getProjection().fromScreenLocation(point);
                infoWindow = new InfoWindow(textView, latLng2, 0);
                // 以上可以替换为:infoWindow = new InfoWindow(textView, latLng, -160);

                mBaiduMap.showInfoWindow(infoWindow);

                rl_camera_description.setVisibility(View.VISIBLE);
                return true;
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 在activity执行onDestroy时执行mMapView.onDestroy(),实现地图生命周期管理
        mMapView.onDestroy();
    }

    @Override
    protected void onResume() {
        super.onResume();
        // 在activity执行onResume时执行mMapView. onResume (),实现地图生命周期管理
        mMapView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        // 在activity执行onPause时执行mMapView. onPause (),实现地图生命周期管理
        mMapView.onPause();
    }
}

xml文件activity_map.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.baidu.mapapi.map.MapView
        android:id="@+id/mv_map"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true" />

    <!-- 底部说明 -->
    <RelativeLayout
        android:id="@+id/rl_camera_description"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="#cc4e5a6b"
        android:visibility="gone"
        android:layout_alignParentBottom="true" >

        <!-- 图片 -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            android:background="@drawable/shape_image_frame"
            android:scaleType="fitXY"
            android:src="@drawable/camera" />

        <!-- 图片下面的说明 -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="20dp"
                android:gravity="center_vertical"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="name"
                    android:textColor="@color/white" />

                <TextView
                    android:id="@+id/tv_description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="description"
                    android:textColor="@color/white" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="aa"
                    android:textColor="@color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="bb"
                    android:textColor="@color/white" />
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

CameraLocation.java

package com.wissea.trs.model;

import java.io.Serializable;

public class CameraLocation implements Serializable {
    private static final long serialVersionUID = -7272905486020904055L;
    private double latitude;
    private double longtitude;
    private int imageId;
    private String name;
    private String distance;
    private String description;

    public CameraLocation(){}

    public CameraLocation(double latitude, double longtitude, int imageId,
            String name, String distance, String description) {
        super();
        this.latitude = latitude;
        this.longtitude = longtitude;
        this.imageId = imageId;
        this.name = name;
        this.distance = distance;
        this.description = description;
    }



    /**
     * @return the latitude
     */
    public double getLatitude() {
        return latitude;
    }

    /**
     * @param latitude
     *            the latitude to set
     */
    public void setLatitude(double latitude) {
        this.latitude = latitude;
    }

    /**
     * @return the longtitude
     */
    public double getLongtitude() {
        return longtitude;
    }

    /**
     * @param longtitude
     *            the longtitude to set
     */
    public void setLongtitude(double longtitude) {
        this.longtitude = longtitude;
    }

    /**
     * @return the imageId
     */
    public int getImageId() {
        return imageId;
    }

    /**
     * @param imageId
     *            the imageId to set
     */
    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name
     *            the name to set
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return the distance
     */
    public String getDistance() {
        return distance;
    }

    /**
     * @param distance
     *            the distance to set
     */
    public void setDistance(String distance) {
        this.distance = distance;
    }

    /**
     * @return the description
     */
    public String getDescription() {
        return description;
    }

    /**
     * @param description
     *            the description to set
     */
    public void setDescription(String description) {
        this.description = description;
    }
}

底部的说明背景色:shape_image_frame.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke
        android:width="2dp"
        android:color="#AAFFFFFF" />

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />

</shape>

运行效果:
这里写图片描述

百度 API 教程 002:添加地图标记和信息窗口 在 JavaScript 中使用 百度地图 API 添加标记(Marker)和信息窗口(InfoWindow)的方法如下 阅读详情

相关推荐

2024最新实战:用1Panel面板+Docker快速部署Frps服务端(含Nginx配置模板)

本文详细介绍了2024年企业级内网穿透方案,通过1Panel面板和Docker技术快速部署Frps服务端,包含Nginx反向代理配置模板。从服务器选型、系统准备到安全加固,提供全栈实战指南,帮助企业和开发者高效实现内网穿透需求。

weixin_27966471的博客 419

百度地图的使用---1、标注(Marker)的使用以及自定义样式

使用百度地图Marker标记,更改图标样式

weixin_43905297的博客 5501

lammps建模(电解液)opls-aa力场的基本流程

lammps建模(电解液)opls-aa力场的基本流程

syj0922的博客 2134

android 百度地图marker标记

/** * 针对不同类别数据进行数据展示 * * @param mWaterStaticsJson:数据集合 * @param drawableId:图片id(R.drawable.icon_swcater_pic_4) */ private void setMarkerInfo(WaterStaticsJson mWaterStat...

向着太阳迎着光 1948

从零到一:用Verilog和Quartus构建智能交通灯系统的实战指南

本文详细介绍了如何使用Verilog和Quartus Prime从零开始构建智能交通灯系统。通过分步指导,包括状态机设计、时序控制、数码管显示等核心模块实现,并结合ModelSim仿真验证,帮助FPGA初学者掌握数字电路设计的关键技术。文章还提供了实际部署到FPGA开发板的调试技巧和进阶优化方案。

weixin_29172201的博客 476

Mellanox CX7网卡搭配400G光模块实战:从选型到部署的完整指南

本文详细解析了Mellanox CX7网卡与400G光模块的选型策略与部署实践,涵盖硬件对比、兼容性验证及性能调优。重点介绍了OSFP光模块的选择要点和常见问题排查方法,帮助用户构建高性能网络基础设施,适用于AI训练、金融交易等场景。

efc1234567的博客 1291

使用百度地图API实现地图生成、标记以及标注

使用百度地图JavaScript API实现地图的生成、标记以及标注

qq_35042227的博客 2万+

RAP 语义键:让 UUID 世界变得可读、可导航、可校验

RAP 语义键的核心价值与实现要点 语义键(Semantic Key)是 ABAP RAP 模型中连接技术实现与业务体验的关键设计:通过为实体指定一组业务可读的标识字段(如订单号、物料编码等),在保持技术主键(如UUID)不变的同时,显著提升用户界面的可读性和导航体验。 主要优势: 提升UI可读性:Fiori元素会突出显示语义键字段,帮助用户快速识别关键业务数据 改善导航体验:OData URL会使用可读的语义键而非技术ID,便于分享和排查问题 降低沟通成本:业务人员能准确引用有意义的业务标识而非技术ID

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 155

调用百度地图接口,在地图上添加标记并点击显示具体信息

对于在想实现地图功能时,百度地图和高德地图都提供了很好的API接口,直接进入官网查找相应的开发文档即可。 我这里使用的是百度地图,首先你得申请一个百度的密钥,这个很简单,网上很多教程。 货不多说,下面看代码 <!DOCTYPE html> <html xmlns:asp=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met

weixin_43857576的博客 3690

芯片标称具备8kVESD能力却在8kV测试中失效?

芯片级ESD(HBM模型)与系统级ESD(IEC 61000-4-2)存在本质差异:

硬核科技 647

基于Simulink的电动车PMSM能量泄放与回收系统仿真设计

摘要 本文设计了一个基于Simulink的电动车PMSM能量泄放与回收系统仿真模型。系统采用分层建模方案,包含永磁同步电机(PMSM)矢量控制、电池管理和泄放功率计算等核心模块。通过详细的参数计算和MATLAB脚本实现,模拟了电动车在制动时的能量回收过程。重点研究了泄放电阻的控制策略,提出基于母线电压和电池SOC的多目标优化算法,确保系统在保护硬件安全的同时最大化能量回收效率。仿真模型包含完整的数学推导和模块搭建指南,为电动车能量管理系统设计提供了有效的仿真验证平台。

huanghm88的专栏 193

百度地图:为标记添加点击事件显示标注

为百度地图标记添加点击事件

qq_35042227的博客 1万+

【华为OD机试】真题E卷-一种字符串压缩表示的解压(C++)

有一种简易压缩算法:针对全部为小写英文字母组成的字符串,将其中连续超过两个相同字母的部分压缩为连续个数加该字母,其他部分保持原样不变。例如:字符串aaabbccccd 经过压缩变成字符串 3abb4cd请您编写解压函数,根据输入的字符串, 判断其是否为合法压缩过的字符串若输入合法则输出解压缩后的字符串 否则输出字符串!error来报告错误。

u014481728的博客 894

百度地图之添加行政区划 添加遮罩层 并添加街道标记 点击显示街道信息 去除百度地图logo

百度地图之行政区遮罩层街道标记显示信息去除水印效果图添加Map实例,并添加控件,中心坐标为你要显示的区域的中心画行政区、添加遮罩添加窗口信息(点击触发)去除百度地图logo和水印 效果图 添加Map实例,并添加控件,中心坐标为你要显示的区域的中心 var map = new BMap.Map("streetMap"); //创建地图实例 var point = new BMap.Point(1...

m-dididid的博客 3024

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

在百度地图添加一个标记点,点击右键删除标记点

代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" ...

The best are water的博客 3326

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

百度地图JavaScript API GL获取经纬度,标记,添加文本标注,点击事件,封装

【代码】百度地图JavaScript API GL获取经纬度,标记,添加文本标注,点击事件,封装。

zmyalh的博客 1536

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

点击百度地图获取经纬度添加标记

<div id="allmap"></div> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> var map = new BMap.Map("allmap"); //new 一个地图对象 var point = new BMap.Point(116.404, 39....

weixin_38999134的博客 667

百度地图标记点加点击事件和鼠标移入事件并添加数据

this.$nextTick(() => { var timer = setTimeout(() => { this.MP('密钥').then((BMap) => { const map = new BMap.Map('map'); map.enableScrollWheelZoom(true); map.centerAndZoom(new BMap.Point(108.948, 34.263), 11); // 初始

qq_48228724的博客 4453

vue中使用百度地图 添加标记物,点击标记物弹窗,画运动轨迹,位置纠偏,逆地址解析

在vue项目中使用百度地图,添加标记物、信息弹窗、动态画轨迹 首先安装 <div id="allmap"> <baidu-map class="bm-view" :center="center" @ready="handler"> </baidu-map> </div> <style scoped lang="scss"> #allmap { width: 100%; height

weixin_43965143的博客 8407

百度地图添加标记以及标签的点击

http://blog.youkuaiyun.com/ithouse/article/details/45918709

feelinghappy的专栏 1655

Vue引入百度地图API,添加点击地图拾取坐标并且标记和地址搜索功能

html页面 <template> <el-form> <el-row :gutter="24"> <el-col :span="12"> <el-col :span="12"> <el-form-item label="位置经度" prop="lng"> <el-input v-model="model.lng"

zmz200225的博客 5515

html百度地图标记图标,百度地图开发之点击地图给该位置添加标注(图标)并弹出对应的位置...

1.首先要引入自己的ak2.在html中写出地图的挂载点3.百度地图JS 的APIvar map = new BMap.Map("sitePersonMap"); //new 一个地图对象var point=new BMap.Point(121.770944, 31.107101); //设置地图的中心点var zoom=16; ...

weixin_34897842的博客 952

调用百度地图,点击单个标记点击位置

跟图一样,传一个 经纬度  给 js ,然后js 就标记到地图上,同时鼠标点击 别的地方,然后 红的跟着走首先要引用百度的js&lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=自己申请的百度的js_ak值"&gt;&lt;/script&gt; 下面的就是调用地图了  我只传 了一...

u013366751的博客 2926

Bmap 百度地图

引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=y4PT8G6QkwtkVU7p5P26O8azvuRXg9Lz"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js

weixin_43998184的博客 773

百度地图marker标记即行车路线规划和marker点击气泡事件

上一篇,之前的定位什么的就不在说了,我们可以做个简单的demo,点击地图任意位置添加标记marker,并且根据,我们定位的位置为起点stNode,和marker标记即我们点击的位置即enNode,进行自动路线规划,橙色代码位置为添加marker如果你只需要marker标记那么即添加这些代码即可。 import android.content.Context; import android.w

青穗的博客 7852

【vue baiduMap】实现在百度地图上覆盖背景颜色,仍然可以点击地图功能

【vue baiduMap】实现在百度地图上覆盖背景颜色,仍然可以点击地图功能

weixin_41747256的博客 282
上一篇: 如何合理使用安卓Handler
下一篇: 底部删除按钮动态显示
ithouse
博客等级 码龄12年 200粉丝 212原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值