本文详细讲解如何在 Django 项目中集成高德地图 API，展示用户上传的地理坐标。通过简单的步骤，快速实现地图功能。
你是否在开发 Django 项目时遇到过这样的问题：用户上传了一个高德地图的地理坐标，如何将这些坐标展示在网页上？很多开发者可能会发现，这种需求看似简单，实际上却涉及多个复杂的步骤，比如如何与高德地图 API 对接，如何处理坐标数据等。今天，我将为你带来一份详细的解决方案，让你在 Django 项目中轻松显示高德地理坐标，快速实现这一功能。
首先，确保你有一个高德地图 API 密钥。没有的话，可以去高德开放平台（https://lbs.amap.com/）注册一个账户，并申请一个开发者密钥。记得保存好这个密钥，它是与高德地图 API 交互的唯一凭证。
接下来，我们需要安装一些必要的依赖。可以通过以下命令安装 django 和 requests 库：
pip install django requestsrequests 库用于发送 HTTP 请求，获取高德地图 API 的返回数据。如果你还没有 Django 项目，可以按照以下命令创建一个新的项目：
django-admin startproject amap_project
cd amap_project
python manage.py startapp amap_display在 amap_project/settings.py 中，添加 amap_display 应用：
INSTALLED_APPS = [
...
'amap_display',
]在 amap_display/models.py 中，定义一个 Location 模型，来存储用户上传的地理坐标数据：
from django.db import models
class Location(models.Model):
name = models.CharField(max_length=100)
latitude = models.FloatField()
longitude = models.FloatField()
def __str__(self):
return self.name在这个模型中，我们存储了地点名称、纬度和经度。之后，用户可以通过表单提交这些数据。
FloatField 存储经纬度坐标，确保存储的数据格式能够支持高精度的地理坐标。为了让用户能够提交地理坐标，我们需要创建一个表单。在 amap_display/forms.py 中，添加：
from django import forms
from .models import Location
class LocationForm(forms.ModelForm):
class Meta:
model = Location
fields = ['name', 'latitude', 'longitude']ModelForm 可以简化表单的创建过程，它会自动为你生成与模型相关的表单字段。接下来，我们需要在 views.py 中编写视图，处理用户提交的表单并显示地图。
from django.shortcuts import render, redirect
from .forms import LocationForm
from .models import Location
import requests
def show_map(request):
locations = Location.objects.all()
return render(request, 'map.html', {'locations': locations})
def add_location(request):
if request.method == 'POST':
form = LocationForm(request.POST)
if form.is_valid():
form.save()
return redirect('show_map')
else:
form = LocationForm()
return render(request, 'add_location.html', {'form': form})在 add_location 视图中，我们展示一个表单，用户可以输入地点名称和坐标。show_map 视图则负责显示所有保存的坐标，并在页面中渲染地图。
redirect 函数会让用户提交表单后自动跳转到显示地图的页面。在 amap_display/templates/map.html 中，添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>高德地图显示</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
</head>
<body>
<h1>地点列表</h1>
<div id="container" style="width: 600px; height: 400px;"></div>
<ul>
{% for location in locations %}
<li>{{ location.name }}: ({{ location.latitude }}, {{ location.longitude }})</li>
{% endfor %}
</ul>
<script>
var map = new AMap.Map('container', {
zoom: 10,
center: [116.397428, 39.90923] // 默认显示北京的坐标
});
{% for location in locations %}
var marker = new AMap.Marker({
position: [{{ location.longitude }}, {{ location.latitude }}],
title: '{{ location.name }}'
});
marker.setMap(map);
{% endfor %}
</script>
</body>
</html>在这个模板中，我们使用高德地图的 JavaScript API 来显示地图并标记用户上传的地理坐标。
YOUR_API_KEY 为你申请的高德地图 API 密钥。在 amap_display/urls.py 中，添加路由配置：
from django.urls import path
from . import views
urlpatterns = [
path('', views.show_map, name='show_map'),
path('add/', views.add_location, name='add_location'),
]然后在 amap_project/urls.py 中包括这个应用的路由：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('map/', include('amap_display.urls')),
]最后，启动 Django 开发服务器：
python manage.py runserver打开浏览器，访问 http://127.0.0.1:8000/map/，你就能看到显示高德地图和用户上传的坐标了。
通过上述步骤，你已经掌握了如何在 Django 项目中集成高德地图 API，显示用户上传的地理坐标。记得在开发过程中时刻注意 API 密钥的安全，并根据实际需求对地图样式和功能进行调整。希望这个教程能够帮助你快速解决问题，提升你的开发效率。
相关推荐:
© 2025 365tool.com. All rights reserved.