网页前端，在一个中国城市图片上点击后会出现一个墨笔的小圈把城市名字圈起来这种效果怎么实现

首先得有城市的四个角坐标（左上、右上、左下、右下坐标）范围

两种方法：

1、直接img引入该图片，通过监听点击事件得到的坐标（一般需进行计算，计算相对该图片的左上角的位置，方便图片在更换位置的时候无需重新计算）与所有城市坐标范围进行对比，在某城市范围内的时候说明该城市被点击，通过absolute定位一张底色透明的墨笔小圈图片以及各项信息图片放置在对应位置（如果城市范围不同可能还需要通过坐标范围动态调整图片大小）

2、使用canvas把城市图片画出来，通过监听点击事件得到的坐标与所有城市坐标范围进行对比，在某城市范围内的时候说明该城市被点击，可以继续画墨笔小圈图片在上面以及显示对应的各项信息，原理和第一种方法一样（难度较大）

可以在进入到的该软件以后点击当前的城市按钮，然后在出现的页面中点击切换城市。并在城市列表中点击需要的城市即可进行添加。具体的以OPO手机为例，添加方法如下：

1、在手机上点击该APP软件进入。

2、页面跳转以后进入到该软件界面，可以看到起默认的城市区域，点击该城市进入。

3、在出现的该城市界面下方可以看到切换城市的按钮，点击进入。

4、页面跳转以后进入到城市列表界面，点击需要添加的城市进入。

5、此时页面再次跳转以后即可看到该软件已经添加了其他需要添加的城市了。

网站插入地图方法：

代码嵌入法步骤：

打开百度地图生成器。

定位中心点：将“当前城市”切换到你要创建地图的城市，输入详细地址进行查找。

设置地图：设置地图尺寸，地图缩放、地图缩略图、地图比例尺、地图状态等。依照用户的习惯以及需求进行设定。

添加标注：标记的图标可以在地图上面进行简单修改位置。输入公司的名称，在备注中可以添加地址、电话、传真、邮编、邮箱等属性。

设定路线显示以及文本字样添加。

获取代码：点击获取代码按钮，就会自动d出一个“自定义地图代码”的页面，将页面中的代码复制即可。

将代码复制到网站的相应位置即可。

控件嵌入法：

   开通百度统计，验证认证(认领)网站。

   找到服务功能，添加百度地图名片控件即可。

效果图：

      

---