Django显示高德地理坐标指南：快速集成与展示

Django在Web开发中扮演了重要角色，结合高德地图API可以实现强大的地理信息展示功能。本指南将详细讲解如何在Django项目中集成高德地图API，并展示用户上传的地理坐标。

高德地图API的注册与获取

1. 获取高德地图API密钥

要开始使用高德地图API，首先需要在高德开放平台注册并申请API密钥。此密钥是与API交互的唯一凭证，确保您在项目中安全使用。

步骤：
- 前往高德开放平台
- 注册并登录账户
- 申请开发者密钥并妥善保存

高德地图API注册

项目初始化与依赖安装

2. 安装Django和Requests库

在终端中，通过pip安装Django和Requests库，这两个库是实现项目功能的基础。

pip install django requests

Django：用于创建Web应用框架
Requests：用于处理HTTP请求，与高德API交互

Django安装

创建Django项目与应用

3. 创建Django项目及应用

如果您尚未创建Django项目，可以通过以下命令创建一个新项目，并在其中添加应用模块。

django-admin startproject amap_project
cd amap_project
python manage.py startapp amap_display

项目结构：确保项目内包含settings.py、urls.py等文件配置

Django项目结构

Django项目的设置与配置

4. 配置项目的设置文件

在amap_project/settings.py中，配置INSTALLED_APPS，确保包含我们新创建的应用。

INSTALLED_APPS = [
    ...
    'amap_display',
]

小贴士：确保所有依赖已安装并且路径正确

配置文件设置

模型设计与数据库配置

5. 设计存储地理坐标的模型

在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以确保存储高精度坐标

模型设计

创建用户交互表单

6. 定义用户提交坐标的表单

在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可以简化表单生成过程

表单设计

视图与模板的功能实现

7. 编写视图函数与模板文件

在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})

小贴士：redirect函数在表单提交后跳转

模板文件

在amap_display/templates/map.html中添加HTML代码以渲染地图。




    高德地图显示
    


    地点列表
    
    
        {% for location in locations %}
            {{ location.name }}: ({{ location.latitude }}, {{ location.longitude }})
        {% endfor %}
    

    
        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 %}

小贴士：替换YOUR_API_KEY为实际申请的API密钥

地图展示

路由配置与服务器启动

8. 配置路由与启动服务器

在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')),
]